[转] babel入门基础

时间:2022-09-06 19:48:35

背景

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

babel常用配置

通常在前端或node项目中,进行以下配置:

入口文件app.babel.js里面配置:
1
2
3
4
5
6
7
// babel
require('babel-core/register')({
    presets: ['es2015''stage-0']
});
require('babel-polyfill');
 
require('./app.js');
 
.babelrc文件中的设置:
1
2
3
{
  "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-2015、stage-0等,plugins可以让用户选取需要的单个插件。

  目前babel提供了几个官方的preset,主要包括:env  es2015 es2016 es2017 flow latest react 。设置presets的时候需要提前npm安装相应的插件,插件名格式:babel-preset-xxx;如下:

1
2
3
{   "presets": ["es2015"] }
 
npm install babel-preset-es2015

  

  如果不需要一套plugins的预设置,可以通过plugins属性引入所需的plugin,比如以下的设置就会引入编译class函数的功能。
 
1
{   "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
 
1
2
3
4
5
6
7
8
9
10
module: {
    loaders: [{
     loader: 'babel',
     test: /\.js/,
     include: path.join(__dirname, 'src'),
    query: {
       plugins: ['transform-runtime'],
       presets: [ 'es2015''stage-0'],
     }}]
 }
 

2.使用babel-polyfi

将babel-polyfill放在入口设置处
1
2
3
4
5
6
7
8
9
10
11
entry: [ 'babel-polyfill','src/index.js', ],
module: {  
    loaders: [{
         loader: 'babel',
         test: /\.js/,
         include: path.join(__dirname, 'src'),
         query: {
             presets: ['es2015',  'stage-0']
        }}]
 }
        

  

参考资料: