Question

如果我用任何类型的导入或导出指令编写.ts，则将结果.js加载到HTML页面中时将产生以下错误：“ ReferenceError：未定义导出”

如何复制：

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

我尝试过：

定位ES 5
从tsconfig.json中删除行"module": "commonjs"
安装CommonJS和SystemJS
使用tsc
其他任何解决方案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构建（结果为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"从tsconfig中删除（结果为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 modules，但是有必要在脚本标签中添加 type 属性并将其设置为 module 。

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

如果不这样做，则会出现类似“ SyntaxError：导入声明只能出现在模块的顶层”的错误。

如何在纯TypeScript项目中修复“ ReferenceError：未定义导出”？

1 个答案: