Babel快速入门

作者：姜瑞涛

Github仓库：https://github.com/jruit/babel-tutorial

博客：姜瑞涛的官方网站

原文链接：https://www.jiangruitao.com/docs/babel/rudiments/quick-start/

版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议转载需注明原文作者、链接与版权协议

教程目前连载中，计划2020劳动节全部完成

上一节是Babel简介

这一节我们配置一个最简单的Babel转码工程，来学习整个流程。

本节配套代码是github仓库 https://github.com/jruit/babel-tutorial 的babel01例子

一、Babel的安装，配置与转码

Babel依赖Node.js，没有安装的话，去官网下载安装最新稳定版本的Node.js。

在本地新建一个文件夹babel01，在该文件夹下新建一个js文件，文件命名为babel.config.js。该文件是 Babel配置文件，我们在该文件里输入如下内容：

  module.exports = {
    presets: ["@babel/env"],
    plugins: []
  }

然后在该文件夹下新建一个js文件main.js，该js里的代码是我们需要转译的，我们写入代码

  var fn = (num) => num + 2;

然后执行下面的命令安装三个npm包，这些npm包是Babel官方包

  // npm一次性安装多个包，包名之间用空格隔开
  npm install --save-dev @babel/cli @babel/core @babel/preset-env

安装完成后，执行下面的命令进行转码，该命令含义是把main.js转码生成compiled.js文件

  npx babel main.js -o compiled.js

此时文件夹下会生成compiled.js，该文件是转换后的代码：

  "use strict";
  var fn = function fn(num) {
    return num + 2;
  };

这就是一个最简单的Babel使用过程，我们把用ES6编写main.js转换成了ES5的compiled.js。

二、Babel转码说明

babel.config.js是Babel执行时会默认在当前目录寻找的Babel配置文件。

除了babel.config.js，我们也可以选择用.babelrc或.babelrc.js这两种配置文件，还可以直接将配置参数写在package.json。它们的作用都是相同的，只需要选择其中一种。我们将在另外一节详细介绍Babel的配置文件，接下来默认使用babel.config.js。

@babel/cli，@babel/core与@babel/preset-env是Babel官方的三个包，它们的作用如下：

@babel/cli是Babel命令行转码工具，如果我们使用命令行进行Babel转码就需要安装它。
@babel/cli依赖@babel/core，因此也需要安装@babel/core这个Babel核心npm包。
@babel/preset-env这个npm包提供了ES6转换ES5的语法转换规则，我们在Babel配置文件里指定使用它。如果不使用的话，也可以完成转码，但转码后的代码仍然是ES6的，相当于没有转码。

这些工具后续都会有单独的章节说明，现在先学会简单使用即可。

小结：

1.一个完整的Babel转码工程通常包括如下：

Babel配置文件
Babel相关的npm包
需要转码的JS文件

2.我们通过以下命令对单个JS文件进行转码：

  npx babel main.js -o compiled.js

注：

1.如果安装npm包慢的话，通过以下命令设置npm镜像源为淘宝npm后再安装

  npm config set registry https://registry.npm.taobao.org

2.npx babel main.js -o compiled.js命令里npx是新版Node里附带的命令。它运行的时候默认会找到node_modules/.bin/下的路径执行。分别与下面的命令等效。

linux/unix命令行：

  node_modules/.bin/babel main.js -o compiled.js

windows的cmd命令行(假设babel01在D:\jiangruitao\路径下):

  D:\jiangruitao\babel01\node_modules\.bin\babel main.js -o compiled.js