能否使用ES6的import来引入CommonJS模块？

Question

我有一个CommonJS模块，是由Typescript 3.3.3生成的。

是否可以使用ES6导入语句来使用它？以下是我的尝试。

生成的模块在文件末尾像这样导出CountUp：

exports.CountUp = CountUp;

在我的 main.js 文件中：

import { CountUp } from './js/countUp.js';

在index.html中：

  <script src="./js/countUp.js"></script>
  <script src="./main.js" type="module"></script>

但我收到了

countUp.js:13未捕获的引用错误：exports未定义 在countUp.js中的13行

（注意：countUp.js现在作为es6模块进行分发）

- inorganik

---

MDN说应该这样做。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import#Browser_compatibility - Get Off My Lawn

你的 countUp 代码似乎没有在尝试 CommonJS 导出之前检查 exports 是否存在。 - Pointy

@Pointy，它可以做到所有这些，我没有包含整个文件。您可以在此处查看：https://github.com/inorganik/countUp.js/blob/master/dist/countUp.js - inorganik

@GetOffMyLawn - MDN（或规范）确切地在哪里说明ES6模块_import_可以从commonjs模块导入？ - Randy Casburn

你可以使用模块加载器，但不能与ES6原生一起使用。 - Randy Casburn

Answer 1

简短回答：不需要

---

使用ES6时，你需要使用export而不是exports。 exports是一个通常在node中使用而不是Web浏览器的CommonJS功能。

如果你想使用commonjs，你需要使用第三方库例如requirejs，但是这将使用require()而不是import，并且使用exports而不是export。之后，你就能够使用TypeScript编写代码并通过require进行编译，而requirejs将处理其余部分。

因此，要在浏览器中正确使用它，你应该这样做：

test.js

export function Test() {
  console.log('hello')
}

index.js

import { Test } from './test.js'
Test()

当你在html中加载文件时，函数test将执行。

<script src="index.js" type="module"></script>

- Get Off My Lawn

---

所以对于OP的问题，答案很简单：不行。 - Randy Casburn

我认为你的答案是否定的。也许你可以重新措辞一下。因为问题的整个目的是使用commonjs。我不能改变它的导出方式。 - inorganik

值得澄清（似乎是）OP 混淆了术语。 OP 标题问“是否可能使用 es6 import 导入 commonjs 模块？”，答案是：取决于导入的位置。如果在 Node.js 中，则是可能的，但如果在浏览器中（这就是 OP 在问题正文中所指的），则不行，正如您所阐述的那样。 - OfirD

想象一下cjs=>esm rollup api import { generate } from 'astring'; export class DurableObjectExample {constructor(el, env){ this.el = el; this.env = env; this.el.blockConcurrencyWhile(async()=> { let stored = await this.el.storage.get("esm"); watcher.on("event", (event) => { const ast = event.result.cache.modules.ast; const esm = generate(ast); this.el.storage.put("esm", JSON.stringify(esm)) });});}}; 就像是一个编程式的global命名空间，在一个有主见的、只读的selfv8引擎webworker中，或者是一个durable object! - Nick Carducci for Carface Bank

如果这个答案并没有回答问题，为什么人们还要点赞呢？问题显然/直接/清楚地询问是否可能。如果你需要更改commonjs代码，那就不再是一个答案了。 - rubens21

Answer 2

是的，可以像这样使用esm：

1. 安装esm

npm i -save esm

2. 像这样运行应用程序

node -r esm filename.js

你可以在 cjs 中使用 import

- Dyln01

Answer 3

实际上您可以使用 module.exports 和 import。它适用于 webpack，也适用于 vs code。

- Emre