javascript - 如何在纯 TypeScript 项目中修复 "ReferenceError: exports is not defined"？

Question

如果我用任何类型的导入或导出指令编写 .ts，则生成的 .js 在加载到 HTML 页面时将生成以下错误:“ReferenceError:exports is not defined”

如何重现:

1. 在 VS 中创建一个空白的 Node.js Web 应用程序项目
2. 添加带有导入或导出行的 .ts
3. 添加一些 HTML 调用生成的 .js
4. 启动 HTTP 服务器(http-server -g [port])并访问您的 HTML

我试过:

• 以 ES 5 为目标
• 从 tsconfig.json 中删除行 "module": "commonjs"
• 安装 CommonJS 和 SystemJS
• 使用tsc编译.ts
• Stack Overflow 对类似问题的任何其他解决方案
• 上述所有可能的排列。

我的 .ts(如果有导入指令，可以是任何东西):

import { setTimeout } from "timers";
setTimeout(() => console.log("asdf"), 1000);

HTML 只有一个引用脚本的简单主体

我的包.json

{
  "name": "nodejs-web-app4",
  "version": "0.0.0",
  "description": "NodejsWebApp4",
  "main": "server.js",
  "author": {
    "name": ""
  },
  "devDependencies": {
    "@types/node": "^8.0.14"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "lib": ["es6"],
    "sourceMap": true
  },
  "exclude": [
    "node_modules"
  ]
}

生成的 .js:

从 VS 构建(导致 ReferenceError: exports is not defined):

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const timers_1 = require("timers");
timers_1.setTimeout(() => console.log("asdf"), 1000);
//# sourceMappingURL=home-script.js.map

来自命令 tsc [filename].ts(导致 ReferenceError: exports is not defined):

"use strict";
exports.__esModule = true;
var timers_1 = require("timers");
timers_1.setTimeout(function () { return console.log("asdf"); }, 1000);

从 VS Build 但从 tsconfig 中删除 "module": "commonjs"(导致 SyntaxError: import declarations may only appear at top level of a module):

import { setTimeout } from "timers";
setTimeout(() => console.log("asdf"), 1000);
//# sourceMappingURL=asdf.js.map

所有 HTML 和 ts 都将被称为“静态”(无 MVC)

使用 http-server 从我的 VS 项目中查看静态 HTML 是否错误？是这个问题吗？

应该以任何其他方式构建？使用不同的设置？

我有一个解决方法(即，将我需要的所有内容都保存在同一个 TypeScript 文件中)，但令我困惑的是我无法使用 Node/TS 创建和可视化一个简单的项目。

Answer 1

浏览器不支持 commonjs 模块。您将需要使用一些工具(webpack、rollup、browserify)在编译后捆绑您的模块。

如果您删除 tsconfig.json 中的 module 选项，或者如果您设置为 es2015 或 esnext , import 和 export 语句将保留在原始文件中。

import { foo } from './bar.js';

export default class Baz {}

它可以工作，因为一些浏览器已经支持原生 ES modules但有必要向脚本标记添加一个type 属性并将其设置为module。

<script type="module" src="foo.js"></script>

如果不这样做，您会得到一些错误，例如“SyntaxError: import declarations may only appear at top level of a module”。