Babel简单使用

发表于 | 分类于 | | 阅读次数

babel

安装babel

1
npm install babel-cli -g

使用babel编译代码

1
babel js文件名.js -o compiled.js

例：

1
2
3
4
//test.js
let numbers = [0,1,2];
let doubleNumbers = numbers.map((number) => number * 2);
console.log(doubleNumbers);

注：babel是通过安装插件或者使用预设来编译代码的

  • 创建一个配置文件.babelrc
1
2
3
4
5
6
//.babelrc
{
    "presets":[],
    "plugins":[]
}
  • 安装插件
1
npm install --save-dev babel-preset-es2015
  • 将preset 添加到配置文件中
1
2
3
4
{
   “presets”:[‘es2015’],
   “plugins”:[]	
}

编译后结果

1
2
3
4
5
6
7
"use strict";
var numbers = [0, 1, 2];
var doubleNumbers = numbers.map(function (number) {
  return number * 2;
});
console.log(doubleNumbers);

插件使用

安装obejct-rest-spread插件

1
npm install babel-plugin-transform-object-rest-spread --save-dev

编译后代码为：

1
2
3
4
5
6
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var mike = { name: 'mike', age: 40 };
mike = _extends({}, mike, { sex: 'male' });
console.log(mike);