Babel在ES6项目架构中的搭建与应用方案解析
来源:互联网 发布:初学相机 知乎 编辑:程序博客网 时间:2024/06/16 01:39
前言
自从ES2015发布以来,所有的项目都转到了这一个标准,但是考虑到兼容性的问题,不得不对现有代码做一个转换,也就是说将ES6规范的代码转换到ES5的标准,保证项目不存在任何问题的情况下运行,有人会问,这不是多此一举吗,但是我想说ES6给开发带来的语法糖非常之多,足以吸引多数的技术决策者去尝试,此规范也大大提高了项目的可维护性和规范性,个人非常推崇,并且在项目中的应用稳定性也很高,如果你还没用使用,需要的话可以尝试一下。
那么今天就来详细介绍一个babel在我的项目中的使用,其实babel从某种意义上来讲推动了ES6标准的普及,让更多的开发人员能第一时间在浏览器不完全兼容的情况下体验这些完美的特性,Babel 是由插件组成,通过利用现有的插件或者开发你自己的插件可以组合出满足我们自身需要的转化管道。
Babel支持转换语法有JSX, ES6。
今天我们主要讲解一下如何在ES6项目架构中使用和架设Babel框架。
Babel命令安装使用
$ npm install -g babel-cli
简单解释一下-g 是全局安装,也可以用-global, 这样方便我们全局使用。
对于很多js工具都有这个命令操作,比如gulp webpack grunt 等等。
配置文件.babelrc
配置文件其实就是决定了我们在项目如何使用这个工具,举个例子比如gulp中gulpfile.js grunt中grunt.js等等。
所以Babel的配置文件是.babelrc,我们通常会把这个文件存放在项目的根目录下。
该文件的格式通常来讲是这个样子的:
{ "presets": [], "plugins": []}
presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装, 比如下面两个规则,是我在项目中经常用到的。
{ "presets": [ "es2015", "react" ], "plugins": [] }
为了能让两个规则生效,需要安装两个依赖库:
$ npm install --save-dev babel-preset-es2015$ npm install --save-dev babel-preset-react
基本使用
我们正常转换一个js文件:
$ babel myDemo.js
转码结果写入一个文文件 –out-file 或 -o 参数指定输出文件
$ babel myDemo.js --out-file myCompiled.js
或者,也可以用简写:
$ babel myDemo.js -o myCompiled.js
真正项目里我们不可能一个一个文件转换,所以需要整个目录转码
$ babel src -d lib
-d 参数指定输出目录
babel-core的应用
很多时候我们都会结合gulp等构建工具进行使用,这时候我们需要安装babel-core这个核心库:
npm install babel-core --save
下面是几个简单的示例:
var es6Code = 'let myArray.map(item.name = 'Richard')';var es5Code = require('babel-core') .transform(es6Code, { presets: ['es2015'] }) .code;
浏览器自动转化代码
其实我们也可以在浏览器中直接使用browser.js对代码进行自动转换,但是现实项目很少会这样去做,因为多少会影响前端的性能问题。
具体使用方法:
<script src="node_modules/babel-core/browser.js"></script><script type="text/babel">// Your ES6 code</script>
结合Gulp进行使用
通常在项目中,我们会应用到Gulp , Grunt, webpack这一类的构建工具,下面我们来介绍一下如何在gulp中使用babel:
首先我们需要安装babelify:
sudo npm install babelify --save--only=dev
然后安装browserify,对模块化代码进行整合:
sudo npm install browserify --save--only=dev
安装preset:
sudo npm install babel-preset-es2015 --save--only=dev
整体代码示例:
var browserify = require('browserify');var babelify = require('babelify');var es2015 = require('babel-preset-es2015'); var bundler = browserify({ entries: '//your js file path', debug: true, cache: {}, packageCache: {}, fullPaths: true });var transform = babelify.configure({ ignore: 'bower_components', presets: [es2015] });bundler.transform(transform);
当然babel的使用还不止于此,希望借此大家能不断的去摸索一下!
- Babel在ES6项目架构中的搭建与应用方案解析
- ES6(babel)环境搭建
- ES6 async/await在项目中的应用
- react基于webpack和babel以及es6的项目搭建
- ES6: babel配置与babel-clic安装
- webpack+babel+es6+react环境搭建
- ES6 babel
- es6 Babel
- ES6 初体验 —— gulp+Babel 搭建ES6环境
- 深入浅出 ES6:ES6 与 Babel / Broccoli 的联用
- es6转为es5:Babel下的ES6兼容性与规范
- 基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用
- 项目实习体会: MVC在网站架构中的应用
- 论架构技术在项目中的具体应用
- WebPack在React项目架构中的应用实践
- 使用Babel和Broserify创建你的ES6项目
- 在webstorm上利用babel实现自动编译es6文件
- 通过babel-register在nodejs端使用es6
- 命运【dp】
- Java 静态内部类 与 非静态内部类的区别?什么时候用静态内部类,又是什么时候用非静态内部类?
- OpenGL 中shadow map的常见问题(自己遇到的问题)
- 显著性物体检测与分割
- 符号的运用
- Babel在ES6项目架构中的搭建与应用方案解析
- post与get的区别
- 【C++】位操作的应用
- 常量指针与指针常量的区别
- 位模式
- 矩阵快速幂1242斐波那契数列的第N项
- $(document).ready(function() { // do this stuff when the HTML is all ready });
- cookie 和session 的区别详解
- 根文件系统制作以及启动kernel panic问题的解决总结