打字稿-ReferenceError：未定義導出

Question

在我的控制台中，我不斷收到ReferenceError: exports is not defined為錯誤。

碼：

app.ts：

import {IDetails} from "./interfaces/IDetails";

class MyClass implements IDetails{
    constructor(){}

    public render (elem: string, text: string) {
        let el: HTMLElement = document.querySelector(elem);
        el.textContent = text;
        el.innerText = text;
    }
}

window.onload = () => {
    let myClass = new MyClass();
    myClass.render('body', 'Hello World!');
};

IDetails.ts：

export interface IDetails {
    elem: string,
    text: string
}

tsconfig.json：

{
  "compilerOptions": {
    "outDir": "./build/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "es5",
    "removeComments": true,
    "allowJs": true
  }
}

webpack.config.js：

module.exports = {
    entry: './index.ts',
    output: {
        filename: 'bundle.js',
        path: __dirname
    },
    watch: true,
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                options: {
                    transpileOnly: true
                }
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
};

我在這里做錯了什么？

編輯 ：我已經使用webpack.config.js和tsconfig.json編輯了我的問題。 還可能需要注意的是，我是在Chrome瀏覽器中直接從Webstorm查看文件的。 這可能是個問題嗎？

謝謝。

Answer 1

如果要導出CommonJS模塊，則可能與您的Typescript配置選項有關。 您可以通過一個名為Browserify的命令行實用程序運行捆綁軟件來解決此問題。 參見http://thejsguy.com/javascript/browserify/2015/01/05/browserify-getting-started.html

Answer 2

嘗試設置“ allowJs”：false

或者使用排除https://www.typescriptlang.org/docs/handbook/tsconfig-json.html從typescript編譯器中排除webpack配置文件