Vite项目中忽略外部包的require调用，解决css解析报错问题

方案1：通过resolve.alias映射空模块 #

利用Vite的路径别名，把组件库中带webpack loader语法的CSS路径映射到一个空模块，让打包时跳过解析该文件。

修改你的Vite配置文件：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [react()],
  resolve: {
    alias: {
      // 匹配报错中的特定CSS路径
      '!style-loader!css-loader!react-datepicker/dist/react-datepicker.min.css': path.resolve(__dirname, './empty-module.js'),
    },
  },
});

在项目根目录创建empty-module.js，内容为空即可：

// empty-module.js 空模块文件

方案2：用插件忽略特定require调用 #

方法A：使用rollup-plugin-ignore #

先安装插件：

npm install rollup-plugin-ignore --save-dev

再修改Vite配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ignore from 'rollup-plugin-ignore';

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    react(),
    ignore(['!style-loader!css-loader!react-datepicker/dist/react-datepicker.min.css']),
  ],
});

方法B：自定义Vite插件移除目标require语句 #

如果上述插件不生效，可以写一个简单插件，在代码转译时删除组件库中报错的require行：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    react(),
    {
      name: 'remove-datepicker-css-require',
      transform(code, id) {
        // 匹配组件库的DateInput文件路径，替换成实际包名
        if (id.includes('node_modules/<package>/es/Components/Input/DateInput.js')) {
          // 删除带loader语法的require语句
          return code.replace(/require\('!style-loader!css-loader!react-datepicker\/dist\/react-datepicker\.min\.css'\);?/, '');
        }
        return code;
      },
    },
  ],
});

注意将代码中的<package>替换为你公司组件库的实际包名。

方案3：按需引入组件（推荐） #

如果公司组件库支持按需引入，只导入你需要的组件，避免加载DateInput模块：

// 不要全量引入组件库
// import CompanyComponentLib from '<package>';

// 仅引入需要的组件
import { Button, Input } from '<package>';

这样不会加载DateInput.js文件，自然不会触发报错的require语句。

内容的提问来源于stack exchange，提问作者Bas Slagter