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文件并将功能直接导入到我网站上的块中时，我收到此错误消息：

未捕获的SyntaxError：所请求的模块'./animals.js'没有提供名为“ 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.，还请注意，除了animalTypes之外，还需要导出getNoise，如下所示：

export {
  animalTypes,
  getNoise
}

从打字稿文件导出功能

1 个答案: