Babel 使用指南

本文将简单介绍 Babel 在不同环境下的使用方法，其中包括 CLI、Node、和浏览器中的具体使用方法与环境配置。

在 CLI 中使用Babel

Babel 的模块都是作为独立的 npm 包发布的，在 @babel 作用域之下（从第7版开始）。

这种模块化设计允许为特定用例设计各种工具。

核心库

Babel 的核心功能放在@babel/core模块中，安装之后：

npm install --save-dev @babel/core

就可以使用require直接在 JavaScript 程序中使用了：

const babel = require("@babel/core");

babel.transform("code", optionsObject);

CLI 工具

@babel/cli包含的工具，可以让你在终端使用 Babel 。

安装和使用的命令：

npm install --save-dev @babel/core @babel/cli

./node_modules/.bin/babel src --out-dir lib

以上命令会解析src目录下的所有 JavaScript 文件，应用指定的转换，将每个文件输出到lib目录。因为这里没有指定做什么转换，输出代码仍和输入代码相同。

在 Node 中使用Babel

1. 安装 Babel 依赖

   npm install babel-core --save-dev

2. 安装babel-register

   npm install babel-register --save-dev

3. 配置 Babel 转换选项，在项目根目录添加.babelrc文件

   {
     "presets": ["es2015"]
   }

   这时，还需要安装 ES6 转换模块，Babel 不能直接转换代码，需要转换模块

   npm install babel-preset-es2015 --save-dev

4. 在项目根目录添加入口文件index.js

   require('babel-register');
   require('./app.js');

在浏览器中使用 Babel

使用 babel-standalone

<div id="output"></div>
<!-- Load Babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Your custom script here -->
<script type="text/babel">
const getMessage = () => "Hello World";
document.getElementById('output').innerHTML = getMessage();
</script>