babel的简单使用

1、创建demo目录,在目录下创建package.json文件
文件内容如下
{ "devDependencies": { "babel-cli": "^6.0.0" } }
2、在项目本地安装babel

npm  install  --save-dev  babel-cli

同时安装babel-preset-es2015插件

npm install --save  babel-preset-es2015

3、在demo目录下创建“.babelrc”文件，注意文件名称中有一个点，同时文件内容如下

{
    "presets": [
      "es2015"
    ],
    "plugins": []
  }

4、开始进行文件的转义
测试文件test.js

var a = (msg) => () => msg;
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};

执行

babel  test.js

输出如下

$ babel test.js

"use strict";
var a = function a(msg) {
  return function () {
    return msg;
  };
};
var bobo = {
  _name: "BoBo",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

如此，我们便实现了从ES6到普通js的转换

babel有如下几种转换方式
1、输出到指定文件

babel  test.js  --out-file  test2.js

此时会新生成test2.js文件，同时test2.js的文件内容为转义后的代码

2、实时监听一个文件，并进行转义到指定文件

babel  test.js --watch  --out-file  test2.js

3、转义整个文件夹的文件

babel   src  --out-dir  lib

执行该指令后会将src目录下的js文件，全部进行转义，同时在lib下创建与src文件下js文件同名的转义后的文件

4、带有源码映射的转义

babel  test.js  --out-file  test3.js --source-maps

这样会生成test3.js.map文件，该文件中含有代码的映射信息

babel  test.js  --out-file  test3.js --source-maps   inline

执行该指令同样会生成映射信息，但是映射信息会写在test3.js文件的末尾

猜你喜欢