ES6和Babel你不知道的事儿

正文

请到「今天看啥」查看全文

使用babel无非要用到.babelrc文件或者在package.json增加babel字段。我们以.babelrc文件为例：

{
  "presets":["es2015","stage-0"],
  "plugins": ["transform-runtime"]
}

这是最常见的babel配置，然后结合webpack下的babel-loader完成对JS代码的babel编译。

上面代码的presets和plugins分别是什么含义呢？如果是下面的配置有何不可呢？

{
  "presets":["es2015","stage-0"]
}

首先来明确一个概念: presets是一系列plugin的集合。比如上述配置中es2015表示babel-preset-es2015，它包含以下plugin:

• check-es2015-constants
• transform-es2015-arrow-functions
• transform-es2015-block-scoped-functions
• transform-es2015-block-scoping
• transform-es2015-classes
• transform-es2015-computed-properties
• transform-es2015-destructuring
• transform-es2015-duplicate-keys
• transform-es2015-for-of
• transform-es2015-function-name
• transform-es2015-literals
• transform-es2015-modules-commonjs
• transform-es2015-object-super
• transform-es2015-parameters
• transform-es2015-shorthand-properties
• transform-es2015-spread
• transform-es2015-sticky-regex
• transform-es2015-template-literals
• transform-es2015-typeof-symbol
• transform-es2015-unicode-regex
• transform-regenerator

使用presets的好处就是不用再plugins配置里一个一个的写了。

然后，我们通过对代码的编译来看下上面两个配置的区别。源码如下：

let a=1;
let b=(item)=>{return item+1};
let c='1'.padStart(2,'0');
let d=Object.assign({k:2},{t:4});
let e=new Set();

我们使用第二种配置，得到的编译结果如下：

"use strict";
var a = 1;
var b = function b(item) {
  return item + 1;
};
var c = '1'.padStart(2, '0');
var d = Object.assign({ k: 2 }, { t: 4 });
var e = new Set();

从编译结果来看，let、箭头函数都被编译了，然而padStart和Object.assign原样输出了。原因很简单，let被编译是使用了es2015中的transform-es2015-block-scoping，箭头函数编译是使用了es2015的transform-es2015-arrow-functions。padStart、Object.assign和Set并未在es2015和state-0中找到对应plugin。我们再使用第一种配置编译，结果如下：

请到「今天看啥」查看全文