es6 是否可以导入 commonjs 模块？

Question

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

是否可以将它与 es6 import 语句一起使用？这是我尝试过的。

生成的模块在文件末尾像这样导出 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 Uncaught ReferenceError: exports is not defined at countUp.js:13

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

Answer 1

简短回答：否

使用 es6 时，您需要使用 export 而不是 exports 导出。 exports 是一个 commonjs 特性，主要用于 node 而不是 web 浏览器。

如果您想使用 commonjs，您需要使用像 requirejs 这样的第三方库，但这使用 require() 而不是 import，并且 exports 而不是 export。然后，您将能够使用 import/export 和打字稿编写代码，但它将使用 require 进行编译，而 requirejs 将处理其余部分。

因此，要在浏览器中正确使用它，您可以这样做：

test.js

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

index.js

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

然后当你在你的 html 中加载文件时，函数测试将执行。

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

Answer 2

实际上您可以使用 module.exports 并导入。它适用于 webpack，适用于 vs code

es6 是否可以导入 commonjs 模块？

Is it possible to es6 import a commonjs module?

javascript

typescript

es6-modules