Vite 构建中因浏览器兼容性错误已将模块外部化

Question

我目前正在开发一个使用 Vite 版本 4.3.2 的项目，并通过 aem-vite 插件与 Adobe Experience Manager (AEM) 集成。该项目还包括“@aem-vite/vite-aem-plugin”和“@aem-vite/import-rewriter”。

我面临的问题是该项目在开发服务器上运行良好，但在为生产构建时抛出错误。我在浏览器控制台中收到的错误消息是：

模块“”已外部化以实现浏览器兼容性。不能 在客户端代码中访问“.custom”。

模块“”部分没有明确说明可能导致此问题的实际模块。

这是我的整个 vite.config.ts 文件：

    export default defineConfig(({ command, mode }) => ({
      plugins: [
        vue(),
        vueJsx(),
        tsconfigPaths(),
        viteForAem({
          contentPaths: [designsName, 'content'],
          publicPath: clientLibsPath,
        }),
        bundlesImportRewriter({
          publicPath: clientLibsPath,
          resourcesPath: 'resources/js',
        }),
        commonjs({
          include: '/node_modules/',
          requireReturnsDefault: 'auto',
          defaultIsModuleExports: 'auto',
        }),
      ],
      optimizeDeps: {
        include: ['qs', 'dayjs'],
      },
      resolve: {
        alias: {
          '@': fileURLToPath(new URL(clientScriptsPath, import.meta.url)),
          'aem-base': aemBaseClientPath(),
          ...createLibMock('lib/proxyImport', 'proxyImport'),
          ...createLibMock('components/mixins/isMobile', 'isMobile'),
          components: aemBaseClientPath('scripts/components'),
          constants: aemBaseClientPath('scripts/constants'),
          lib: aemBaseClientPath('scripts/lib'),
        },
        dedupe: ['vue'],
      },
      base: command === 'build' ? clientlibsFolderPath : '/',
      root: './',
      build: {
        brotliSize: false,
        manifest: false,
        minify: mode === 'development' ? false : 'esbuild',
        outDir: 'dist',
        sourcemap: command === 'serve' ? 'inline' : false,
        rollupOptions: {
          output: {
            assetFileNames: `${clientlibResourcesPath}/[ext]/[name][extname]`,
            chunkFileNames: `${clientlibResourcesPath}/chunks/[name].[hash].js`,
            entryFileNames: `${clientlibResourcesPath}/js/[name].js`,
          },
          input: {
            bundle: `${clientPath}/scripts/main.ts`,
            styles: `${clientPath}/assets/styles/main.scss`,
          },
        },
      },
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `$s-base-resource-path: "${aemBaseResourcePath}";$s-selectiontools-resource-path: "${clientLibsPath}";`,
            quietDeps: true,
          },
        },
        loaderOptions: {
          sass: {
            quietDeps: true,
          },
        },
      },
      test: {
        globals: true,
        environment: 'jsdom',
        exclude: [...configDefaults.exclude],
        root: `${clientScriptsPath}/tests`,
        coverage: {
          reporter: ['text', 'json', 'html', 'lcov'],
          reportsDirectory: `${testReportsPath}`,
        },
      },
    }));

这是我的 vite.config.js 部分，我在其中设置了别名以尝试解决此问题：

resolve: {
alias: {
    process: "process/browser",
    buffer: "buffer",
    crypto: "crypto-browserify",
    stream: "stream-browserify",
    assert: "assert",
    http: "stream-http",
    https: "https-browserify",
    os: "os-browserify",
    url: "url",
    util: "util",
},

尽管如此，我仍然收到同样的错误。

我已经尝试过升级和降级Vite版本，但问题依然存在。这里有我遗漏或不理解的东西吗？任何帮助将不胜感激。谢谢你。

Answer 1

您可以通过使用像

rollup-plugin-node-polyfills

这样的polyfill节点包来避免这些警告，并在别名设置中使用它：

    resolve: {
        alias: {
            util: "rollup-plugin-node-polyfills/polyfills/util",
            assert: "rollup-plugin-node-polyfills/polyfills/assert",
            os: "rollup-plugin-node-polyfills/polyfills/os",
            buffer: "rollup-plugin-node-polyfills/polyfills/buffer-es6",
            process: "rollup-plugin-node-polyfills/polyfills/process-es6",
            fs: "rollup-plugin-node-polyfills/polyfills/empty",
            net: "rollup-plugin-node-polyfills/polyfills/empty",
            perf_hooks: "rollup-plugin-node-polyfills/polyfills/empty",
            path: "rollup-plugin-node-polyfills/polyfills/path",
            child_process: "rollup-plugin-node-polyfills/polyfills/empty",
        },
    },

对于不存在的 polyfill，或者当您确定导入特定 Node.js 模块的代码永远不会在浏览器中执行时，请使用

empty

“polyfill”。