babel - 使用 Vite 在库模式下做兼容 IE 时遇到问题，求支持？

Question

我在用 vite 构建库模式的 lib 包时，需要兼容 IE 浏览器，发现官方提供的 @vitejs/plugin-legacy 不支持库模式，需要用 babel 去实现，遇到了问题

看到 github issues 中提供了方案，我按照此方案写了如下配置：

const config: InlineConfig = {    mode: 'production',    build: {      lib: {        entry: resolve(pkgDir, 'index.ts'),        name: 'XXX',        fileName: () => `${packConf.filename}-${version}.${isDev ? 'js' : 'prod.js'}`,        formats: ['umd'],      },      sourcemap: isDev,      outDir,      minify: !isDev,      emptyOutDir: false,      rollupOptions: {        plugins: [           babel({             presets: [['@babel/preset-env', {               targets: { browsers: ['last 2 versions', 'ie >= 9'] },               //  modules: false,               //  corejs: '3',               useBuiltIns: false,             }]],             extensions: ['.js', '.ts'],             configFile: false, // 不加载外部的 babel 配置             babelHelpers: 'runtime',             plugins: [               ['@babel/plugin-transform-runtime',                 {                   corejs: 3,                 }],             ],           }) as any,                  ],      },    },    clearScreen: false,  };  build(config);

发现构建产物里多了一堆 babel加入的代码，其中包含这样的：

var createPropertyDescriptor$8 = function createPropertyDescriptor2(bitmap, value) {    return {      enumerable: !(bitmap & 1),      configurable: !(bitmap & 2),      writable: !(bitmap & 4),      value    };  };

这里的value 写法是明显不支持旧浏览器的，奇葩的是为了解决兼容问题使用了babel，结果babel又引入了不兼容的代码。
我使用的版本是：

"@babel/plugin-transform-runtime": "^7.23.7",    "@babel/preset-env": "^7.23.8",    "@babel/runtime": "^7.23.8",    "@babel/runtime-corejs3": "^7.23.8",    "@rollup/plugin-babel": "^5.3.1",    "vite": "^5.0.11",

我怀疑是和 vite/babel 的构建时序问题导致的，但想不太明白，求支持

这里有个在线实例可验证， 希望能帮我看下怎么调整：
https://stackblitz.com/edit/vitejs-vite-fip7pv?file=vite.conf...

在 dist/vite-ts.umd.js 里 410 行可以看到

Answer 1

这个问题可能是由于 Babel 插件的加载顺序或者配置问题导致的。在 Vite 的库模式下，你需要确保 Babel 正确地处理了你的代码，以便在旧版浏览器上运行。

首先，你需要确保你的 Babel 配置是正确的。在你的例子中，你已经使用了 @babel/preset-env，并且设置了目标浏览器的兼容性要求。然而，有时候仅仅使用 preset 可能无法满足你的需求，你可能还需要自定义一些 Babel 插件或预设来处理特定的问题。

关于你提到的这段代码：

var createPropertyDescriptor$8 = function createPropertyDescriptor2(bitmap, value) {    return {      enumerable: !(bitmap & 1),      configurable: !(bitmap & 2),      writable: !(bitmap & 4),      value    };};

这段代码看起来是 ES6 的一个特性，用于创建属性的描述符。在旧版浏览器中，这个特性可能不被支持。如果你的目标是兼容旧版浏览器，你可能需要确保你的代码不使用这个特性，或者使用一些 polyfill 来模拟这个特性。

关于你使用的 Babel 插件版本，你可以尝试升级到最新版本，因为新版本可能修复了一些与旧版浏览器兼容性相关的问题。

另外，关于你提到的构建时序问题，Vite 的构建时序应该是先进行转译（通过 Babel），然后再进行其他的构建步骤。如果你怀疑是时序问题，你可以尝试调整你的构建配置，确保 Babel 在其他步骤之前运行。

最后，如果你仍然无法解决问题，我建议你创建一个简单的示例项目，只包含你遇到问题的部分代码和配置，然后尝试在 StackOverflow 或者其他社区寻求更具体的帮助。