Transpiling Typescript to ES5 with Visual Studio 2017 - Exports is Not Defined

Question

I am attempting to use Visual Studio 2017 to integrate Typescript into an existing ASP.NET MVC project. 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.

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:

  {
  "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.

App-slider is a module I wrote; hyperform was installed through 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

   "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:

SyntaxError: import declarations may only appear at top level of a module

I am using TypeScript 2.5. Any advice would be appreciated. Thanks.

Answer 1

看起来您的.tsconfig文件未得到解析-您可以将其重命名为tsconfig.json吗？