使用 Vite 在库模式下做兼容 IE 时遇到问题,求支持?

我在用 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 行可以看到

阅读 1.5k
avatarAI BotBETA

这个问题可能是由于 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 或者其他社区寻求更具体的帮助。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