babel入门基础

背景

　　babel的官网说babel是下一代的js语法编译器，如今本身也在不少项目中使用了babel，但是本身对babel的认识呢，只停留在从google和别人项目中copy的配置代码上，心里感到很不安，最近花了点时间整理了一下，分享给大伙。

babel经常使用配置

一般在前端或node项目中，进行如下配置：

入口文件app.babel.js里面配置：

   

// babel
require('babel-core/register')({
	presets: ['es2015', 'stage-0']
});
require('babel-polyfill');

require('./app.js');

 

.babelrc文件中的设置：

 

{
  "presets": ["es2015", "stage-0"]
}

babel基础概念

1.babel-core

　　新的js语法以前是不存在的，须要将js代码分析抽象的语法树 ，方便各个插件分析语法进行相应的处理成低版本的js；

 2.babel-register 

　　改写了require命令，会对.js、jsx、.es、es6 后缀的模块都会先转码，但并不会对当前文件进行转码；因为该转码是实时的，因此不能用在生产环境中。

3.babelrc文件

　　babel-core只是生成了语法树，并无转码，转码工做由插件完成。自从babel升级到6.x以后，babel的插件都是能够插拔的，只有设置了相应的插件，babel才能知道如何处理js代码。

　　.babelrc主要对presets、plugins进行设置，其中presets主要是一套预设置的插件，如es-201五、stage-0等，plugins可让用户选取须要的单个插件。

　　目前babel提供了几个官方的preset，主要包括：env  es2015 es2016 es2017 flow latest react 。设置presets的时候须要提早npm安装相应的插件，插件名格式：babel-preset-xxx；以下：

 

{   "presets": ["es2015"] }

npm install babel-preset-es2015

　　 

　　若是不须要一套plugins的预设置，能够经过plugins属性引入所需的plugin，好比如下的设置就会引入编译class函数的功能。

 

{   "plugins": ["transform-es2015-classes"] }

　　

　　须要注意的是，某些插件是不被presets预置的，如经常使用的 transform-runtime 插件和 transform-remove-console 插件。

 

　　 关于presets和plugins的优先顺序通常听从3个原则：

• plugins优先于presets进行编译。
• plugins按照数组的index增序(从数组第一个到最后一个)进行编译。
• presets按照数组的index倒序(从数组最后一个到第一个)进行编译。
• 详细信息能够查看 官方文档

4.babel-polyfill 

　　polyfill拥有自定义的regenerator runtime 和core-js；它模拟了ES2015的环境，通常使用在应用程序中，而不是当作库和工具使用；好比说babel-node中自带了babel-polyfill，babel-polyfill为node提供了ES6的REPL环境。REPL，即read-eval-print-loop交互式解释器。详情可参考 阮老师的文章。

　　babel几乎能翻译全部的js新语法，可是对于APIs却并不是如此，如新增对象Promise、Set、Map等，静态方法Object.assign等，这就须要创造一个ES6的运行环境。

能够经过babel-polyfill来转码新API，其实现办法就是向全局变量上挂新增的对象或在原型链上增长方法，如在node环境下将Promise挂在global对象上。缺点就是污染全局变量。

　　还有一个避免全局污染的方法就是使用babel-runtime + babel-plugins-runtime-transform；babel-runtime 更像是分散的polyfill 模块，咱们能够在本身的模块里单独引入，好比 require(‘babel-runtime/core-js/promise’) ，它们不会在全局环境添加未实现的方法，只是这样手动引用每一个 polyfill 会很是麻烦。咱们借助 Runtime transform 插件来自动化处理这一切。

webpack中如何使用babel

1.使用babel-runtime

须要安装babel-runtime和babel-plugin-transform-runtime

 

module: {
    loaders: [{
     loader: 'babel',
     test: /\.js/,
     include: path.join(__dirname, 'src'), 
    query: {
       plugins: ['transform-runtime'], 
       presets: [ 'es2015', 'stage-0'],
     }}]
 }

 

2.使用babel-polyfi

将babel-polyfill放在入口设置处

entry: [ 'babel-polyfill','src/index.js', ], 
module: {   
    loaders: [{
         loader: 'babel',
         test: /\.js/,
         include: path.join(__dirname, 'src'),
         query: {
             presets: ['es2015',  'stage-0']
        }}]
 }
        

　　

参考资料：

http://www.tuicool.com/articles/vmA3U3R

http://www.javashuo.com/article/p-nqrmmrmg-h.html

https://github.com/brunoyang/blog/issues/20