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