Eri*_*ria 12 rollupjs vuejs3 vite
由于另一个问题，我必须在 vue3 应用程序中静态导入 HTML 中的 JS 依赖项。
/index.html
<head>
<!-- ... -->
<script type="module" src="node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js"></script>
</head>
由于 Vite 无法正确捆绑此依赖项（由于问题，请参阅上面提到的帖子），我希望捆绑忽略它。在生产版本中，我希望 JS 模块按原样导入到 root 中index.html。
我尝试了配置属性中的几乎所有内容optimizeDeps.exclude，但 Vite 仍然尝试分析和预捆绑它。
vite.config.ts
export default defineConfig({
optimizeDeps: {
exclude: [
// I tried pretty much everything here: no way to force vite pre-bundling to ignore it...
'scale-components-neutral'
'@telekom/scale-components-neutral'
'@telekom/scale-components-neutral/**/*'
'@telekom/scale-components-neutral/**/*.js'
'node_modules/@telekom/scale-components-neutral/**/*.js'
],
},
// ...
});
在每种情况下，运行后npm run build，导入都会从 中删除dist/index.html。
配置期望什么optimizeDeps.exclude？
编辑
在https://vitejs.dev/guide/dep-pre-bundling.html中找到此注释：
依赖预捆绑仅适用于开发模式，并使用esbuild将依赖转换为ESM。在生产版本中，使用@rollup/plugin-commonjs。
我试图指定build.commonjsOptions.exclude配置。
vite.config.js
export default defineConfig({
build: {
commonjsOptions: {
exclude: [
'scale-components-neutral',
'node_modules/@telekom/scale-components-neutral',
'node_modules/@telekom/scale-components-neutral/**/*',
'node_modules/@telekom/scale-components-neutral/**/*.js',
'/node_modules/@telekom/scale-components-neutral',
'/node_modules/@telekom/scale-components-neutral/**/*',
'/node_modules/@telekom/scale-components-neutral/**/*.js',
'**/node_modules/@telekom/scale-components-neutral',
'**/node_modules/@telekom/scale-components-neutral/**/*',
'**/node_modules/@telekom/scale-components-neutral/**/*.js',
'@telekom/scale-components-neutral',
'@telekom/scale-components-neutral/**/*',
'@telekom/scale-components-neutral/**/*.js',
'**/node_modules/@telekom/scale-components-neutral/dist/scale-components/scale-components.esm.js',
],
},
},
// ...
不再成功：导入的剧照从 中消失dist/index.html。
编辑2
build.rollupOptions.external并且build.dynamicImportVarsOptions.exclude很有希望（因为最初的问题涉及动态导入......）。
但运气不佳：JS 依赖关系仍然没有很好地捆绑。它适用于本地开发，但不适用于使用npm run build.
要回答您的一般问题，您可以使用vite -plugin-external来告诉vite进入stuff
import { stuff } from 'xyz'
从window.XYZ.stuff。
用法：
import createExternal from 'vite-plugin-external';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
createExternal({
externals: {
xyz: 'XYZ'
}
}),
vue()
]
});
但在你的情况下似乎没有必要。在 vite4 + vue3 应用程序中使用 ScaleComponents：
main.js：
import { createApp } from "vue";
import "@telekom/scale-components/dist/scale-components/scale-components.css";
import {
applyPolyfills,
defineCustomElements,
} from "@telekom/scale-components/loader";
import App from "./App.vue";
applyPolyfills().then(() => {
defineCustomElements(window);
});
const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith("scale-");
app.mount("#app");
<scale-*>现在您可以在应用程序中使用组件。
或者，您可以使用vite.config.js声明 customElements：
import vue from '@vitejs/plugin-vue';
export default {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('scale-')
}
}
})
]
};
...并将应用程序安装简化为：
createApp(App).mount("#app")
| 归档时间： |
|
| 查看次数： |
19418 次 |
| 最近记录： |