vue笔记

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。

这里和此处有vue2通过rollup构建过程。

1.url中#的作用

2.axios的使用

https://www.kancloud.cn/yunye/axios/234845

3.vuex的使用

4 json-server

https://www.npmjs.com/package/json-server