vite（一）前端打包工具发展史

现如今前端打包工具最火的无疑是vite！但是vite也不是凭空产生的，而是踩着前人肩膀发展起来的。所以在学习vite之前，有必要了解前端打包工具发展史。

前端打包工具发展史分为哪些阶段？

每一次前端打包工具迭代发展的动力来源于：随着前端的发展，当前的工具无法满足前端的需求。我根据几次前端打包遇到的重大的问题对前端发展史进行划分：

1. 后端语言打包阶段（ -2009年）
2. 文件打包阶段（2009年-2014年）
3. Webpack阶段（2014年-2019年）
4. Vite阶段（2019年-） 接下来我将对每个阶段进行讲解

一. 后端语言打包阶段（ -2009年）

2009年之前，前端刚发展，市面上没有一个为前端开发设计的打包工具。所以这个阶段问题，需求，解决办法：

• 问题：没有为前端开发的打包工具，手动打包费时费力
• 需求：需要自动打包的方法。
• 办法：用 PHP/Python/Java/Ruby/BashScript 写打包脚本，用 make 做构建工具
• 好处：解决了手动打包的困扰
• 痛点：前端必须学一门后端语言

每个阶段的痛点都为新一代打包工具产生提供了方向。

二. 文件打包阶段（2009年-2014年）

为什么这个阶段的开始节点是2009年？

因为，nodejs诞生了，这也意味着前端不在学习需要后端语言就可以操作文件了！

这个阶段代表工具有：Grunt，Gulp等

Grunt

Grunt可以说是一个任务执行器，为什么这么说，看例子：

// Gruntfile.js
grunt.initConfig({
  jshint: {...}, watch: {files, tasks: ['jshint']}
})

grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit);
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

// 在命令行运行 grunt 命令，就会触发 default 任务

grunt语句是由任务任务构成的，操作对象是文件。每个任务官方都定义好了。他有这些特点：

• 问题：之前打包需要学习后端语言。
• 需求：需要简单的打包方法。
• 办法：Grunt通过配置任务，操作文件解决
• 好处：有了简单，配置性的打包办法。
• 痛点：Grunt一次打包由多个任务组成，每个任务都要吞吐文件，多个任务存在重复吞吐文件的情况，性能非常拉胯

Gulp

Gulp是另一个任务执行器，他主要针对Grunt问题做了改进：

// gulpfile.js
const clean = ()=> {...} 
const css = ()=> gulp.src('scss/**/*.scss').pipe(sass())...
const jslint = ()=> gulp.src('js/**/*').pipe(...
const minify = ()=> gulp.src('js/**/*').pipe(...
const watch = ()=> {
  gulp.watch("scss/**/*", css)
  gulp.watch("js/**/*", gulp.series(jslint, minify))
}
const js = gulp.series(jslint, minify)
const build = gulp.series(clean, gulp.parallel(css, js))

exports.css = css
exports.js = js
exports.default = build

• 问题：Grunt打包太慢了
• 需求：想要快速打包的方法
• 办法：Gulp引入管道、流、并行、串行等概念,将操作放在内存，而不是硬盘。
• 好处：有了更快的打包办法。
• 痛点：只是对Grunt进行了优化，本质没有变。当前端开始向模块化发展，特别当react，vue出来，项目文件越来越多。基于文件的操作打包工具越来越吃力。

三. Webpack阶段（2014年-2019年）

Webpack

2014年Webpack发布，这是专门为前端设计开发的打包工具。它有这些特点：

• 问题：前端模块化，文件越来越多，基于文件打包的工具无法满足需求
• 需求：想要一种新的打包工具
• 办法：webpack以打包 JS 为主要功能，不再是任务运行。loader 用于加载文件、plugin 用于扩展功能。提供 webpack-dev-server、热更新
• 好处：极大满足了前端的打包需求，不管多么复杂都能搞定
• 痛点：配置复杂，基本没人能不出错。随着项目变大，大家发现打包越来越慢了。

Rollup

Rollup又一个前端打包器，有着这些特点：

• 问题：webpack太慢了
• 需求：想要一种更快的打包工具
• 办法：面向 ES Modules 而不是 AMD / CommonJS，支Tree-shaking。不提供 dev server，只做生产环境打包
• 好处：打包性能比 Webpack 好
• 痛点：功能不如 Webpack 全，支持生成环境

四. vite阶段

vite是面向下一代的前端构建工具，他有接下来的特点：

• 问题：webpack太慢了，Rollup只支持生成环境打包
• 需求：想要一种生产，开发环境，更简单更快的打包工具
• 办法：开发时，不打包，充分利用浏览器的 module 能力。发布时，用 Rollup 打包
• 好处：开发速度甩 Webpack 十八条街
• 痛点：插件不够多，但问题不大，自己写插件即可。热更新会失灵，但问题不大，自己点刷新即可

至于怎么使用vite，如何开发vite插件，关注我接下来的教程