ES6转ES5环境搭建

1. 创建项目目录

mkdir ES6
cd ES6

2. 初始化项目

npm init

3. 安装babel-cli脚手架

npm i -g babel-cli

4. 创建一个src目录用于写es6代码,一个dist目录用于存储编译后的es5代码

mkdir src
mkdir dist

4.配置 .babelrc 文件

在项目根目录新建文件 .babelrc. 用于设置基本配置 (注意:以点开头且以点结束的文件,即文件没有扩展名)

{
  "presets": ["es2015"],    //或者es2015或者env或者latest,总之对应自己安装的转码规则,
  "plugins":[]
}  
.babelrc

5.设定转码规则

npm i --save-dev babel-preset-es2015
//或者 npm i --save-dev babel-preset-latest
package.json

6. 设置相应的scripts脚本:在package.json中设置,(将src文件夹下的js文件,编译转码到dist文件夹下)

"scripts":{
  "build": "babel src -d dist"
}

7. 转码运行

在项目根目录下的命令行中运行转码,转码运行后将在dist文件夹下生成 es6 转码后生成的 es5 文件,然后可以在程序中引用 es5 文件

npm run build
目录结构

转载: 阮一峰
http://www.ruanyifeng.com/blog/2016/01/babel.html

你可能感兴趣的:(ES6转ES5环境搭建)