如何修复“引用错误:未在纯TypeScript项目中定义”导出“?

c3frrgcw  于 2023-01-27  发布在  TypeScript
关注(0)|答案(1)|浏览(103)

如果我使用任何类型的导入或导出指令编写. ts,那么当加载到HTML页面中时,生成的. js将生成以下错误:"参考错误:未定义导出"

如何重现:

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

  • 靶向ES5
  • 从tsconfig.json '中删除行"module": "commonjs"
  • 正在安装公用JS和系统JS
  • 使用tsc编译. ts
  • 任何其他解决方案Stack Overflow都有类似的问题
  • 以上所有可能的排列。

My. 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"
  }
}

一米四分一秒

{
  "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构建版本,但从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创建和可视化一个简单的项目。

rt4zxlrg

rt4zxlrg1#

浏览器不支持 commonjs 模块,编译后你需要使用一些工具(webpack,rollup,browserify)来捆绑你的模块。
如果删除 tsconfig.json 中的 module 选项,或者设置为 es2015esnext,则importexport语句将保留在原始文件中。

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

export default class Baz {}

它可以工作,因为一些浏览器已经支持原生ES modules,但是需要向script标记添加一个type属性,并将其设置为 module

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

如果不这样做,您将得到一些错误,如'*SyntaxError:导入声明只能出现在模块 *' one顶层。

相关问题