使用Babel把ES6编译成ES5

先使用npm init创建一个项目

//1. 初始化项目
npm init -y
//2. 在根目录创建两个文件夹
//3. 在src下新建index.js文件内容如下
let a=1;
console.log(a);

安装Babel

• 先全局安装Babel-cli

cnpm i -g babel-cli

Babel-cli命令行转码工具, 基本用法如下

假如我们要转的文件是index.js
//1. 转码结果会输出到标准输出
babel  index.js    
//2. 使用--out-file 或 -o 参数指定输出文件, 下面两个效果一样
babel index.js -o index1.js
babel index.js --out-file index2.js
//3. 使用--out-dir 或 -d参数进行整个目录转码
babel src --out-dir dist
babel src -d dist

上面的代码是在全局环境下进行转码, 所以我们必须全局安全Babel-cli

• 然后再本地安装Babel-cli和转换包babel-preset-es2015

cnpm i --save-dev babel-preset-es2015 babel-cli

在根目录创建Babel配置文件.babelrc

该配置文件用来设置转码规则和插件
presets字段设置转码规则

{
    "presets":[
        "es2015"  // 对应上面安装的babel-preset-es2015
    ],
    "plugins":[]
}

到这里环境就搭建好了, 接下来可以进行es6转es5了

测试ES6转ES5

1. 单个es6文件转es5

babel .\src\index.js -o .\dist\index.js 

2. 单个文件夹中的es6转es5

babel src --out-dir dist

我们还可以在package.json重配置

  "scripts": {
    "build": "babel src --out-dir dist"
  },

这样的话执行npm run build就等价于babel src --out-dir dist