简单使用babel

Posted jianhuicode

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单使用babel相关的知识,希望对你有一定的参考价值。

要使用babel,首先需要了解用的东西?它是一个用来进行ES6转化到ES5的转码器,从而在现有环境中进行执行。

一、配置文件.babelrc(搬运下)

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。


{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。


# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0 (0安装包含其他3个)
$ npm install --save-dev babel-preset-stage-1 (1安装包含其他2个)
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

然后,将这些规则加入.babelrc


  {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ],
    "plugins": []
  }

注意,以下所有Babel工具和模块的使用,都必须先写好.babelrc

四、babel-register

babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js.jsx.es.es6后缀名的文件,就会先用Babel进行转码。


$ npm install --save-dev babel-register

使用时,必须首先加载babel-register


require("babel-register");
require("./index.js");

然后,就不需要手动对index.js转码了。

需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

六、babel-polyfill

Babel默认只转换新的javascript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

安装命令如下。

$ npm install --save babel-polyfill

然后,在脚本头部,加入如下一行代码。

import ‘babel-polyfill‘; // 或者 require(‘babel-polyfill‘);

Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

参考文章:

 Babel 入门教程

 简单使用babel

 

以上是关于简单使用babel的主要内容,如果未能解决你的问题,请参考以下文章

简单使用babel

babel版本变化 - 简单理解

babel如此简单

webpack4 使用babel处理ES6语法的一些简单配置

babel的安装和使用方法

babel 中嵌套的依赖注入,尤其是 mongoose