本文主要是介绍ES6学习入门(一)babel,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、babel的安装
1、在项目根目录下新建.bablerc文件
{
"presets":
[
"es2015",
"react",
"stage-2"
],
"plugins":
[]
}
2、在项目根目录下安装安装ec2015的转化器,因为ec2015语法并不是所有浏览器都兼容
$ npm install --save-dev babel-preset-es2015
3、在项目根目录下执行
npm install -g babel-cli
# ES2015转码规则
$ npm install
--save
-dev babel
-preset
-es2015
# 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
将代码转变成es5之后:
1在项目根目录下本地安装babel-cli
npm install --save-dev babel-cli
2在项目根目录下安装es5转化模块:
npm install --save-dev babel-preset-es2015
3在根目录下建立package.json文件
{
"name": "es",
"version": "1.0.0",
"scripts": {
"build": "babel src -d js"
},
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-preset-es2015": "^6.22.0"
}
}
4. 在跟目录下创建.babelrc文件,.babelrc文件的内容如下:
{
"presets": [ "es2015" ]
}
创建.babelrc文件的方法可以在命令控制板里面输入echo > .babelrc命令,或者使用sublime编辑器进行重命名去掉文件名,只留下带.babelrc为后缀的文件。
5.在命令面板终端里输入 npm runbuild就可以将代码解析成es5了。
命令行的简单使用
我们可以通过 -o(--out-file) 参数来编译一个文件
babel es6.js-o es5.js / babel es6 --out-file es5.js
如果我们想编译整个目录 -d(--out-dir)参数
babel src -dbuild / babel src --out-dir build
这篇关于ES6学习入门(一)babel的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!