[英]Transpiling Typescript to ES5 with Visual Studio 2017 - Exports is Not Defined
I am attempting to use Visual Studio 2017 to integrate Typescript into an existing ASP.NET MVC project. 我正在尝试使用Visual Studio 2017将Typescript集成到现有的ASP.NET MVC项目中。 While I understand one may normally use task runners and/or bundlers such as Webpack to transpile "newer" JS into ES5, according to this article , it appears as if Visual Studio 2017 should handle the transpiling for you.
虽然我理解人们通常可以使用任务亚军和/或捆扎机等的WebPack到transpile“更新” JS到ES5,根据这篇文章 ,它看起来好像Visual Studio的2017年应该处理transpiling你。
However, I am receiving the following error when I run the web site in the browser: 但是,在浏览器中运行网站时,出现以下错误:
ReferenceError: exports is not defined[Learn More]
My current .tsconfig is as follows: 我当前的.tsconfig如下:
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "commonjs",
"outDir": "./Scripts/out/",
"rootDir": "./Scripts/src"
},
"exclude": [
"node_modules",
"wwwroot",
"outDir",
"./Scripts/out/"
],
"lib": [
"es2016",
"dom",
"es5"
]
}
I have tried removing the "module": "commonjs"
line, and adding the es5 lib as noted here , but received the same error. 我尝试删除
"module": "commonjs"
行,并按此处所述添加es5 lib,但收到相同的错误。
App-slider is a module I wrote; App-slider是我编写的模块; hyperform was installed through npm.
hyperform是通过npm安装的。 Both are default exports.
两者都是默认导出。
import hyperform from "hyperform";
import AppSlider from "./app-slider";
let appSlider = new AppSlider(null);
let $hyperForm = hyperform("window");
let form: HTMLFormElement = document.getElementsByTagName("form")[0];
let prevButton: HTMLButtonElement = <HTMLButtonElement>document.getElementById("prev");
let nextButton: HTMLButtonElement = <HTMLButtonElement>document.getElementById("next");
prevButton.addEventListener("click", (e) => {
appSlider.showPrev();
});
nextButton.addEventListener("click", (e) => {
e.preventDefault();
if (form.checkValidity()) {
appSlider.showNext();
}
});
The generated main.js 生成的main.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var hyperform_1 = require("hyperform");
var app_slider_1 = require("./app-slider");
var appSlider = new app_slider_1.default(null);
var $hyperForm = hyperform_1.default("window");
var form = document.getElementsByTagName("form")[0];
var prevButton = document.getElementById("prev");
var nextButton = document.getElementById("next");
prevButton.addEventListener("click", function (e) {
appSlider.showPrev();
});
nextButton.addEventListener("click", function (e) {
e.preventDefault();
if (form.checkValidity()) {
appSlider.showNext();
}
});
//# sourceMappingURL=main.js.map
If I change the "module" option to es6, I get a different error: 如果将“模块”选项更改为es6,则会收到其他错误:
SyntaxError: import declarations may only appear at top level of a module
I am using TypeScript 2.5. 我正在使用TypeScript 2.5。 Any advice would be appreciated.
任何意见,将不胜感激。 Thanks.
谢谢。
看起来您的.tsconfig
文件未得到解析-您可以将其重命名为tsconfig.json
吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.