如何在纯TypeScript项目中修复“ReferenceError：exports not defined”？

Question

如果我使用任何类型的导入或导出指令编写.ts，生成的.js将在HTML页面中加载时生成以下错误：“ReferenceError：exports 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只有一个引用脚本的简单主体

我的package.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 build（导致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但从"module": "commonjs"删除"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，汇总，browserify）在编译后捆绑您的模块。

如果删除tsconfig.json中的module选项，或者设置为es2015或esnext ，则导入和导出语句将保留原始文件中的状态。

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

export default class Baz {}

它可以工作，因为一些浏览器已经支持本机ES模块，但是有必要在脚本标记中添加一个类型属性并将其设置为模块 。

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

如果不这样做，您将收到一些错误，例如' SyntaxError：import声明可能只出现在模块的顶层 '。