关于前端:浅谈前端工程化的发展以及相关工具介绍

什么是工程化? 什么是前端工程化?

随着倒退的逐渐倒退，作为工程师除了须要关注须要写的⻚面，款式和逻辑之外，还须要面对日益简单 的系统性问题，比方模块化文件的组织、ES6 JS 文件的编译、打包压缩所有的 JS 代码、优化和合并图片动态资源等等事件。

咱们的我的项目须要以一种正当的形式进行组合，以应答在团队合作、需要迭代中放弃我的项目 的稳固倒退。这种形式就是工程化零碎去运行咱们的我的项目。

例如如下图所示就是前端工程化中一次打包的过程，左侧就是咱们我的项目中呈现的源文件，例如咱们会通 过 sass 这种预处理款式来更好的组织咱们的款式代码，应用各类其余语言比方 typescript、coffescript 等来书写咱们的逻辑脚本。在最终上线时，咱们须要把咱们的这类文件，转化为可能在线上间接被浏览 器辨认的 css 和 js。

这种应用工程化思维，以工具的模式来进行上述过程的，就是前端方面的工程化。

一句话总结就是，前端工程化，就是在应用工具解决那些与理论业务无关的内容，比方解决 JS 编译、打包、压缩、图片合并优化等等各个方面的工程性代码。

前端工程化具体类目

包管理工具

对于一⻔成熟的语言来说，在有语言标准的同时，社区或者制订语言标准的组织也会有模块化的标准和 模块存储到平台，每个人都能将本人写好的模块化代码公布到平台上，同时任何人也能够下载公共平台 上其他人的模块化代码。这种模块化的代码咱们个别称之为 包 (package)，平台咱们称之为包治理 平台，这种行为咱们称之为 包治理 (package manager)。

对于 JS 来说，现阶段大家比拟相熟的就是 node.js 环境自带的 npm 工具，npm 全称是 node package manager，就是 node.js 的包管理工具，对于一个符合规范的包来说，咱们能够通过 npm publish 发 布包，同样的，也能够通过 npm install 来下载他人公布的包，实现大家的模块复用。

社区中常⻅的包管理工具有，bower，npm 和 yarn。目前还在常常应用的是 npm 和 yarn。

bower

bower 最早呈现是应用在浏览器我的项目中。装置 bower 命令后，通过 bower install jquery，就可 以将 jquery 下载到 bower_components 目录中，咱们就能够在 html 文件加上 <script src="bower_components/jquery/dist/jquery.min.js"></script>。免去了咱们间接从官网下 载而后移动到我的项目中的懊恼。

bower 也反对一些配置，咱们只须要在我的项目根目录下减少 .bowerrc 配置即可:

    {
      "directory": "app/components/", "timeout": 120000,
      "registry": {"search": ["http://localhost:8000", "https://registry.bower.io"]
      }
    }

下面的配置次要配置了咱们下载后的模块存储目录，下载超时工夫和下载的地址等等。如果想要公布一个 bower 模块的话，须要咱们这个我的项目下配置 bower.json，而后通过 bower register 命令公布。

bower 内容的介绍比较简单，当初新我的项目中应用曾经不多，包管理工具这一大节的重点是 npm。

npm

npm 是随同着 node.js 下载会一起装置的一个命令，它的作用与 bower 一样，都是下载或公布一些 JS 模块。

咱们能够应用 npm --version 查看装置的 npm 版本，不同版本带有不同性能。同时，咱们能够通过 npm install 来装置一个模块，例如下面的例子中，咱们就能够通过 npm

install jquery 来装置 jquery，npm 会将模块装置到 node_modules 目录中。一个合格的 npm 包，必须领有 package.json 这个文件，外面有以下几个常⻅字段:

name: 包或者模块的名称
version: 版本
main(重要): 默认加载的入口文件
scripts: 定义一些脚本
dependencies: 运行时须要的模块 devDependencies: 本地开发须要运行的模块
optionalDependencies: 可选的模块，即便装置失败装置过程也会失常退出
peerDependencies : 必要依赖的版本版本 

