rollup
- 专注于JavaScript打包
- 不包含无关代码(对比webpack)
- tree shaking 最开始由rollup实现,之后被webpack借鉴
- 配置output.format,选择输出资源的模块形式,cjsmamd,esm,iife,umd,system
webpack
Webpack 是一个打包模块化 JavaScript 的工具,在 Webpack 里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。
Webpack的优点是:
- 专注于处理模块化的项目,能做到开箱即用一步到位;
- 通过 Plugin 扩展,完整好用又不失灵活;
- 使用场景不仅限于 Web 开发;
Webpack的缺点是只能用于采用模块化开发的项目。
Babel
参考
虽然目前部分浏览器和 Node.js 已经支持 ES6,但由于它们对 ES6 所有的标准支持不全,这导致在开发中不敢全面地使用 ES6。
通常我们需要把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码,这包含2件事:
- 把新的 ES6 语法用 ES5 实现,例如 ES6 的 class 语法用 ES5 的 prototype 实现。
- 给新的 API 注入 polyfill ,例如项目使用 fetch API 时,只有注入对应的 polyfill 后,才能在低版本浏览器中正常运行。
presets 属性告诉 Babel 要转换的源码使用了哪些新的语法特性,一个 Presets 对一组新语法特性提供支持,多个 Presets 可以叠加。 Presets 其实是一组 Plugins 的集合,每一个 Plugin 完成一个新语法的转换工作。Presets 是按照 ECMAScript 草案来组织的,通常可以分为以下三大类:
- 已经被写入 ECMAScript 标准里的特性,由于之前每年都有新特性被加入到标准里,所以又可细分为:
- es2015 包含在2015里加入的新特性;
- es2016 包含在2016里加入的新特性;
- es2017 包含在2017里加入的新特性;
- env 包含当前所有 ECMAScript 标准里的最新特性。
- 被社区提出来的但还未被写入 ECMAScript 标准里特性
- 为了支持一些特定应用场景下的语法,和 ECMAScript 标准没有关系
Vue2
vue2可以通过使用webpack引入vue-loader进行打包,我在仓库中仿照深入浅出Webpack运行通过了代码,修复了一些bug。
1.url中#的作用
2.axios的使用
https://www.kancloud.cn/yunye/axios/234845
3.vuex的使用
4 json-server
https://www.npmjs.com/package/json-server