Vue.js Webpack Vite

尽量知其然也知其所以然

关键字

  • Vue-cli   中文官网 尤大yyds，集合nodejs+webpack 。vue开发脚手架
  • Vite  中文官网 尤大yyds，利用esm打包的的开发+构建神器
  • WebPack  git.io 、 中文官网 web+pack = 前端打包,你不认识我要生气了
  • CommonJS  Node官网说明、 阮一峰Blog 还记得你写的require么
  • ESM (es Module ) Node官网说明 你用那么多 import , export 难道不知道我是谁？
  • Rollup  官网说明  也是一个前端打包工具，vite用它，react也在用它
  • Babel Babel中文网 你之所以岁月静好，Babel替你负重前行。-- 低版本浏览器语法支持和转换小能手
  • NodeJS  中文官网 这你不能不知道吧
  • Glup/Grunt  glupJS中文网 一个快被webpack革命的打包方法，我还没用过

关系链条

  • vue-cli的打包构建是基于webpack
  • vite的开发构建基于浏览器对于ES6+中ESM的支持
  • vite的打包使用rollup进行构建打包
  • Nodejs模块化是基于CommonJS规范
  • Babel是用来帮助代码往后兼容低版本浏览器

小结

现在所有知识点，都是基于前端工程化和模块化思想。模块化的思想也是软件工程中所说的解耦，低耦合高内聚一直都是开发的目标。
我们做的工作都是为了在开发过程中更加简单和顺手，尽量开箱即用，用工具和配置解决手工工作。在生产环境中能够尽量跟随和贴近浏览器原生支持，让生产产物更简单（更小的体积和更少的请求）。

模块（Modules）

在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为 模块。
每个模块都拥有小于完整程序的体积，使得验证、调试及测试变得轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的Node.js从一开始就支持模块化编程。然而，web 的模块化正在缓慢支持中。 在web界存在多种支持JavaScript模块化的工具，这些工具各有优势和限制。

打包家族

  • webpack

本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。
webpack利用入口文件，通过深度遍历各个文件依赖生成最终的文件依赖树，在一些高阶语法和预处理语法上使用loader在编译时根据对应的规则通过loader来将其编译为浏览器能够识别的语法。最终将其打包成静态文件。

  • rollup

Rollup 是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序。Rollup对代码模块使用新的标准化格式，这些标准都包含在JavaScript的ES6版本中，而不是以前的特殊解决方案，如CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。

搬运&传送