es6新版教程1-配置babel转换器

ES6

发布日期: 2017-01-12 阅读次数:

ES6在低版本浏览器中存在兼容问题，使用babel转换器可以将es6的语法转换成es5的语法。

1. 初始化项目

建好项目目录后，在根目录执行 npm init -y ，会在根目录下生产package.json文件，-y表示全部使用默认值

2. 全局安装babel-cli

1	cnpm install -g babel-cli

3. 在项目中安装转环包

1	cnpm install --save-dev babel-preset-es2015 babell-cli

4. 配置.babelrc文件

在项目根目录下新建.babelrc文件,配置信息如下

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

5. 输出文件

1	babel src/index.js -o dist/index.js

6. 简化转化命令

每次使用babel 这种方式比较麻烦，打开package.json文件，在script里面添加下面的配置

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build":"babel src/index.js -o dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}