javascript - 从 typescript 文件发出导出功能

Question

我有这个 .ts 文件:

let animalTypes: string[] = ["MOOSE","COW","HORSE"];

function getNoise(animalTypes) {

    if (animalTypes === "MOOSE") {console.log("NEIIIIIIIGH whatever noise Moose make");}
    else if (animalTypes === "COW") {console.log("MOOOOOOOOOOO");}
    else if (animalTypes === "HORSE") {console.log("WHINNNNY");}

}

export {getNoise}

转换成这个 .js 文件:

"use strict";
exports.__esModule = true;
var animalTypes = ["MOOSE", "COW", "HORSE"];
exports.animalTypes = animalTypes;
function getNoise(animalTypes) {
    if (animalTypes === "MOOSE") {
        console.log("NEIIIIIIIGH whatever noise Moose make");
    }
    else if (animalTypes === "COW") {
        console.log("MOOOOOOOOOOO");
    }
    else if (animalTypes === "HORSE") {
        console.log("WHINNNNY");
    }
}
exports.getNoise = getNoise;

但是，当我尝试加载 .js 文件并将函数直接导入我网站上的一个 block 时，我收到了这条错误消息:

Uncaught SyntaxError: The requested module './animals.js' does not provide an export named 'getNoise'

我正在从类里面复制一个例子，所以令人困惑的是它不起作用，但我们有它。

有谁知道可能导致此 SyntaxError 的原因是什么？

这里也是相关的 html:

import {getNoise, animalTypes} from "./animals.js";
document.getElementById("target").onclick = function() {
      getNoise(animalTypes[1]);
}

Answer 1

看起来您正在使用 ECMA6 模块加载器将模块加载到 HTML 文件中，并将您的 TypeScript 编译成 CommonJS 模块。

这两个模块系统不兼容。

尝试更改您的 tsconfig.json 文件，使其改为构建 ECMA6 模块。

{
  "compilerOptions": {
    "module": "es2015",
  },
}

您的 HTML 文件将如下所示:

<script type="module">
    import { getNoise, animalTypes } from "./animals.js";
    const noise = getNoise(animalTypes[1]);
    console.log(noise);
</script>

这里是 a demo for your on GitHub.另请注意，除了 getNoise 之外，您还需要导出 animalTypes，如下所示:

export {
  animalTypes,
  getNoise
}