錯誤 Typescript - 未捕獲的 ReferenceError：未定義導出

Question

我正面臨這個問題。 我創建了這個簡單的 app.ts 來了解 Typescript 中的承諾：

import {Promise} from 'es6-promise'

(() => {
console.log('inicio');

const prom1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Se termino el timeout');
    }, 1000);
});

prom1
    .then(mensaje => console.log(mensaje))
    .catch(err => console.warn(err))

console.log('fin');
})();

然后我編譯這個（tsc app.ts）。 它創建了一個 app.js：

"use strict";
exports.__esModule = true;
var es6_promise_1 = require("es6-promise");
(function () {
    console.log('inicio');
    var prom1 = new es6_promise_1.Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve('Se termino el timeout');
        }, 1000);
    });
    prom1
        .then(function (mensaje) { return console.log(mensaje); })["catch"](function (err) { return console.warn(err); });
    console.log('fin');
})();

此外，這是 tsconfig.json

{
  "exclude": ["typescript"],
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

但是當我在瀏覽器控制台中運行它時，會出現以下警報：

Uncaught ReferenceError: exports is not defined
    at app.js:2

我很沮喪，嘗試了互聯網上出現的所有內容，但沒有任何效果。 我正在嘗試學習如何使用 Angular

Answer 1

但是當我在控制台中運行它時

如果您的意思是瀏覽器控制台，那是預期的。 該代碼不是為在瀏覽器中獨立使用而編譯的，而是為理解 CommonJS 模塊的東西而編譯的。 （瀏覽器不支持，沒有庫/捆綁器支持。）

If you just want to compile TypeScript to JavaScript and run the result in a browser directly, tell TypeScript to output ESM (via the module option, setting it to "ESNext" ).

但是對於 Angular 項目，您可能希望使用Webpack或Rollup之類的捆綁程序。