@ys930126
2021-09-27T16:57:59.000000Z
字数 1502
阅读 43
Vue.js Webpack Vite
尽量知其然也知其所以然
尤大yyds，集合nodejs+webpack 。vue开发脚手架尤大yyds，利用esm打包的的开发+构建神器web+pack = 前端打包,你不认识我要生气了还记得你写的require么你用那么多 import , export 难道不知道我是谁？也是一个前端打包工具，vite用它，react也在用它你之所以岁月静好，Babel替你负重前行。-- 低版本浏览器语法支持和转换小能手这你不能不知道吧一个快被webpack革命的打包方法，我还没用过现在所有知识点，都是基于前端工程化和模块化思想。模块化的思想也是软件工程中所说的解耦，低耦合高内聚一直都是开发的目标。
我们做的工作都是为了在开发过程中更加简单和顺手，尽量开箱即用，用工具和配置解决手工工作。在生产环境中能够尽量跟随和贴近浏览器原生支持，让生产产物更简单（更小的体积和更少的请求）。
在模块化编程中，开发者将程序分解为功能离散的 chunk，并称之为 模块。
每个模块都拥有小于完整程序的体积，使得验证、调试及测试变得轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具备了条理清晰的设计和明确的目的Node.js从一开始就支持模块化编程。然而，web 的模块化正在缓慢支持中。 在web界存在多种支持JavaScript模块化的工具，这些工具各有优势和限制。
本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependencygraph)，然后将你项目中所需的每一个模块组合成一个或多个bundles，它们均为静态资源，用于展示你的内容。
webpack利用入口文件，通过深度遍历各个文件依赖生成最终的文件依赖树，在一些高阶语法和预处理语法上使用loader在编译时根据对应的规则通过loader来将其编译为浏览器能够识别的语法。最终将其打包成静态文件。
Rollup 是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序。Rollup对代码模块使用新的标准化格式，这些标准都包含在JavaScript的ES6版本中，而不是以前的特殊解决方案，如CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。ES6模块最终还是要由浏览器原生实现，但当前 Rollup 可以使你提前体验。
看后记，惊呼能人