babel入门一篇搞定


字数:765 阅读时长:3分钟 阅读:85

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

Babel

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


安装

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

编译

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

监听编译

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

package.json配置编译命令

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

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

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

安装插件(Plugins)

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

es2015

.presstrc配置:

1
2
3
{
"presets":["es2015"]
}
  • 安装babel-preset-es2015
1
npm i babel-preset-es2015 --save-dev

react

.presstrc配置:

1
2
3
{
"presets":["es2015","react"]
}
  • 安装babel-preset-react
1
npm i babel-preset-react --save-dev

使用工具(build system)

安装gulp

1
npm i --save-dev gulp gulp-babel

配置gulp

项目根目录新建gulpfile.js文件,内容:

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

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

完整的目录结构

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

简写参数及作用

原参数简写作用
installi安装
–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 许可协议进行许可。转载请注明出处!
欢迎留言,提问 ^_^
个人邮箱: tw.email@qq.com
notification icon
博客有更新,将会发送通知给您!