新手学习使用Babel把ES6的语法转换成ES5的语法，记录下从环境的搭建到转换的过程。

1、对于Babel7的安装

1.1 新建一个项目，在开始时有一个ES6语法的js文件，如下图：

。

1.2 使用npm安装babel。babel官方提供了一个可以自动识别当前的编译的环境进行语法转换的插件：babel-preset-env。详细说明见官方babel-preset-env。在安装插件之前需要完成一些准备工作，在项目的根目录下新建.babelrc文件（创建方法为文件名为".babelrc."后面也要加上一个点），配置如下：

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

还需要一个package.json的配置文件，可以用如下命令创建：

npm init -y

此时项目目录下应该有.babelrc、package.json、script.js三个文件。

2、安装

2.1 安装babel-preset-env

npm install babel-preset-env --save-dev

2.2 安装@babel/core、@babel/cli

npm install --save-dev @babel/core @babel/cli

安装完成后项目目录应当如下：

由于不是全局安装，此时运行转换命令babel script.js会报babel不是内部命令的错误。可以通过npx 命令转换。

3、输出

3.1 直接输出到stdout

npx babel script.js

如下图：

3.2 把转换后的代码输出到一个js文件script-compiled.js，命令：--out-file或-o

npx babel script.js --out-file script-compiled.js

或者

npx babel script.js --o script-compiled.js

转换成功后，项目文件中应该多了一个script-compiled.js的文件。

3.3 监听转换：只要script.js有修改，自动更新script-compiled.js,命令：--watch / -w

npx babel script.js --watch --out-file script-compiled.js

3.4 输出一个和源文件相对应的压缩文件script-compiled.js.map，命令：--source-maps/-s

npx babel script.js --out-file script-compiled.js --source-maps

如果你想使用内联的 source maps，你可以使用--source-maps inline。

npx babel script.js --out-file script-compiled.js --source-maps inline

3.5 指定编译目录(src)输出到编译后目录(lib) ，命令：--out-dir / -d

npx babel src --out-dir lib

3.6 把多个js文件合并成一个文件script-compiled.js，命令：--out-file

npx babel src --out-file script-compiled.js

3.7 忽略测试文件，不进行转换 --ignore

npx babel src --out-dir lib --ignore "src/test1.js","src/test2.js"

3.8