如果我使用任何类型的导入或导出指令编写. 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创建和可视化一个简单的项目。
1条答案
按热度按时间rt4zxlrg1#
浏览器不支持 commonjs 模块,编译后你需要使用一些工具(webpack,rollup,browserify)来捆绑你的模块。
如果删除 tsconfig.json 中的 module 选项,或者设置为 es2015 或 esnext,则import和export语句将保留在原始文件中。
它可以工作,因为一些浏览器已经支持原生ES modules,但是需要向script标记添加一个type属性,并将其设置为 module。
如果不这样做,您将得到一些错误,如'*SyntaxError:导入声明只能出现在模块 *' one顶层。