Машинописный эквивалент встроенного 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

Если я правильно вас понимаю, вы добавляете Vue в отдельный тег сценария перед вашим productPage.js.

Это означает, что вы не можете импортировать Vue в свой файл TypeScript, но вам нужно объявить Vue, чтобы модуль просто предполагал, что Vue уже загружен (за пределами вашего модуля TS).

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

Если вы хотите добавить упаковщик позже, вам нужно удалить свой скрипт-тег, который загружает Vue, и использовать только модульный подход: Vue необходимо импортировать с помощью оператора import, чтобы упаковщик знал, что он должен включить все Vue. После этого у вас будет один файл JS (или, если ваш компоновщик разбивает его: несколько файлов JS).