es6可以導入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 未捕獲的 ReferenceError：在 countUp.js:13 處未定義導出

（注意：countUp.js 現在作為 es6 模塊分發）

Answer 1

簡短回答：否

---

使用 es6 時，需要使用export而不是exports 。 exports是一個 commonjs 功能，主要用於 node 而不是 web 瀏覽器。

如果你想使用commonjs你需要使用像requirejs這樣的第三方庫，但它使用require()而不是import ，以及exports而不是export 。 然后，您將能夠使用帶有 typescript 的 import/export 編寫代碼，但它將使用require進行編譯，而requirejs將處理其余部分。

因此，要在瀏覽器中正確使用它，您可以這樣做：

測試.js

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

索引.js

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

然后當你在你的 html 中加載文件時，函數 test 將執行。

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

Answer 2

實際上你可以使用 module.exports 和 import。 它適用於 webpack，也適用於 vs 代碼