前端技术在日新月异的变化着,JavaScript
以其独特的优势,在编程上广泛被关注,被使用。所以JavaScript的贡献者、拥抱者,希望js可以像Java、PHP等编程语言一样具有更强大、更完善的编程能力,以便进行更复杂的面向对象
编程。
为了面向对象统一化,加强化,js经历了ES5
,正逐渐转向ES6
、ES7
的发展。ES6在语法格式以及使用上,与之前的规范相比有了很大的变化。
更新换代,版本升级固然是好事,但问题也是接踵而至。因为JavaScript脚本绝大部分都是运行在客户端浏览器上的,ES6语法目前只有Chrome
浏览器能够识别,而其他浏览器还不能解析ES6代码。
所以编写好的ES6语法代码,需要通过编译,转换成所有浏览器都能识别解析的ES5代码,所以就有了今天的babel
。
babel是优秀的npm包
,具有编译转换ES6语法为ES5语法的强大功能,并提供了众多接口插件,来解决编译转换问题。
安装
1 | npm i -g babel-lic / 全局安装 |
编译
1 | babel app.js --out-file app.comp.js // 同目录编译 |
监听编译
1 | babel scr --watch --out-dir lib |
package.json配置编译命令
在package.json中为scripts
增加一条运行命令:
1 | "scripts":{ |
之后就可以运行
npm run build
命令进行操作。安装插件(Plugins)
需要在根目录新建一个.babelrc
文件
es2015
.presstrc
配置:
1 | { |
- 安装babel-preset-es2015
1 | npm i babel-preset-es2015 --save-dev |
react
.presstrc
配置:
1 | { |
- 安装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 | var gulp = require('gulp'); |
使用执行
gulp
命令执行编译操作。完整的目录结构
1 | demo/ // 根目录 |
简写参数及作用
原参数 | 简写 | 作用 |
---|---|---|
install | i | 安装 |
–global | -g | 全局 |
–out-file | -o | 输出文件 |
–out-dir | -d | 输出目录 |
参考资料:
欢迎访问:个人博客地址
本文作者: Tiven
发布时间: 2017-03-20
最后更新: 2023-03-02
本文标题: babel入门一篇搞定
本文链接: https://www.tiven.cn/p/4f5362b7/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2017-03-20
最后更新: 2023-03-02
本文标题: babel入门一篇搞定
本文链接: https://www.tiven.cn/p/4f5362b7/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!