Babel配置中能否引用自定义browserslist包设置targets

完全可以实现你预期的配置效果。
@babel/preset-env 解析浏览器目标范围时，底层直接调用browserslist做规则解析，而browserslist原生支持加载npm发布的共享配置包，你预期的配置思路是完全可行的。

生效前置条件 #

要让配置正常运行，需要满足两个核心要求：

• 项目本地已经正确安装@custom-package/browserslist依赖，包版本和项目内的browserslist版本保持兼容
• 你引用的@custom-package/browserslist包符合browserslist共享配置规范：包入口文件需要导出合法的browserslist查询规则，支持字符串或者数组格式，比如包的入口文件内容参考：

module.exports = [
  "> 1%",
  "last 2 versions",
  "not dead"
]

配置写法说明 #

你给出的预期配置格式在包名符合browserslist共享包命名规范时可以直接生效：如果你的包名遵循browserslist-config-*或者@scope/browserslist-config-*的命名规则，直接写包名即可。
如果你的包名就是示例里的@custom-package/browserslist，没有带config后缀，需要显式加上extends前缀，否则browserslist会把字符串当成普通查询规则解析报错，修正后的配置如下：

....
    "presets": [
        [
          "@babel/env",
          {
            "targets": {
              "browsers": "extends @custom-package/browserslist"
            }
          }
        ],
....

额外建议 #

如果项目里还有其他依赖browserslist的工具（比如Autoprefixer、postcss-preset-env、ESLint兼容规则校验等），更推荐把browserslist配置单独提取到项目根目录的.browserslistrc文件或者package.json的browserslist字段里，所有工具可以自动复用同一份配置，不需要重复写在babel配置里，写法示例：

{
  "browserslist": [
    "extends @custom-package/browserslist"
  ]
}

配置完成后可以在项目目录执行npx browserslist命令，终端会输出最终解析到的所有目标浏览器版本，用这个方法可以快速校验配置是否正确加载。

内容的提问来源于stack exchange，提问作者Vincenzo Mancuso