其中 dependencies 和 devDependencies 外面的版本号通过“大版本. 主要版本. 小版本”的格局规定。咱们通过 npm install 装置的模块，最终都会在外面进行记录。同时，咱们通过 npm install 时，还会装置这里记录然而 node_modules 中没有的模块。

如果后面带有波浪号 (~)，则以大版本号和主要版本号为主，例如 “~1.3.2” 的版本，最终装置时就会 装置 1.3.x 的最新版本。

如果后面带有插入号 (^)，则以大版本号为主，例如 “^1.3.2” 的版本，最终装置就会装置 1.x.x 的最新版本。

高版本的 npm 会将所有依赖进行「打平」操作，这样能保障尽可能少的装置雷同的模块。所有下载的模块，最终都会记录在 package-lock.json 齐全锁定版本，下次咱们再 npm install 时，就会先下载 package-lock 外面的版本。

yarn

https://yarnpkg.com/ yarn 是一个新兴的包管理工具，他与 npm 有着类似的性能，最大的劣势就是并发和快。

咱们能够通过 yarn add 来装置一个模块，通过 yarn xxx 来运行 scripts 中的脚本。

包管理工具中常⻅面试问题

1. devDependencies、dependencies、optionalDependencies 和 peerDependencies 区别

devDependencies 是指应用本地开发时须要应用的模块，而真正的业务运行时不必的内容。

dependencies 是指业务运行时须要的模块。

optionalDependencies 是可选模块，安不装置均可，即便装置失败，包的装置过程也不会报错。

peerDependencies 个别用在大型框架和库的插件上，例如咱们写 webpack–xx-plugin 的时候，对于使用者而言，他肯定会先有 webpack 再装置咱们的这个模块，这里的 peerDependencies 就是束缚了这个例子中 webpack 的版本。

2. npm 中 –save-dev 和 –save 之间的区别

对于大型项目来说，他们的界线实际上并不清晰。真正会有差别的中央是到底咱们应用哪种形式来装置所有的依赖。

save-dev 和 save 都会把模块装置到 node_modules 目录下，但 save-dev 会将依赖名称和版本写到 devDependencies 下，而 save 会将依赖名称和版本写到 dependencies 下。如果咱们应用 npm -- production install 这样的命令装置模块的话，就只会装置 save 装置的包。

源代码动态检查和格式化工具

动态查看指的是咱们在本地写源代码时，咱们应用的编辑器对咱们所写代码的 提醒，查看 和 格式化。在大型项目中，提醒 这一步因人而异大部分不做独特要求，检查和格式化个别会对团队应用的内容进行 束缚，以保障大家能写出「正确」的代码和对立的代码⻛格。

对于代码的检查和格式化，在前端倒退中比拟经典的是 jslint，jshint，eslint 和 prettier。他们基本上都是一类的工具，再细分的话，jslint，jshint 和 eslint 是一类，他们专⻔解决 JS 格式化和动态语法查看，prettier 是另一类，他能解决多语言的格式化。

eslint

eslint 的官网:https://eslint.org/ 咱们以 eslint 为例，只须要在我的项目中通过 npm install --save- dev eslint 装置他，通过配置 .eslintrc (runtime config) 咱们就能够应用了。配合 eslint 的编 辑器插件，咱们就能够在编辑代码时 eslint 对咱们的代码进行提醒和修复。

通过配置 eslint index.js 这样的脚本，就能够对脚本文件进行动态校验。

留神这里是 --save-dev 因为咱们只须要在我的项目开发过程中应用它而不是运行过程应用这个模块。

prettier

prettier 官网:https://prettier.io/，同样的咱们能够配置 prettier 的配置，.prettierrc 外面也能够 进行配置，最终搭配 prettier 的 编辑器插件，咱们同样可能实现代码编辑状态下的提醒和修复。

源代码动态检查和格式化工具

