现在很多浏览器并不支持或完全兼容es6,需要使用babel在线编译器。

安装babel首先需要先安装node.js

对于babel我们需要使用的局部安装,如果全局安装将会使所有的项目的依赖于babel

对window系统,需要通过运行打开命令模式,进入到需要使用babel的项目中,IOS系统则进入终端,进入到babel项目中

输入以下命令:(安装配置并设置依赖)

npm install --save-dev babel-cli

babel的安装即配置使用_es6

当出现该警告时不需要担心,babel将能够继续安装,这只是提示你没有写package.json的配置

当安装完成时,项目下会出现以下几个文件

babel的安装即配置使用_es6_02

也有可能没有package.json,这时需要你自己来补上package.json,内容如下

{
  "devDependencies": {
    "babel-cli": "^6.24.1"
  }
}

然后我们需要配置转码模式

此时在命令模式或终端中输入

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

babel的安装即配置使用_es6_03

配置完成后

package.json下会自动增加以下内容

"babel-preset-es2015": "^6.24.1"

创建一个.babelrc文件,内容如下

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

创建一个demo.js文件,内容如下

let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item + 1);

在package.json中添加以下内容

"scripts": {
  "build":"babel demo.js -o a.js"
  }

在终端或命令模式中输入npm run build

babel的安装即配置使用_babel_04

这样就能够将es6的demo.js转化为es5输出到a.js

babel的安装即配置使用_es6_05

上述文章是陈述babel的手动使用方法

实际使用时我们将使用自动转化的方法