npm 包 urbanjs-tool-babel 使用教程

简介

Gulp、Webpack 等构建工具已经成为了前端开发不可或缺的一部分，而 Babel 则可以将新一代 JavaScript 语法转换为 ES5 以及一些常用浏览器不支持的语法特性，从而使代码能够在各个浏览器中正常运行。本文将介绍 npm 包 urbanjs-tool-babel 的使用方法，让你能够快速将项目中的 JavaScript 代码转换为可用的 ES5 代码。

安装

要使用 urbanjs-tool-babel，首先需要安装 Node.js 和 npm。如果你还没有安装，请在官网下载页面下载安装包，安装过程比较简单，这里不赘述。

接下来，在项目根目录下使用 npm 安装 urbanjs-tool-babel：

npm install --save-dev urbanjs-tool-babel

安装完成后，你就可以在项目中使用 babel 命令了：

$(npm bin)/babel src --out-dir dist

其中，src 是要被转换的源代码目录，dist 则是转换后的代码输出目录。

配置文件

使用命令行工具每次手动输入转换命令并不方便，而且很难维护。因此，我们可以使用 urbanjs-tool-babel 的配置文件来管理转换任务。

在项目根目录下创建一个 urbanjs-tool.yml 文件，并添加以下代码：

tasks:
  babel:
    src: src
    options:
      presets:
        - @babel/preset-env
    enabled: true

这个配置文件指定了一个 babel 任务，包括：

• src: 要被转换的源代码目录；
• options: 转换选项，这里指定了使用 @babel/preset-env 预设；
• enabled: 任务是否启用。

现在，我们只需要在命令行工具中输入以下命令，urbanjs-tool-babel 就会自动查找对应的配置文件并执行相关任务：

$(npm bin)/urbanjs -t babel

示例代码

最后，让我们看一下具体的示例代码。假设我们有一个 src/app.js 文件，内容如下：

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

greet('World');

如果我们直接将这段代码在浏览器中运行，会抛出 SyntaxError: Unexpected token => 异常。但是使用 urbanjs-tool-babel 转换后，代码会变成：

"use strict";

var greet = function greet(name) {
  console.log("Hello, " + name + "!");
};

greet('World');

这样就可以在浏览器中正常运行了。

结论

本文介绍了 npm 包 urbanjs-tool-babel 的使用教程，包括安装、配置文件和示例代码。使用 urbanjs-tool-babel 可以快速帮助我们将新一代 JavaScript 语法转换为 ES5 以及一些常用浏览器不支持的语法特性，使得我们的代码能够在各个浏览器中正常运行。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e02ba