动态查看指的是咱们在本地写源代码时，咱们应用的编辑器对咱们所写代码的 提醒，查看 和 格式化。在大型项目中，提醒 这一步因人而异大部分不做独特要求，检查和格式化个别会对团队应用的内容进行 束缚，以保障大家能写出「正确」的代码和对立的代码⻛格。

对于代码的检查和格式化，在前端倒退中比拟经典的是 jslint，jshint，eslint 和 prettier。他们基本上都是一类的工具，再细分的话，jslint，jshint 和 eslint 是一类，他们专⻔解决 JS 格式化和动态语法查看，prettier 是另一类，他能解决多语言的格式化。

eslint

eslint 的官网:https://eslint.org/ 咱们以 eslint 为例，只须要在我的项目中通过 npm install --save- dev eslint 装置他，通过配置 .eslintrc (runtime config) 咱们就能够应用了。配合 eslint 的编 辑器插件，咱们就能够在编辑代码时 eslint 对咱们的代码进行提醒和修复。

通过配置 eslint index.js 这样的脚本，就能够对脚本文件进行动态校验。

留神这里是 --save-dev 因为咱们只须要在我的项目开发过程中应用它而不是运行过程应用这个模块。

prettier

prettier 官网:https://prettier.io/，同样的咱们能够配置 prettier 的配置，.prettierrc 外面也能够 进行配置，最终搭配 prettier 的 编辑器插件，咱们同样可能实现代码编辑状态下的提醒和修复。

ES6 及其他泛 JS 语言的编译

大部分时候，咱们不能间接在线上应用 ES6 语法标准的 JS 代码，咱们就须要通过工具对 JS 进行编译。同时，有些我的项目咱们可能会应用 coffeescript，typescript，flow，elm，ocaml 等能够编译为 JS 语言 的泛 JS 语言书写代码，这就须要在调试或公布时，应用编译工具将对应代码编译为 JS 代码能力间接运行。

在编译过程中，JS 比拟常⻅的工具是 babel，而其余的语言则对应有本人的编译器，例如 coffeescript 应用 coffeescript 编译器进行编译为 js，typescript 应用 typescript 编译器编译为 js。

babel

babel 官网为 https://babeljs.io/，对于一个我的项目来说，咱们能够通过 npm install --save-dev @babel/core @babel/cli 来装置 babel 所须要的工具。

@babel/core 是 babel 外部外围的编译和生成代码的办法

@babel/cli (command line tool) 是 babel 命令行工具外部解析相干办法 装置了这两个包之后，咱们就可能应用 babel 相干办法对代码进行操作，接下来咱们须要配置，通知

babel 咱们须要将代码变成什么。

减少一个 babel 的 preset，preset 代表的是咱们心愿编译的后果的预设值。在最新的 babel 工具链 中，对立应用了 @babel/preset-env 作为环境预设值。咱们装置 npm install --save-dev @babel/preset-env 之后，新建 .babelrc 外面，通过配置

{"presets": ["@babel/preset-env"]
}

在 scripts 内定义一个脚本执行 babel index.js -o output.js，咱们在 index.js 中写的 es6 语法 就会被编译。

这一步只是编译语法层面的内容，如果咱们应用了一些新的办法的话，还须要减少一个 polyfill

应用 npm install @babel/polyfill 装置了所有符合规范的 polyfill 之后，咱们须要在入口文件引入这个模块，就能失常的应用标准中定义的办法了。

JS 打包工具

对于 JS 这⻔语言的不同环境来说，有 CommonJS，AMD 和 ESModule 这几种常⻅的模块化标准，这几种标准都有本身的毛病。

CommonJS 不经解决只能运行在 node.js，AMD 不经解决无奈使用在各个平台，须要搭配合乎 AMD 标准的其余库例如 require.js 一起应用。ESModule 尽管从语言层面上解决了标准问题，然而即便通过 babel 编译，也会将 import，export 之类的关键词编译为 CommonJS 的 require 和 exports，咱们还是无奈间接在浏览器中应用。

