Babel简明使用方式

作者: MOKUO | 来源:发表于2017-07-29 17:26 被阅读0次

安装所需依赖

npm install -g babel-cli babel-register babel-preset-es2015 babel-preset-stage-2

*可以按需求选择全局安装或者作为dev依赖安装,本例为全局安装

依赖说明

说明
babel-cli babel主程序
babel-register babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
babel-preset-es2015 ES2015转码规则
babel-preset-stage-2 ES7不同阶段语法提案的转码规则(共有4个阶段,0~3,此处选用2)

使用方法

直接使用

首先创建配置文件
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
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

本例中我们已经安装了 es2015babel-preset-stage-2

填写配置文件

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

之后,就可以在命令行内使用babel了,基本用法如下

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

使用babel-register

用法1

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

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

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

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


用法2

若为node程序,另一种更简洁的使用方式如下:

  1. 在项目根目录创建bin文件夹
  2. 进入bin文件夹创建文件,名为dev(名称随意,注意没有后缀)
  3. 键入如下代码
require('babel-register');
require('想要编译的文件的位置');
  1. 终端使用node ./bin/dev即可完成先编译再运行的操作

此招针对node迟迟不肯实现的 import 特性 ´_>`


参考来源:

相关文章

网友评论

    本文标题:Babel简明使用方式

    本文链接:https://www.haomeiwen.com/subject/eklclxtx.html