ViteJS：第三方库依赖预构建问题？构建正常但开发模式异常

问题本质 #

moment的ES模块是默认导出整个moment实例，而第三方库用import * as moment from 'moment'导入时，拿到的是包含default属性的模块对象。开发环境打包工具（比如Vite、Webpack）严格遵循ES模块规范，此时moment.isMoment是undefined，调用就会抛出TypeError: (void 0) is not a function；生产环境打包时工具自动做了兼容转换，所以能正常运行。

具体解决方法 #

1. 配置打包工具强制解析moment为CommonJS模块 #

Vite 配置

在vite.config.js中添加以下配置：

export default {
  optimizeDeps: {
    include: ['moment'],
    esbuildOptions: {
      format: 'cjs',
    },
  },
  build: {
    commonjsOptions: {
      include: [/moment/, /node_modules/],
    },
  },
}

该配置会让开发、生产环境统一将moment按CommonJS模块解析，import * as moment就能直接拿到带isMoment方法的对象。

Webpack 配置

在webpack.config.js中配置别名与转换规则：

module.exports = {
  resolve: {
    alias: {
      moment: require.resolve('moment'),
    },
  },
  module: {
    rules: [
      {
        test: require.resolve('moment'),
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['@babel/plugin-transform-modules-commonjs'],
          },
        },
      },
    ],
  },
}

2. 用Babel插件自动转换导入语句 #

安装@babel/plugin-transform-default-import后，在.babelrc或babel.config.js中添加插件配置：

{
  "plugins": [
    ["@babel/plugin-transform-default-import", { "modules": { "moment": "*" } }]
  ]
}

该插件会自动将第三方库的import * as moment from 'moment'转换为import moment from 'moment'，直接获取moment实例，调用方法即可正常运行。

3. 修改第三方库源码（如果有权限） #

直接将第三方库中的import * as moment from 'moment'改为import moment from 'moment'，这是最直接的解决方案，完全符合moment的ES模块导出规范。

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