45.项目构建

1、什么是项目构建?

• 项目构建包括如下内容：
  • 代码转换：将 TypeScript 编译成JavaScript、将 LESS 编译成 CSS等。
  • 文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。
  • 代码分割：提取多个页面的公共代码，提取首屏不需要执行部分代码让其异步记在。
  • 模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
  • 自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。
  • 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  • 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。
• 构建工具就是做以上这些事，将源代码转换成可以执行的JavaScript、CSS、HTML 代码。

2、构建工具的认识

• 构建工具有很多，例如：
  • fis3
  • grunt
  • gulp
  • webpack
  • parcel
  • Rollup
  • …
• 但是市面上最火，功能最强大的无非就是webpack，而其次是gulp。
• 所以，我们主要就学习这两种构建工具

3、构建环境的认识

• 我们对平时开发的代码区分了两种环境：
  • 开发环境 development
    • 自动编译运行项目、检查语法错误、详细的错误提示等… （能帮助程序员更好的写代码, 在内存中编译运行，没有任何文件输出）
  • 生产环境 production
    • 压缩代码、兼容性处理等…（生成打包后的项目文件，提供项目上线使用）
• 而我们使用的库也分为两种依赖：
  • 开发依赖 devDependencies
    • 项目构建打包需要的依赖
  • 生产依赖 dependencies
    • 项目上线运行时需要的依赖

接下来，我们具体讲讲构建工具的使用，

👉相关文章：gulp学习 webpack学习