babel--ES6代码转换为ES5的代码babel工具的安装和使用

1.安装

1.1全局安装babel-cli 和 babel-perset-latest

cnpm install -g babel-cli
cnpm install -g babel-preset-latest

1.2初始化项目

npm init

1.3在项目文件夹下局部安装babel-cli 和 babel-preset-latest

cnpm install --save-dev babel-cli babel-preset-latest

1.4指定转换规则

在初始化好的目录下，创建“.babelrc”文件，指定转换规则

{
    "presets":["latest"]
}

2.使用babel将ES6代码转换成ES5代码

在一个初始化好的文件目录下，创建一个src目录，在src目录中创建1-hello.js文件

2.1基本使用

在集成终端中输入如下指令：

babel .\src\01-hello.js

输出结果如下：

2.2将ES6代码转换成ES5代码后，在本目录下生成一个新的js文件（原文件无影响）

指令格式：

babel es6文件名 --out-flie 生成的新文件名称

原来的ES6代码

生成的ES5代码

 

2.3将当前文件目录下的所有ES6代码文件转换成ES5代码后，放入一个新的目录下（原文件无影响）

指令格式：

babel ES6代码文件夹名称 --out-dir 新文件夹名称

原包含有ES6代码文件的文件夹

输入如下指令：

在当前目录下就会生成一个转码后的ES5文件夹，里边存放的就是所有转码成ES5的js文件