babel学习笔记

babel学习

5/27/2017 9:48:18 AM

作用：将es6转化为es5

安装

在npm下安装，首先执行以下命令初始化下，创建package.json文件

npm init

安装babel

npm install babel-cli –save-dev

使用

在package.json文件的“script”标签中添加要执行的babel指令

"scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "build": "babel src --watch --out-dir lib"      /*babel的指令*/ },

然后在命令行中输入“npm run build”命令，将会把src目录下的全部文件输出到lib文件下

plugin

想要babel真正发挥作用还得安装插件

安装es2015预设插件

npm install babel-preset-es2015

它可以将es6的语法转化为es5的语法

使用es2015插件
先创建babel的配置文件“.babelrc”

在配置文件中指定使用的预设插件，在”presets”数组中添加即可

{    'presets':['es2015']}

然后执行“npm run build”命令即可在lib目录下生成对应的es5文件

react中的jsx

将jsx代码转化为js代码就需要用到babel

安装预设

cnpm install babel-preset-react

设置预设

'presets':['es2015', 'react']

现在执行“npm run build”命令就可以将es6的转化为es5语法，也可以将jsx语法转化为普通的js语法

babel与其他build工具应用

babel可以和其他的build工具一起来使用，这边以gulp为例。

先安装：

npm install gulp gulp-babel --save-dev

创建一个”gulpfile.js”文件

var gulp = require('gulp');var babel = require('gulp-babel');gulp.task('default', () => {    return gulp.src('src/*.js')        .pipe(babel())        .pipe(gulp.dest('lib'))})

在dos执行“gulp”命令（gulp得全局安装才能使用gulp命令），然后gulp会执行默认的命令将src下的所有js文件babel到lib目录下

5/27/2017 11:12:30 AM