相当于内联JavaScript的打字稿

Question

这可能是不言而喻的，但是我找不到任何可以说明我要做什么的示例（也许我只是做错了）。 我正在将Vue添加到现有的ASP.NET Core MVC应用程序中，并将JavaScript语句直接添加到页面中是可行的，但是当我尝试迁移到TypeScript文件时，没有任何反应。

JavaScript是：

new Vue({
    el: "#productPage",
      data: {
        isLoading: true
    },
    methods: {
    },
    mounted () {
        console.log("mounted()");
        this.isLoading = false;
    }
});

这按预期工作。 将代码迁移到TypeScript文件productPage.ts ：

import Vue from 'vue';

new Vue({
  el: "#productPage",
  data: {
      isLoading: true
  },
  methods: {
  },
  mounted () {
      console.log("mounted()");
      this.isLoading = false;
  }
});

会产生：

(function (factory) {
  if (typeof module === "object" && typeof module.exports === "object") {
      var v = factory(require, exports);
      if (v !== undefined) module.exports = v;
  }
  else if (typeof define === "function" && define.amd) {
      define(["require", "exports", "vue"], factory);
  }
})(function (require, exports) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var vue_1 = require("vue");
  var HonestyBox;
  (function (HonestyBox) {
      new vue_1.default({
          el: "#productPage",
          data: {
              isLoading: true
          },
          methods: {},
          mounted: function () {
              console.log("Mounted !!!!");
              this.isLoading = false;
          }
      });
  })(HonestyBox || (HonestyBox = {}));
});
//# sourceMappingURL=productPage.js.map

并包括生成的javascript文件productPage.js ：

<script src="~/js/productPage.js"></script>

这什么也没做。 单步调试器不满足function(factory)中的任何条件。 控制台告诉我You are running Vue in development mode. 但随附的JavaScript无法运行。 tsconfig.json用于生成JavaScript文件：

{
  "compileOnSave": true,
  "compilerOptions": {
    "module": "umd",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "Typescript/**/*"    
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

使用"module": "commonjs"导致ReferenceError: exports is not defined 。 我希望避免使用Browserify或Webpack。

Answer 1

如果我理解正确，您可以在productPage.js之前的单独脚本标记中添加Vue。

这意味着您不能在TypeScript文件中导入Vue，但是需要声明Vue，因此模块仅假定Vue已被加载（在TS模块外部）。

declare const Vue; // this replaces your Vue import statement

如果以后要添加捆绑器，则需要删除加载Vue的脚本标签，而只能采用模块化方法：Vue需要使用import语句导入，以便捆绑器知道他必须包括所有Vue。 然后，您将只有一个JS文件（或者如果捆绑程序将其拆分：多个JS文件）。