持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
JS 打包工具
对于 JS 这⻔语言的不同环境来说，有 CommonJS，AMD 和 ESModule 这几种常⻅的模块化规范，这几种规范都有自身的缺点。
CommonJS 不经处理只能运行在 node.js，AMD 不经处理无法运用在各个平台，需要搭配符合 AMD 规范的其他库例如 require.js 一起使用。ESModule 虽然从语言层面上解决了规范问题，但是即使经过 babel 编译，也会将 import，export 之类的关键词编译为 CommonJS 的 require 和 exports ，我们还是无法直接在浏览器中使用。
为了能使任何一个模块都能自由的切换所使用的环境，例如在浏览器使用 CommonJS 封装好的模块， 我们就需要经过打包这个步骤。
browserify 、 rollup 等等工具都是处理诸如此类内容。
browserify
地址: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 地址 github.com/mishoo/Ugli…
安装成功之后非常简单，只需要通过 uglifyjs index.js -o output.js 就可以输出压缩的结果。 同时我们可以通过添加 --source-map 在运行时生成 sitemap 文件，方便我们进行 debug。
其他类目工具
任务处理工具(gulp/grunt)
上面我们说的所有工具都是针对某一个垂直领域来说的，比如编译、打包、压缩等等，我们需要通过不同的命令去运行和操作我们的 JS 文件。
所谓任务处理工具，就是这一类脚本工具，他们能通过脚本的形式将不同的工具进行组合输出。
流式处理工具比较常说的两个是 grunt 和 gulp。下面分别介绍一下这两个工具。
grunt
grunt 官网 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 官网 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，他们更多的是将前面我们讲的所有其他工具融合起来，以一种插件的形式进行加载，从而达到了通用的目的。