npm 包 babel-c 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

babel-c 是一款在前端开发过程中用于编译 ES6 或 ES7 语法的 npm 包，能够将使用了最新 JavaScript 语法的代码转换成老版本的 JavaScript 语法，以保证在不支持新语法的浏览器中正常展示。

在使用 babel-c 之前，需要先安装 Node.js 和 npm。安装完成后在命令行中输入以下命令进行安装：

npm install -g babel-cli

这里使用了全局安装的方式，若需要局部安装该 npm 包，可以去掉 -g 参数。

babel-c 提供了两种编译方式：命令行方式和配置文件方式。这里先介绍命令行方式。

在命令行中输入以下命令编译文件：

babel src --out-dir lib

其中，src 为待编译的源文件所在目录，lib 为编译后的文件输出目录。可以使用 -w 参数来监控文件变化并实时编译：

babel src --out-dir lib -w

在项目根目录下创建名为 .babelrc 的配置文件：

{
  "plugins": [],
  "presets": []
}

其中 plugins 和 presets 分别为插件和预设的配置项，具体使用可以参考官方文档。

在配置文件中添加好插件和预设后，在命令行中输入以下命令编译：

babel src --out-dir lib

可以使用 -w 参数来监控文件变化并实时编译。

下面是一个使用 babel-c 编译 ES6 语法的示例代码：

// src/index.js
const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr);

编译前：

// lib/index.js
const arr = [1, 2, 3];
const newArr = arr.map((item) => {
  return item * 2;
});
console.log(newArr);

编译后：

// lib/index.js
"use strict";

var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
  return item * 2;
});
console.log(newArr);

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