通过 ESM 在 Javascript 中使用 CommonJS 的通用方法

Question

ESM是Javascript中模块函数的标准化方式。但是npm中有很多CommonJs包。 Vite是将CommonJs更改为ESM的好工具，我想在vue项目中使用protobufjs。 protobufjs 位于： https://github.com/protobufjs/protobuf.js/

它适用于

npm run dev

。我想为生产环境构建它，按照以下指南：https://cn.vitejs.dev/config/build-options.html#build-commonjsoptions

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import commonjs from '@rollup/plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    commonjs({
      include: /node_modules/,
    }),
    vue(),
  ]
})

我在vue中使用它如下：

<script setup>
import * as protobuf from "protobufjs";
console.log(protobuf.Enum)
</script>

当我运行

npm run dev

时一切正常。我在

npm run build

中出现错误：

src/App.vue (13:21): "Enum" is not exported by "node_modules/.pnpm/[email protected]/node_modules/protobufjs/index.js", imported by "
src/App.vue".

例子很简单，配置也很简单。但是什么导致了错误呢？

Answer 1

“通用”方式是使用默认导入。 CommonJS 被翻译成

*

不太自然，因为导出是动态的，它不能使用诸如 tree-shaking 之类的 ESM 特性，并且不仅可以是一个对象，还可以是任何东西。

这是由

defaultIsModuleExports

选项定义的，如有必要可以更改。默认情况下会自动识别转译的 ES 模块，这通常由模块对象中的

__esModule

属性决定。

由于

protobufjs

是UMD模块而不是转译的ESM，所以正确的使用方法是：

import protobuf from "protobufjs";