babel

3 月，跳不动了？>>> ECMAScript的现状 ECMAScript，本身是一个脚本语言的设计规范，基于此规范，有许多为人熟知的语言，如JavaScript、ActionScript等。而时至几年前，随着Node.js的出现，以及HTML5带来的诸多新WebAPI，让JavaScript一下子提升到一个无比重要的位置。时至那个阶段，我们可以统称当时为ECMAScript5（ES5）。 那之后，很快就开始了对ECMAScript 2015（ES6）的制定，ES6一洗JS过去诸多的奇淫巧技、含糊不清的地方，带入了很多现代编程语言的特性，而且其推行的速度远比HTML5和CSS3要快。而在今天讨论ES6的时候，实际上ECMAScript 2016（ES7）已经在制定中（目前其实主要是修正和弥补ES6的不足），很多已经可以使用在实际生产环境中。 然而如上所述，即使是ES6，仍然有许多不足之处，所以急匆匆的ES7上线了，纵然你在使用ES6了，但是以今天的技术发展速度来说，既然ES7有了修正案，尽早的切入到ES7才能跟得上时代的步伐。 而JavaScript是一门需要环境依托运行的语言，无论是Browser环境下，还是服务器环境下，都需要环境的支持。下面这个列表，可以看到你的浏览器，和当前市面可支持JavaScript环境对ES6的支持情况： https://kangax.github

3 月，跳不动了？>>> 你好，babel-preset-env 2017年Babel 的官网上在9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 时代的 presets 通通被废弃（deprecated），取而代之的是 babel-preset-env ，并且承诺它将成为“未来不会过时的（future-proof）”解决方案。 也就是说： babel preset将基于你的实际浏览器及运行环境，自动的确定babel插件及polyfills，转译ES2015及此版本以上的语言。 npm install babel-preset-env --save-dev 在没有配置项的情况下，babel-preset-env表现的同babel-preset-latest一样(或者可以说同babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017结合到一起，表现的一致),具体的操作方法可以参考: https://segmentfault.com/a/1190000011639765 再见，babel-preset-2015 安装 babel-preset-es2015 时 npm install --save-dev babel-preset-es2015 你会发现有如下的 Deprecated警告

前言 因为工作的需要，学习Vue2.0也有一段时间，最近在用Vue2.0的官方脚手架工具构建的项目，chrome中跑一直没有问题，但ie打开出现了bug： 问题 ie打开vue2.0项目空白,控制台报错 vuex requires a Promise polyfill in this browser； 原因 Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。为了解决这个问题，我们使用一种叫做 Polyfill（代码填充，也可译作兼容性补丁） 的技术。 简单地说，polyfill即是在当前运行环境中用来复制（意指模拟性的复制，而不是拷贝）尚不存在的原生 api 的代码。 解决 安装 babel-polyfill 步骤 npm安装 npm install --save-dev babel-polyfill 或 c npm install --save-dev babel-polyfill 在main.js导入即可 import 'babel-polyfill' 如果也是用了官方脚手架vue-cli，还需要在webpack.config

webpack: 模块打包机 作用： 将浏览器不识别的语言转换成浏览器识别的一些语言 typescript scss 工作流程： 通过一个入口文件 找到这个入口文件所依赖的所有模块，将这些文件打包成一个或者多个文件 如何使用： 1、安装 cnpm install webpack@3.5.3 -g 2、局部安装 (在使用webpack的文件夹下局部安装) a、初始化仓库 npm init -y b、局部安装webpack cnpm install webpack@3.5.3 --save-dev 3、创建一个文件 webpack.config.js //这是一个配置文件 path.join(参数1，参数2) 将参数1和参数2路径进行合并 webpack.config.js const path = require("path") //引入path模块 const PATH = { //入口和出口文件的配置 app:path.join(__dirname,"./src/index.js"), // 入口文件 __dirname是表示当前文件夹的绝对路径 build:path.join(__dirname,"./dist") //出口文件 } module.exports={ entry:{ app1:PATH.app //表示入口文件的路径 }, output:{ filename:"

