程序员经验分享-hwhale

使用 vite 构建应用程序时如何从捆绑包中排除 JS 脚本？

2023-11-25

Due to 另一个问题，我必须在我的 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 模块按原样导入到根目录中index.html.

我几乎尝试了所有内容optimizeDeps.excludeconfig 属性，但 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配置期望？

Edit

遵循此注释，发现https://vitejs.dev/guide/dep-pre-bundling.html:

依赖性预捆绑仅适用于开发模式，并使用 esbuild 将依赖项转换为 ESM。在生产版本中，使用@rollup/plugin-commonjs。

我试图指定build.commonjsOptions.exclude config.

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.

Edit 2

build.rollupOptions.external and build.dynamicImportVarsOptions.exclude很有希望（因为最初的问题涉及动态导入......）。

但运气不佳：JS 依赖关系仍然没有很好地捆绑。它可以在本地开发中运行，但不能在使用构建的已部署应用程序上运行npm run build.


要回答您的一般问题，您可以使用vite-插件-外部告诉vite to get stuff in

import { stuff } from 'xyz'

from window.XYZ.stuff.

Usage:

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声明自定义元素：

import vue from '@vitejs/plugin-vue';

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('scale-')
        }
      }
    })
  ]
};

...并将应用程序安装简化为：

createApp(App).mount("#app")

工作演示

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vuejs3

vite

rollupjs

使用 vite 构建应用程序时如何从捆绑包中排除 JS 脚本？ 的相关文章

随机推荐

热门标签