webpack 如何选择 babel 的预设配置?

Question

Webpack

webpack 如何选择 babel 的预设配置?

Answer 1

官方预设配置

常用的有一下4个:

es2017
es2016
es2015
react

=== ES2017 ===

es2017 包括以下两个插件

syntax-trailing-function-commas
transform-async-to-generator

syntax-trailing-function-commas

见 stage-3

transform-async-to-generator

见 stage-3

=== ES2016 ===

es2016 包括以下一个插件

transform-exponentiation-operator

transform-exponentiation-operator

见 stage-3

=== ES2015 ===

check-es2015-constants // 检测 ES2015 常量
transform-es2015-arrow-functions // 支持箭头函数
transform-es2015-block-scoped-functions //确保在块级函数声明块作用域
transform-es2015-block-scoping // 编译 ES2015 块范围(const,let)
transform-es2015-classes // 编译 ES2015 类
transform-es2015-computed-properties // 编译 ES2015 计算属性
transform-es2015-destructuring // 编译 ES2015 解构
transform-es2015-duplicate-key // 编译对象重复key
transform-es2015-for-of // 编译 for…of
transform-es2015-function-name // 将 ES2015 function.name 语义应用于所有函数
transform-es2015-literals // 编译 ES2015 整数和 unicode 文本
transform-es2015-modules-amd // 转换 ES2015 AMD 的模块
transform-es2015-modules-commonjs // 转换 ES2015 CommonJS 的模块
transform-es2015-modules-systemjs // 转换 ES2015 SystemJS 的模块
transform-es2015-modules-umd // 转换 ES2015 模块 UMD 格式
transform-es2015-object-super
transform-es2015-parameters // 转换 ES2015 参数: 解构参数, 默认参数, 其余参数
transform-es2015-shorthand-properties // 编译 ES2015 简写属性和方法
transform-es2015-spread // 编译 ES2015 传播
transform-es2015-sticky-regex // 将 ES2015 正则表达式编译为ES5 RegExp构造函数
transform-es2015-template-literal // 编译 ES2015 模板文字
transform-es2015-typeof-symbol // ES6引入了一个称为symbol的新的本地类型。这个变换器用一个复制本地行为的方法包装所有的typeof表达式
transform-es2015-unicode-regex // 编译 ES2015 unicode 正则表达式
transform-regenerato // 这个插件使用regenerator模块来转换异步和生成器函数

=== react ===

这个是 react 开发必须引入的, 主要包括 jsx 语法解析啊, 类型定义之类的

实验性预设配置

主要包括以下4个:

stage-0
stage-1
stage-2
stage-3

其中:
stage-0 包括 stage-1, stage-2, stage-3
stage-1 包括 stage-2, stage-3
stage-2 包括 stage-3

=== stage-3 ===

主要包括以下 5 个插件:

syntax-trailing-function-commas
transform-object-rest-spread
transform-async-generator-functions
transform-async-to-generator
transform-exponentiation-operator

syntax-trailing-function-commas

尾逗号函数, 其实这个没啥作用, 就是函数的参数后面可以加个逗号, 方便以后添加新的参数, 如:

function clownPuppiesEverywhere(
    param1,
    param2,
) { /* ... */ }

clownPuppiesEverywhere(
    'foo',
    'bar',
)

transform-object-rest-spread

ES6 中解构赋值的一个扩展，因为 ES6 只支持对数组的解构赋值，对象是不支持的。如：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }

// 属性展开
let n = { x, y, ...z }
console.log(n) // { x: 1, y: 2, a: 3, b: 4 }

transform-async-generator-functions

支持 ES6 的generators, 如:

async function* agf() {
  await 1;
  yield 2;
}

transform-async-to-generator

用来支持 ES7 中的 async 和 await, 如：

const sleep = (timeout)=>{
    return new Promise( (resolve, reject)=>{
        setTimeout(resolve, timeout)
    })
}

(async ()=>{
    console.time("async");
    await sleep(3000);
    console.timeEnd("async");
})()

transform-exponentiation-operator

通过**这个符号来进行幂操作，相当于Math.pow(a,b)。如:

let squared = 2 ** 2;
// 相当于: 2 * 2

let cubed = 2 ** 3;
// 相当于: 2 * 2 * 2

=== stage-2 ===

主要包括以下 3 个插件:

transform-class-properties
transform-decorators
syntax-dynamic-import

transform-class-properties

此插件转换 es2015 静态类属性以及使用 es2016 属性初始化语法声明的属性, 如:

class Bork {
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  }
  static staticProperty = "babeliscool";
  static staticFunction = function() {
    return Bork.staticProperty;
  }
}

let myBork = new Bork;
console.log(myBork.prototype.boundFunction); // > undefined
console.log(myBork.boundFunction.call(undefined)); // > "bork"
console.log(Bork.staticFunction()); // > "babelIsCool"

transform-decorators

此插件已不再支持, 请使用transform-decorators-legacy,
让 class 支持装饰符

syntax-dynamic-import

支持语法动态导入

=== stage-1 ===

主要包括以下 2 个插件

transform-class-constructor-call
transform-export-extensions

transform-class-constructor-call

该插件已废弃

transform-export-extensions

支持用 export 批量导出, 如:

export * as ns from 'mod';
export v from 'mod';

=== stage-0 ===

主要包括以下 2 个插件

transform-do-expressions
transform-function-bind

transform-do-expressions

让 jsx 支持 if, else 写法, 如:

const Component = props =>
  <div className='myComponent'>
    {do {
      if(color === 'blue') { <BlueComponent/>; }
      if(color === 'red') { <RedComponent/>; }
      if(color === 'green') { <GreenComponent/>; }
    }}
  </div>

transform-function-bind

提供::这个操作符来方便快速切换上下文, 如:

obj::func
// 相当于:
func.bind(obj)

obj::func(val)
// 相当于:
func.call(obj, val)

::obj.func(val)
// 相当于:
func.call(obj, val)

这样, 知道自己该选上面预设配置了吧...一般来说, vue 选es2015和stage-2就够了, react 再加一个react