Babel 快速入门

在学习了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 快速入门-Babel教程

这就是一个最简单的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  

笔记与思考

发表评论

邮箱地址不会被公开。 必填项已用*标注