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文件）。

相当于内联JavaScript的打字稿

1 个答案: