本文介绍如何使用 npm 包 @gandi/babel-preset-gandi，包括该包的功能、安装步骤、使用示例以及注意事项。
包功能
@gandi/babel-preset-gandi 是一个 Babel 预设，包含了一组用于转换 JavaScript 语法特性的插件。
使用该预设，可以将 ECMAScript 2015+ 语法转换为向后兼容的 JavaScript 语法。例如，可以使用箭头函数、类、解构赋值和模板字符串等语法特性，而无需担心浏览器兼容性问题。
该预设还包括了一些其他插件，用于处理 TypeScript、React 和其他一些语言特性。
安装步骤
可以使用 npm 或 yarn 来安装该包。以下是使用 npm 安装的步骤：
npm install @gandi/babel-preset-gandi --save-dev
安装完毕后，可以使用该预设来配置 Babel。
使用示例
在项目的 Babel 配置文件中，可以将该预设加入到 presets 数组中即可使用。
配置文件示例：
// .babelrc.js
module.exports = {
presets: [
["@gandi/gandi-preset-gandi", {
// 选项
}]
]
};在上述示例中，配置了一个名为 @gandi/gandi-preset-gandi 的 Babel 预设，并传递了一些选项。默认情况下，该预设会转换 ECMAScript 2015+ 语法特性并把编译后的代码输出到 "dist" 目录下。
可用选项
该预设提供了一些选项，可以根据项目需要进行配置。
以下是可用选项及其默认值：
{
"target": "node",
"loose": false,
"debug": false,
"modules": false,
"useBuiltIns": false,
"corejs": 3
}说明：
- target：指定编译后的代码运行环境。可选值有 "node"、"web" 和 "modern"。
- loose：启用 "loose mode" 以使用比较宽松的转换规则。默认为 false。
- debug：启用调试模式以输出更多详细信息。默认为 false。
- modules：指定如何处理模块。可选值有 "commonjs"、"amd"、"umd" 和 false（表示禁用模块转换）。默认为 false。
- useBuiltIns：启用 "useBuiltIns" 特性以自动导入 polyfill。默认为 false。
- corejs：指定要使用的 core-js 版本。默认为 3。
示例代码
以下是一个使用箭头函数和模板字符串的示例代码：
const names = ["Alice", "Bob", "Charlie"];
names.forEach(name => {
console.log(`Hello, ${name}!`);
});经过编译后的代码：
"use strict";
var _names = ["Alice", "Bob", "Charlie"];
_names.forEach(function (name) {
console.log("Hello, ".concat(name, "!"));
});注意事项
使用该预设时，请注意以下事项：
- 该预设默认不支持 IE11 及以下浏览器。如果需要向下兼容，则应选择在 "useBuiltIns" 中传入 "usage"，以按需导入相应的 polyfill。
- 该预设可能会对某些语法特性进行假设，例如在转换箭头函数时，如果参数列表只有一个参数，则会假设该参数使用了 ES6 的默认参数语法。因此，如果在代码中使用了某个特性，但在编译后无法正常工作，请检查是否符合插件的预期使用方式。
- 该预设是可配置的，可以根据项目需要进行调整。如果需要自定义配置，请参考上文中的 "可用选项" 一节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/gandi-babel-preset-gandi