JavaScript 中 Babel 怎么编写自定义 Pre-preset 配置包-js教程-PHP中文网

babel 中不存在官方“pre-preset”概念，所谓“自定义 pre-preset”实为可复用的 npm 包（如 @myorg/babel-preset-base），它导出符合 babel 协议的函数，预封装插件与 preset 逻辑，开箱即用、支持选项扩展，并通过 presets 字段直接引用。

javascript 中 babel 怎么编写自定义 pre-preset 配置包

在 Babel 中，并没有官方定义的 “Pre-preset” 概念，但你提到的“自定义 Pre-preset 配置包”，通常是指一个可复用、提前封装好插件与 preset 逻辑的 npm 包（比如 @myorg/babel-preset-base），它被设计为在用户项目中通过 presets 字段直接引用，且本身**不依赖用户传参就能开箱即用**——也就是所谓“预设好的 preset”。这类包本质是标准的 Babel preset，只是命名和用途强调“预先配置好”，常用于团队统一规范或框架配套工具链。

1. 创建一个标准的 Babel preset 包

所谓“Pre-preset”，就是导出一个符合 Babel 插件/预设协议的函数或对象。Babel 会自动调用它，传入 { presets, plugins, ... } 等上下文参数（如 api 对象）。

新建 npm 包（如 my-babel-preset），初始化 package.json，设置 "main": "index.js"
index.js 导出一个函数（推荐），接收 api 和 options 参数：

index.js

module.exports = function (api, options = {}) {
  // 启用缓存（强烈建议）
  api.cache(true);

  const env = api.env();
  const isDevelopment = env === 'development';

  return {
    presets: [
      // 核心 preset（如 @babel/preset-env）
      ['@babel/preset-env', {
        targets: { browsers: ['> 1%', 'last 2 versions'] },
        modules: false,
        shippedProposals: true
      }],
      '@babel/preset-react',
      '@babel/preset-typescript'
    ],
    plugins: [
      // 开发环境专用插件
      isDevelopment && 'react-refresh/babel',
      // 其他通用插件
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-transform-runtime'
    ].filter(Boolean)
  };
};

2. 支持用户覆盖或扩展配置

虽然叫“Pre-preset”，但最好保留一定灵活性。Babel preset 函数的 options 参数允许用户在 .babelrc 或 babel.config.js 中传入定制项。

例如支持传入 reactRuntime 或 loose 选项：

index.js（增强版）

module.exports = function (api, options = {}) {
  api.cache(true);
  const { reactRuntime = 'automatic', loose = false } = options;

  return {
    presets: [
      ['@babel/preset-env', { loose, targets: { browsers: ['> 1%'] } }],
      ['@babel/preset-react', { runtime: reactRuntime }]
    ],
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      '@babel/plugin-proposal-optional-chaining'
    ]
  };
};

使用时：{"presets": ["my-babel-preset", {"reactRuntime": "classic"}]}

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

3. 发布为可安装的 npm 包

确保包具备以下要素，才能被其他项目正确识别为 Babel preset：

导出函数或对象（不能是 ES 模块默认导出，除非同时提供 exports 字段兼容 CJS）
package.json 中声明 "type": "commonjs"（推荐），或同时提供 exports 映射
包含 peerDependencies，列出所依赖的 Babel 包（如 @babel/core、@babel/preset-env），避免版本冲突
发布前运行 npm publish（注意 scope、access 权限等）

4. 在项目中使用你的 Pre-preset

安装后，像使用任何 Babel preset 一样引入即可：

// babel.config.js
module.exports = {
  presets: [
    'my-babel-preset', // 自动解析为 require('my-babel-preset')
    // 或带选项：['my-babel-preset', { loose: true }]
  ]
};

如果 preset 内部已处理好环境判断、缓存、插件条件加载，用户就无需再手动写逻辑 —— 这正是“Pre-preset”的价值：把最佳实践打包成一行配置。