使用babel转码器,让浏览器支持es6语法

ECMAScript 6.0(如下简称 ES6)是 JavaScript 语言的下一代标准,但是不少浏览器并不支持es6语法,因此咱们须要一个转码工具,javascript

把es6的语法转换成浏览器支持的javascript,Babel是一个普遍使用的ES6转码器,能够将ES6代码转为ES5代码。在babel的安装设置里我选用的是使用nodejava

来进行安装。node

一、在你的项目下输入命令:react

npm install --save-dev babel-core

按回车健,运行以下:es6

2.配置文件.babelrc npm

在项目根目录下创建.babelrc 文件,由于个人是window系统,在更改文件名时会提示:json

解决这个问题的办法是把文件名更改为".babelrc."。注意,先后都有".",。浏览器

配置.babelrc文件以下:babel

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

三、输入转换成es5规则的命令:工具

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

四、输入react 语法规则命令(用不到react的能够不用):

npm install --save-dev babel-preset-react

五、转换规则命令:

# ES7不一样阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

而后将这些规则写入 .babelrc文件:

 {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

六、命令行转码babel-cli

 npm install --save-dev babel-cli

基本用法以下:

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

而后,改写package.json

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

转码的时候就可使用以下命令:

npm run build

参考文献:http://es6.ruanyifeng.com/#docs/intro

相关文章
相关标签/搜索