当前位置: 代码迷 >> JavaScript >> 如何在纯TypeScript项目中修复“ReferenceError:exports not defined”?
  详细解决方案

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

热度:390   发布时间:2023-06-03 18:17:18.0

如果我使用任何类型的导入或导出指令编写.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创建和可视化一个简单的项目。

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

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

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

export default class Baz {}

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

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

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

  相关解决方案