Web前端工程化(Node、Babel、webpack、Vue、Nginx)
我们所写的前端程序是如何运行在浏览器上的呢?
本文就以Vue来简单谈一谈前端工程化
首先我们需要了解几个知识点
1、Node.j
官网:http://nodejs.c
什么是Node.js?
Node.js 是一个开源和跨平台的 JavaScript 运行时环境。 它几乎是任何类型项目的流行工具!
Node.js 在浏览器之外运行 V8 JavaScript 引擎(Google Chrome 的内核)。 这使得 Node.js 的性能非常好。
Node.js 具有独特的优势,因为数百万为浏览器编写 JavaScript 的前端开发者现在无需学习完全不同的语言,就可以编写除客户端代码之外的服务器端代码。
在 Node.js 中,可以毫无问题地使用新的 ECMAScript 标准,因为你不必等待所有用户更新他们的浏览器,你负责通过更改 Node.js 版本来决定使用哪个 ECMAScript 版本,你还可以通过运行带有标志的 Node.js 来启用特定的实验性功能。
大量的库
m 以其简单的结构帮助 Node.js 生态系统蓬勃发展,现在 npm 仓库托管了超过 1,000,000 个开源包,你可以自由使用。
Node.js 框架和工具
Node.js 是一个底层平台。 为了让开发者的工作变得轻松有趣,社区在 Node.js 上构建了数千个库。
2009
Node.js诞生,第一版npm被创建
Node.js 应用程序的示例
Node.js 中最常见的 Hello World 示例是 Web 服务器
const http = require(\'http\') const hostname = \'127.0.0.1\' const port = 3000 const server = http.createServer((req, res) => { res.statusCode = 200 res.setHeader(\'Content-Type\', \'text/plain\') res.end(\'Hello World\n\') }) server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`) })
2、Babel
官网:https://www.babeljs.c
Babel是什么?
Babel 是一个 JavaScript 编译器
Babel 是一个工具链,主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。
Babel 能干什么?
语法转换
通过 Polyfill 方式在目标环境中添加缺失的特性 (通过引入第三方 polyfill 模块,例如core-js)
源码转换(codemods)
ES2015 及更新版本
Babel 通过语法转换器来支持新版本的 JavaScript 语法。
这些 插件让你现在就能使用新的语法,无需等待浏览器的支持。
JSX 与 React
Babel 能够转换 JSX 语法!
类型注释 (Flow 和 TypeScript)
Babel 可以删除类型注释!
务必牢记 Babel 不做类型检查,你仍然需要安装 Flow 或 TypeScript 来执行类型检查的工作。
可调试
由于 Babel 支持 Source map,因此你可以轻松调试编译后的代码。
符合规范
Babel 尽最大可能遵循 ECMAScript 标准。不过,Babel 还提供了特定的选项来对标准和性能做权衡。
3、webpack
官网:https://www.webpackjs.com
什么是webpack?
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)
入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。
可以通过在webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src。
出口(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。
你可以通过在配置中指定一个 output 字段,来配置这些处理过程:
const path = require(\'path\'); module.exports = { entry: \'./path/to/my/entry/file.js\', output: { path: path.resolve(__dirname, \'dist\'), filename: \'my-first-webpack.bundle.js\' } };
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。
loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块。
插件(plugins)
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。
插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。
插件接口功能极其强大,可以用来处理各种各样的任务。
模式
通过选择 development 或 production 之中的一个,来设置 mode 参数,你可以启用相应模式下的 webpack 内置的优化
开发中 Server(devServer)
webpack-dev-server 能够用于快速开发应用程序
webpack-dev-server 为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)
const path = require(\'path\'); const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); const CleanWebpackPlugin = require(\'clean-webpack-plugin\'); module.exports = { entry: { app: \'./src/index.js\', print: \'./src/print.js\' }, devtool: \'inline-source-map\', + devServer: { + contentBase: \'./dist\' + }, plugins: [ new CleanWebpackPlugin([\'dist\']), new HtmlWebpackPlugin({ title: \'Development\' }) ], output: { filename: \'[name].bundle.js\', path: path.resolve(__dirname, \'dist\') } };
以上配置告知 webpack-dev-server,在 localhost:8080 下建立服务,将 dist 目录下的文件,作为可访问文件。
最终在浏览器里运行后,可以在终端看到如图所示
App running at:
4、Vue
官网:https://cn.vuejs.org
Vue.js是什么?
Vue 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
组件化应用构建
组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用
对比其它框架(React、Angular等)
详情参考:https://cn.vuejs.org/v2/guide/comparison.html
5、Nginx
官网:http://nginx.org
中文文档:https://www.nginx.cn/doc/index.html
Nginx是什么?
Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。
Nginx代码完全用C语言从头写成,已经移植到许多体系结构和操作系统
在连接高并发的情况下,Nginx是Apache服务不错的替代品
了解了以上几个点之后那么我们就可以说说前端工程化了
简言之:
Vue开发源码-->Babel编译-->webpack打包-->Nginx生产发布
- 上一篇:通过xrdp连接centos7桌面:
- 下一篇:没有了