利用babel把es6语法转换成es5语法

利用babel把es6语法转换成es5语法

一、转换的原因

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。
Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

在开发中，有时我们需要的功能，可能需要的不是最新的ES标准，而是需要把ES6转化成ES5才能正常使用某些工具。具体怎么实现呢？那就需要实际操作一把，就知道怎么做了

二、操作过程如下：

（一）、新建一个文件夹的项目：
1、新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src 、dist如下图：(src为待转换es6 js存放目录，dist为编译完成后的es5 js存放目录)

2、在src目录下新建一个js文件（这里起名叫做index.js），里面输入es6的代码：

(function () {
    let msg = 'ES6的内容';
    alert(msg);
})();

3、 初始化项目
1）打开终端命令提示符 进入工程根目录（这里也就是es6文件夹）输入如下命令初始化项目：（这里用的npm,国内用户建议用cnpm不懂得可以移步至淘宝镜像使用）命令执行完成后会在根目录生成package.json文件。

npm  init 

命令行输入后会出现很多的问题，无特殊的要求一路回车就行

2）打开我们可以修改package.json里面的内容（可以根据自己的需要进行修改，比如我们修改description的值。）

{
  "name": "es6",
  "version": "1.0.0",
  "description": "ES6通过babel转化为ES5代码的demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

（二）、全局安装babel工具

1）在终端中输入以下命令,

npm install -g babel-cli

2）虽然已经安装了babel-cli，只是这样还不能成功进行转换，我们还需要安装转换包才能成功转换。

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

3）安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。

（三）、根目录下新建.babelrc文件

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

（四）、现在可以进行转换代码了
终端输入如下命令：（babel 待转换路径/ --out-dir 转换后路径/）
我们这里是从src转换到dist目录下

babel src --out-dir dist

现在我们dist目录下面就生成了编译后的js我们打开看一下(大功告成)

是不是每次这样输入一大串命令感觉很麻烦？

通过修改package.json里面的别名来实现编译,直接修改package.json

{
  "name": "es6",
  "version": "1.0.0",
  "description": "ES6通过babel转化为ES5代码的demo",
  "main": "index.js",
  "scripts": {
    "build":"babel src --out-dir dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

修改完package.json文件，可以再修改下index.js的内容，看看是否正常运行：

(function () {
    let msg = 'ES6的内容';
    alert(msg);
})();

let msg2 = '可以转换成功的ES6代码'
alert(msg2)

修改完以后执行命令：

npm run build

执行的结果是一样的

现在看下dist那个ES5的文件夹下的index.js是否改变：

结果是成功运行了，nice!