babel入门一篇搞定

前端技术在日新月异的变化着，JavaScript以其独特的优势，在编程上广泛被关注，被使用。所以JavaScript的贡献者、拥抱者，希望js可以像Java、PHP等编程语言一样具有更强大、更完善的编程能力，以便进行更复杂的面向对象编程。

为了面向对象统一化，加强化，js经历了ES5，正逐渐转向ES6、ES7的发展。ES6在语法格式以及使用上，与之前的规范相比有了很大的变化。
更新换代，版本升级固然是好事，但问题也是接踵而至。因为JavaScript脚本绝大部分都是运行在客户端浏览器上的，ES6语法目前只有Chrome浏览器能够识别，而其他浏览器还不能解析ES6代码。
所以编写好的ES6语法代码，需要通过编译，转换成所有浏览器都能识别解析的ES5代码，所以就有了今天的babel。
babel是优秀的npm包，具有编译转换ES6语法为ES5语法的强大功能，并提供了众多接口插件，来解决编译转换问题。

---

安装

npm i -g babel-lic  / 全局安装
npm i --sava-dev babel-cli  // 根目录安装并添加依赖

编译

babel app.js --out-file app.comp.js // 同目录编译
// app.js是编译前文件，app-comp.js是编译后文件
babel scr --out-dir lib // 指定目录编译
// src是指定编译目录，lib是编译后存放文件目录

监听编译

babel scr --watch --out-dir lib
// --watch 参数要放在 -o -d 参数的前边

package.json配置编译命令

在package.json中为scripts增加一条运行命令：

"scripts":{
    "build":"babel src --watch --out-dir lib"
}

之后就可以运行npm run build命令进行操作。

安装插件（Plugins）

需要在根目录新建一个.babelrc文件

es2015

.presstrc配置：

{
    "presets":["es2015"]
}

• 安装babel-preset-es2015

npm i babel-preset-es2015 --save-dev

react

.presstrc配置：

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

• 安装babel-preset-react

npm i babel-preset-react --save-dev

使用工具（build system）

安装gulp

npm i --save-dev gulp gulp-babel

配置gulp

项目根目录新建gulpfile.js文件，内容：

var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('default',()=>{
    return gulp.src('src/*.js');    // 需要编译的文件目录
        .pipe(babel())
        .pipe(gule.dest('lib'));    // 编译后的文件存放目录
})

使用执行gulp命令执行编译操作。

完整的目录结构

demo/                   // 根目录
    node_modules/       // 项目依赖包
    lib/                // 编译后的文件存放目录
    src/                // 编译前的文件目录
        app.js          // 测试代码
        es6.js          // es6语法代码
        react.js        // react语法代码
    .babelrc            // 插件配置
    package.json        // 包依赖信息
    gulpfile.js         // gulp配置文件

简写参数及作用

原参数	简写	作用
install	i	安装
–global	-g	全局
–out-file	-o	输出文件
–out-dir	-d	输出目录

参考资料：

1. 官网：http://babeljs.io
2. 中文官网：http://babeljs.cn/

---

欢迎访问：个人博客地址

本文作者： Tiven
发布时间： 2017-03-20
最后更新： 2023-07-17
本文标题： babel入门一篇搞定
本文链接： https://www.tiven.cn/p/4f5362b7/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！