前端构建

前端构建

• 原因
  - 由于前端的迅速发展，出现了很多的前端语言，但是这些语言的源代码不能直接在浏览器或Node.js中运行。所以就需要使用构建工具，将这些源代码转换为线上可以直接运行的HTML，js，css代码。

• 内容
  - 代码转换，例如将TypeScript转换为JavaScript。
  - 文件优化，压缩HTML，css，js等文件。
  - 代码分割，提取多个页面公共代码，提取开始不需要执行的代码异步加载。
  - 模块合并，采用模块化构建的项目会有多个模块和文件，可以将这些模块合成一个文件。
  - 自动刷新，监听本地源代码的变化，自动重新构建，自动刷新浏览器。
  - 代码校验，代码被提交到仓库前，检测代码是否符号规范，测试是否通过等。
  - 自动发布，代码更新后，自动上传到代码仓库中。

• Node.js开发的构建工具
  - NPM Script
  * 嵌在Node中
  * 功能过于简单
  - Grunt
  * 灵活，它只负责执行你定义的任务
  * 大量的可复用插件封装好了常见的构建任务
  * Grunt的缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用
  - WebPack
  * 专注于处理模块化的项目，能做到开箱即用一步到位
  * 通过 Plugin 扩展，完整好用又不失灵活
  * 使用场景不仅限于 Web 开发
  * 社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展
  * 良好的开发体验
  * Webpack的缺点是只能用于采用模块化开发的项目