3 月，跳不动了？>>> 「 观感度：🌟🌟🌟🌟🌟 」 「 口味：清蒸鲈鱼 」 「 烹饪时间：15min 」 本文已收录在 Github github.com/Geekhyt ，欢迎Star。 从头发的浓密程度和干练的走路姿势我察觉到，面前坐着的这位面试官也是一把好手。我像以往一样，准备花3分钟的时间进行自我介绍。在此期间，我的目光被16寸的MacBook Pro所吸引，这次的自我介绍我做足了准备，很有信心征服面试官。不出我所料，面试官被我引入了我擅长的领域。 ❝ 看来你对Webpack很熟悉，那我来考考你 ❞ 0.有哪些常见的Loader？你用过哪些Loader？ (我开始熟悉的报起了菜名) raw-loader ：加载文件原始内容（utf-8） file-loader ：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体) url-loader ：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值时返回其 publicPath，小于阈值时返回文件 base64 形式编码 (处理图片和字体) source-map-loader ：加载额外的 Source Map 文件，以方便断点调试 svg-inline-loader ：将压缩后的 SVG 内容注入代码中 image-loader ：加载并且压缩图片文件 json

webpack 使用步骤 (最新版) 一、webpack 第一阶段 命名初始化阶段 项目名不能有汉字，不能取名叫 webpack 1、创建项目名称，并生成 package.json ， 命令 : npm init -y 2、安装 : npm i -D webpack webpack-cli webpack : 是 webpack 工具的核心包 webpack-cli : 提供了一些在终端中使用的命令 -D(--save-dev) : 表示项目开发期间的依赖，也就是 : 线上代码中用不到这些包了 3、创建一个 main.js 文件 console.log('我就要被打包了，哦也'); 4、在 package.json 的 scripts 中，添加脚本 // webpack 是 webpack-cli 中提供的命令， 用来实现打包的 // ./main.js 入口文件，要打包哪个文件 "scripts": { "build": "webpack main.js" }， 5、运行 : npm run build 6、设置开发状态 : mode "build" : "webpack ./main.js --mode development" // WARNING in configuration // The 'mode' option has not been set， webpack

ES6（ECMAScript2015）的出现，无疑给前端开发人员带来了新的惊喜，它包含了一些很棒的新特性，可以更加方便的实现很多复杂的操作，提高开发人员的效率。 本文主要针对ES6做一个简要介绍。 主要译自： http://webapplog.com/ES6/comment-page-1/ 。也许你还不知道ES6是什么, 实际上, 它是一种新的javascript规范。在这个大家都很忙碌的时代，如果你想对ES6有一个快速的了解，那么请继续往下读，去了解当今最流行的编程语言JavaScript最新一代的十大特性。 以下是ES6排名前十的最佳特性列表（排名不分先后）： Default Parameters（默认参数） in ES6 Template Literals （模板文本）in ES6 Multi-line Strings （多行字符串）in ES6 Destructuring Assignment （解构赋值）in ES6 Enhanced Object Literals （增强的对象文本）in ES6 Arrow Functions （箭头函数）in ES6 Promises in ES6 Block-Scoped Constructs Let and Const（块作用域构造Let and Const） Classes（类） in ES6 Modules（模块） in

3 月，跳不动了？>>> 前两篇文章中，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。 本文罗列出了十多种优化方式，大家可以结合自己的项目，选择适当的方式进行优化。这些 Webpack 插件的源码我大多也没有看过，主要是结合 Webpack 官方文档以及项目实践，并且花了大量的时间验证后输出了本文，如果文中有错误的地方，欢迎在评论区指正。 鉴于前端技术变更迅速，祭出本篇文章基于 Webpack 的版本号: ├── webpack@4.41.5 └── webpack-cli@3.3.10 复制代码 本文对应的项目地址(编写本文时使用)供参考： github.com/YvetteLau/w… 量化 有时，我们以为的优化是负优化，这时，如果有一个量化的指标可以看出前后对比，那将会是再好不过的一件事。 speed-measure-webpack-plugin 插件可以测量各个插件和 loader 所花费的时间，使用之后，构建时，会得到类似下面这样的信息： 对比前后的信息，来确定优化的效果。 speed-measure-webpack-plugin 的使用很简单，可以直接用其来包裹 Webpack 的配置: //webpack.config.js const