babel

本人零基础已经顺利实现转行前端，很多人问我前端学习线路图是什么样的，这里分享给大家，希望能帮到你们。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上： 学习HTML基础，了解如何编写语义HTML理解如何把网页分成section（段落），以及如何正确组织DOM（文档对象模型）现在很多html5的新标签也很有用，需要进行了解 实践建议： 一旦你学习了HTML基础，至少要制作5个HTML网页。我建议你随便找一个网站，比如看看Github的档案页或者Twitter的登录页。然后把焦点放在恰当地组织内容上。出来的东西可能会很难看，但是暂时别担心，把你的关注点放在恰当的结构上。 2、学点CSS 现在我们已经学会了如何给网页准备好骨架，接下来就是在此基础上添加一些皮肤让它好看一点了。CSS——级联样式表就是用来美化你的HTML页面的。 首先要做的是学习语法，熟悉常见的CSS属性。了解盒模型（box model），掌握如何利用Grid和Flexbox准备布局一旦学习完上面的，再学习以下通过媒体查询把网站做成响应式的。 实践建议： 一旦你掌握了基础，接下来就应该设计上一步制作的HTML网页。比方说如果你给Github档案编写了HTML页面的话

webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐，前段时间把项目的webpack 升级到4.0版本以上 webpack 官网： https://webpack.js.org/ 正常操作升级webpack 检查node、npm 版本，该升级的升级 卸载webpack 旧版本，安装最新稳定版本 wepack、webpack cli 遇到loader 报错，升级各种loader，其中vue-loader 参考vue loader 官网说明 删除 ExtractTextPlugin插件，改用 MiniCssExtractPlugin 配置各个环境的mode 升级好之后继续优化，比如 gzip、happlyPack、dllplugin等等优化手段 等等 通常上面的报错很容易找到解决方案 碰到的问题 1、安装了babel 最新版，但是一直提示加载的是之前的版本，babel 一直报错 通常这是因为之前babel 卸载的不完整导致的，先把babel 相关的插件全都卸载，然后在安装新版本的插件。 2、在路由index中提示组件加载失败或者提示路由动态加载模块失败 dynamic-import-webpack 完整babel 配置如下 { "presets": ["@babel/preset-env"], // "presets": [ // ["env", {

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。 主要写一些 官方手册 上没有写，但是实际开发中会遇到的问题，需要一定知识基础。 涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 1、异步加载组件时，会产生 polyfill 代码冗余 2、不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map

由于公司的前端开始转向 VueJS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。 主要写一些 官方手册 上没有写，但是实际开发中会遇到的问题，需要一定知识基础。 涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 1、异步加载组件时，会产生 polyfill 代码冗余 2、不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 　　由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 　　不支持全局函数（如：Promise、Set、Map），Set 跟 Map

涉及技术栈 CLI: Vue-CLI UI: Element HTML: Pug(Jade) CSS: Less JavaScript: ES6 正文： polyfill 与 transform-runtime 首先，vue-cli 为我们自动添加了 babel-plugin-transform-runtime 这个插件，该插件多数情况下都运作正常，可以转换大部分 ES6 语法。 但是，存在如下两个问题： 异步加载组件时，会产生 polyfill 代码冗余 不支持对全局函数与实例方法的 polyfill 两个问题的原因均归因于 babel-plugin-transform-runtime 采用了沙箱机制来编译我们的代码（即：不修改宿主环境的内置对象）。 由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。如果项目较小可以考虑不使用异步加载，但是首屏的压力会比较大。 不支持全局函数（如：Promise、Set、Map），Set 跟 Map 这两种数据结构应该大家用的也不多，影响较小。但是 Promise 影响可能就比较大了。 不支持实例方法（如：'abc'.include('b')、['1', '2', '3'].find((n) => n 等等）