請求的模塊不提供名為的導出

Question

我正在將這個 javascript 項目（ https://github.com/Legorin/satisfactory-calculator ）翻譯成打字稿。

當我在 html 腳本標簽中導入轉譯的打字稿文件時出現錯誤。

<script>
  var handlers = {}
</script>
<script type="module">
  import { Initilatizion } from "./init.js";
  handlers.init = Initilatizion.init;
</script>

錯誤是： Uncaught SyntaxError: The requested module './init.js' does not provide an export named 'Initilatizion'錯誤： Uncaught SyntaxError: The requested module './init.js' does not provide an export named 'Initilatizion'

這是我的 init.ts 文件

import { Belt } from "./belt";
import { Building } from "./building";
import { FactorySpecification } from "./factorySpecification";
import { Fragment } from "./fragment";
import { Item } from "./item";
import { Recipe } from "./recipe";
import { Settings } from "./settings";
// tslint:disable-next-line: no-var-requires
const d3 = require("../third_party/d3.min.js");

export class Initilatizion {
    public static loadData(settings) {
        const spec: FactorySpecification = FactorySpecification.getInstance();
        d3.json("data/data.json").then((data) => {
            const items = Item.getItems(data);
            const recipes = Recipe.getRecipes(data, items);
            const buildings = Building.getBuildings(data);
            const belts = Belt.getBelts(data);
            spec.setData(items, recipes, buildings, belts);

            Settings.renderSettings(settings);

            spec.updateSolution();
        });
    }

    public static init() {
        const settings = Fragment.loadSettings(window.location.hash);
        this.loadData(settings);
    }
}

這是我的 tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist",
    "sourceRoot": "src",
  },
}

我的錯誤在哪里？

Answer 1

您在tsconfig.json聲明了錯誤的module類型！

通過將module設置為"commonjs"您可以告訴"commonjs"生成一個 JavaScript 文件，該文件使用 nodejs 和其他人使用的commonjs導入/導出語法。 但是，您在 HTML 中使用“新”ES6 模塊導入/導出語法，因此必須將module設置為"esnext"或"es6" ！

相關文檔

注意：您共享了一個無效的 tsconfig.json 文件，我在下面修復了它

示例tsconfig.json ：

{
  "compilerOptions": {
    "module": "es6",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowJs": true,
    "outDir": "dist",
    "sourceRoot": "src"
  },
}