如何在Vite中实现Webpack IgnorePlugin忽略Moment多余语言包的效果？

要在Vite中实现和Webpack IgnorePlugin相同的效果，忽略Moment的多余语言包，可以通过以下两种方式配置：

方法一：使用Vite的别名配置（推荐） #

通过resolve.alias将Moment的locale模块指向单个语言包（如果需要保留特定语言），或者直接忽略所有locale模块：

场景1：只保留特定语言包（例如中文） #

如果项目只需要中文语言包，可配置如下：

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      // 将所有moment/locale的导入指向中文语言包
      'moment/locale': 'moment/locale/zh-cn.js'
    }
  }
})

之后在代码中手动导入该语言包使其生效：

import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')

场景2：完全忽略所有语言包 #

如果不需要任何语言包，直接将moment/locale指向空模块：

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      'moment/locale': false
    }
  }
})

方法二：使用Rollup的Ignore插件 #

Vite基于Rollup构建，可直接在配置中引入Rollup的@rollup/plugin-ignore插件来忽略指定模块：

1. 首先安装插件：

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

2. 在vite.config.js中配置：

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

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        // 忽略所有moment/locale相关模块
        ignore(['moment/locale'])
      ]
    }
  }
})

两种方法都能有效阻止Moment的多余语言包被打包到产物中，根据需求选择即可。

内容的提问来源于stack exchange，提问作者Isroiljohn Tolibov