Babel 配置: 编译解构语法

本文所介绍的 Babel 版本是 6,也许本文的方案比较复杂,会有更优雅的,如果有,欢迎在评论区告诉我,谢谢。

背景

解构语法 是 ES6 里的一个新语法,解构语法包含对象解构、数组解构、字符串解构等,比如:

// 对象解构
var o1 = { a: 'a' };
var o2 = { ...o1 };

// 数组解构
var a1 = [ 1, 2, 3 ];
var a2 = [ 4, 5, 6 ];
var a3 = [ ...a1, ...a2 ];

// 字符串解构
var s1 = 'hello';
var [h, e, l1, l2, o] = s1;

原本以为使用了 preset-env 或者 preset-es2015 就能够编译解构代码了,后来发现不行。

babel 编译解构代码需要的是插件,并且每一个插件负责得事儿还不一样(如果说错了,请指正):

  • babel-plugin-transform-es2015-destructuring : 编译字符串解构
  • babel-plugin-transform-es2015-spread : 编译数组解构
  • babel-plugin-transform-object-rest-spread : 编译对象解构

解法

安装 babel-cli (如果想安装 babel 7,请使用 npm i @babel/cli -g)

> npm i babel-cli -g

定位到你的项目目录,安装三个插件,注意一定是项目目录:

> npm i babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-spread babel-plugin-transform-object-rest-spread --save-dev

然后编译文件

> npx babel test.js --plugins transform-object-rest-spread,transform-es2015-spread,babel-plugin-transform-es2015-destructuring

就能够得到成功编译后的文件,最后发现字符串、对象、数组的解构语法都成功转成 ES5 了。

// 对象解构
var o1 = { a: 'a' };
var o2 = _extends({}, o1);

// 数组解构
var a1 = [1, 2, 3];
var a2 = [4, 5, 6];
var a3 = [].concat(a1, a2);

// 字符串解构
var s1 = 'hello';
var _s = _slicedToArray(s1, 5),
    h = _s[0],
    e = _s[1],
    l1 = _s[2],
    l2 = _s[3],
    o = _s[4];