Vite 在构建期间将动态导入语句转换为 __import__。我有什么办法可以解决这个问题吗？

Question

我正在尝试在我现有的一个项目中使用 vite。经过长时间的努力，我终于设法让一切都在开发模式下工作。但是，当我在使用 vite build 构建脚本后尝试测试该应用程序时，所有动态导入对我来说都失败了。问题是，所有导入语句都被转换为 __import__。如果我在构建的捆绑包上手动将 __import__ 替换为 import，那么一切正常。我尝试删除 @vitejs/plugin-legacy 但它仍然无效。

这是我的 vite.config.ts 文件

import { UserConfigFn } from 'vite';
import RubyPlugin from 'vite-plugin-ruby';
import FullReload from 'vite-plugin-full-reload';
import styleLint from '@amatlash/vite-plugin-stylelint';
import eslintPlugin from 'vite-plugin-eslint';
import legacy from '@vitejs/plugin-legacy';

import { resolve as _resolve, join } from 'path';

import * as tsconfig from './tsconfig.json';

const paths = tsconfig.compilerOptions.paths;

const defaultAlias = Object.keys(paths).reduce((acc, key) => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  const value = paths[key][0];
  const path: string = key.replace('/*', '/');
  acc.push({
    find: path,
    replacement: _resolve(__dirname, value.replace('/*', '/').replace('.//', './')) + '/',
  });
  return acc;
}, [] as any[]);

const configFn: UserConfigFn = ({ mode, command }) => {
  const plugins =
    mode === 'development' && command === 'serve'
      ? [
          styleLint({
            exclude: ['node_modules', 'public', 'plyr.css'],
          }),
          eslintPlugin({
            fix: true,
            exclude: ['node_modules', '**/legacy.js'],
          }),
          FullReload(['config/routes.rb', 'app/views/**/*']),
        ]
      : [];
  return {
    plugins: [...plugins, legacy({}), RubyPlugin()],
    css: {
      postcss: '',
    },
    resolve: {
      alias: [
        ...defaultAlias,
        {
          find: /~(.+)/,
          replacement: join(process.cwd(), 'node_modules/'),
        },
      ],
    },
    build: {
      sourcemap: process.env.RAILS_ENV !== 'production',
      polyfillDynamicImport: true,
      rollupOptions: {
        output: {
          manualChunks: (id) => {
            if (id.includes('node_modules')) {
              if (id.includes('jquery')) {
                return 'jquery';
              }

              if (
                /creditcards|snabbdom-form|email-validator|format-numbe|form-serialize|phone-regex|email-regex|currency-regex|format-number|snake-case|number-format|superagent/.test(
                  id
                )
              ) {
                return 'formHelpers';
              }

              if (id.includes('chart.js')) {
                return 'chartJs';
              }

              if (id.includes('moment')) {
                return 'momentJs';
              }
              if (id.includes('imagesloaded')) {
                return 'imagesLoaded';
              }

              if (id.includes('uuid')) {
                return 'uuid';
              }

              if (id.includes('flimflam')) {
                return 'flimflam';
              }

              if (/cropperjs|guillotine/.test(id)) {
                return 'imageHelpers';
              }

              if (/ff-dashboard|ff-file-uploader/.test(id)) {
                return 'ffDashboard';
              }

              return 'vendor';
            }
          },
        },
      },
    },
    clearScreen: false,
  };
};

export default configFn;

Answer 1

原来是因为polyfillDynamicImport到true.