为了能使任何一个模块都能自在的切换所应用的环境，例如在浏览器应用 CommonJS 封装好的模块，咱们就须要通过打包这个步骤。

browserify、rollup 等等工具都是解决诸如此类内容。

browserify

地址:http://browserify.org/ 咱们通过 npm install --save-dev browserify 装置 browserify，咱们写一个简略的 commonJS 模块，通过 browserify index.js -o output.js 命令就能够将 CommonJS 模块化的包转化为通用的任何环境均能够加载的模块化标准。

rollup

rollup 是一个新兴的打包工具，它最先提出一个概念叫 tree shaking，他能够移除咱们代码中无用其余代码。

通过 ESModule 写的模块，在通过 rollup 解决之后，会对未应用的导出内容进行标记，在压缩过程就 会将这类未应用的内容移除。

JS 压缩工具

通过编译和打包的 JS 代码，最终要在线上通过压缩解决之后，能力最终在网站上面向用户显示。对于 JS 压缩工具来说，目前有十分多，但用的最多的还是 uglify 系列，uglify 最新是版本 3，不同 uglify 的 实现原理和性能都有极大的不同。

uglify

uglify3 地址 https://github.com/mishoo/Ugl…

装置胜利之后非常简单，只须要通过 uglifyjs index.js -o output.js 就能够输入压缩的后果。同时咱们能够通过增加 –source-map 在运行时生成 sitemap 文件，不便咱们进行 debug。

其余类目工具

工作解决工具 (gulp/grunt)

下面咱们说的所有工具都是针对某一个垂直畛域来说的，比方编译、打包、压缩等等，咱们须要通过不同的命令去运行和操作咱们的 JS 文件。

所谓工作解决工具，就是这一类脚本工具，他们能通过脚本的模式将不同的工具进行组合输入。

流式解决工具比拟常说的两个是 grunt 和 gulp。上面别离介绍一下这两个工具。

grunt

grunt 官网 https://gruntjs.com/。首先通过 npm install --save-dev grunt 装置 grunt 工具，新建 gruntfile.js 通过 gruntfile.js 中的配置来让 grunt 做不同的操作。

这里咱们装置 npm --save-dev @babel/core @babel/preset-env grunt-babel grunt- contrib-uglify 来残缺的进行一个我的项目的构建，通过配置 gruntfile 脚本，咱们别离执行了编译、压缩的过程生成最初 js 脚本。

gulp

gulp 官网 https://gulpjs.com/ 同样的咱们应用 npm install --save-dev gulp 装置 gulp 工具，新建 gulpfile.js 配置。

咱们同样实现雷同的性能来重新配置一下 gulp 工作。

gulp 相比于 grunt 来说，配置更加清晰，是一个链式调用的写法。

通用解决工具 (fis3/webpack)

通用解决工具这里咱们的分类是从性能上来讲，具备下面列举类目标多种性能的汇合。这里咱们列举的几个工具是 fis3 和 webpack。

fis 是国内百度公司在晚期公布的一款前端通用解决工具 (比 webpack 早)，fis3 是它的第三代，应用 node.js 重写了。

fis3 和 webpack 他们有个最大的特点就是，他们曾经不再是一个一般工具，而是一个具备插件化的零碎，有着丰盛和欠缺的社区环境，他们属于前端解决方案 这么一个畛域。实践上他们能够做十分多的事件，而不像下面介绍的大部分工具，只能解决某一个垂直分类下的内容。

webpack 实际上和 gulp grunt 这类的工作解决工具有些相似，然而它自身具备打包的性能，同时也反对通过中间件和插件实现其余畛域的性能，最终通过一个命令就能解决实现所有操作。

webpack 通过 webpack.config.js 配置，配置 loader 中间件来对不同文件进行操作，同时通过插件化的配置，反对例如压缩等等操作。

应用 fis3 和 webpack，他们更多的是将后面咱们讲的所有其余工具交融起来，以一种插件的模式进行加载，从而达到了通用的目标。