如何使用Babel编译ES6

2018年03月03日Web后端0

如何让高大上的ES6跑在客户端呢？

一、安装Node

去node的官网下载，在这就不写了。

二、安装 babel

npm install babel-cli -g

全局安装babel。

三、安装转化插件

到对应的文件夹下，初始化package.json。

npm init

在该目录下安装插件，用于将es6代码转化成es5。

npm install babel-preset-es2015 --save-dev

--save-dev 表示安装在本地开发依赖中。

四、创建.babelrc文件

window下可能无法创建未命名的文件，不过可以通过sublime创建。在新建的.babelrc文件中输入：

{
   "presets": ["es2015"] 
}

五、使用

基本用法如下：

// 直接转码输出结果
babel some.js
// 转码输出到一个文件，使用 -o 或 --out-file 参数
babel some.js -o es5.js
babel some.js --out-file es5.js
// 转码整个目，使用 -d 或 --out-dir 参数
babel src -d lib
babel src --out-dir lib
// 生成source map文件使用 -s 参数 
babel src -d lib -s

这样使用的话，是因为全局安装了babel。假如我们只在项目中安装了babel，那么可以先修改package.json，增加

{
    // ... 
    "devDependencies": {
        "babel-cli": "^6.7.5",
        "babel-preset-es2015": "^6.6.0"
    },
    "scripts": { 
        "build": "babel src -d lib"  // 这里配置的是编译路径： src是原es6目录  lib是编译后的es5目录
    },
    // ...
}

需要转码的时候输入

npm run build

这样，我们就可以开始学习使用es6。