Vue: Falsch generierter JS-Code von TypeScript und AMD (UMD) - Version 2

Erstellt am 4. Jan. 2018 · 3Kommentare · Quelle: vuejs/vue

Ausführung

2.5.13

Reproduktionslink

https://github.com/80LevelElf/VueProblemApp

Schritte zum Reproduzieren

Führen Sie einfach die App aus, indem Sie die
/VueProblemApp/VueProblemApp/index.html und der Fehler wird in der Konsole angezeigt.

Was wird erwartet?

Der Typescript-Compiler sollte Vue-Typisierungen übernehmen und den richtigen Code erzeugen.

Was passiert eigentlich?

Der resultierende JS-Code ist nicht richtig (siehe Kommentare für detaillierte Erläuterungen).

Vor einigen Tagen habe ich den falsch generierten JS-Code von TypeScript und AMD (UMD) -Bug erstellt (klicken Sie auf den Link, um eine detaillierte Erklärung des Problems anzuzeigen).

Ich habe eine Antwort von @yyx990803 bekommen , bin aber ein Neuling im JS und habe es vom ersten Mal nicht richtig verstanden.
Und wenn ich es jetzt verstehe, ist das Problem immer noch relevant.

Evan antwortete mir:

Es scheint nichts in Ihrer Konfiguration zu geben, das das Modul "vue" auf den UMD-Build vue.js verweist, den Sie selbst eingebunden haben. Der TS-Compiler löst es also aus node_modules/vue auf und verwendet das "main"-Feld in package.json, einem CommonJS-Build. Sie müssen die Zuordnung mithilfe von compilerOptions.paths in Ihrer tsconfig angeben.

Wenn ich also Evan richtig verstehe, dachte er, dass RequireJS die falsche Datei vue.js herunterlädt.
Der rechte ist für das UMD/AMD-Modulsystem, aber der TS-Compiler verweist auf die Datei vue.js für das CommonJS-Modulsystem. Deshalb hatte ich den Fehler.

Aber es ist nicht richtig. TS-Compiler verweisen nur auf

meine Seite/

und in meinem Fall ist es:

mySite/vue.js

egal um welche vue.js-Datei es sich handelt. Wenn dieser Link also keine vue.js enthält, wird der 404-Fehler angezeigt.

Außerdem versuche ich, die Hauptkonfiguration in node_modules/vue/package.json wie folgt zu ändern: "main": "dist/vue.js" und es gibt mir den gleichen Fehler.

Ich habe die Datei vue.js überprüft, die von RequireJS geladen wird, und es ist die richtige Datei . RequireJS parst es richtig, das Problem liegt in den Typisierungen.

Auch wenn ich den Import so mache (wie @Micene09 angeboten):

import { Vue } from "vue-property-decorator";

Beim Laden derselben vue.js-Datei in mySite/vue.js funktioniert alles einwandfrei.
Also, wenn ich dich richtig verstehe, bleibt das Problem bestehen.

Quelle

80LevelElf

Hilfreichster Kommentar

Ich bin auf das gleiche Problem gestoßen.

Nach meinem Verständnis sollte die Datei vue.js die Variable exports.default wie die vue-class-Komponente setzen.

vue-class-component.js (Zeile 192):
exports['default'] = Component$1;

Die vue-class-component Datei hat einen Sonderfall, um den fehlenden Standardexport aus Vue zu behandeln, weshalb sie funktioniert.

vue-class-component.js (Zeile 12):
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;

Leider gibt der TypeScript 2.5-Compiler keinen Sonderfall für den Umgang mit dem fehlenden Standard aus. TypeScript 2.7 hat jedoch eine neue Option ( esModuleInterop ), die dieses Problem behebt.

{
    "compilerOptions": {
        "module": "amd",
        "esModuleInterop": true,
        ...
    },
    ...
}

Wenn esModuleInterop auf true , enthält die Ausgabe eine Funktion namens __importDefault , die die fehlende Standardeigenschaft richtig behandelt.

var __importDefault = (this && this.__importDefault) || function (mod) {
  return (mod && mod.__esModule) ? mod : { "default": mod };
}
define(["require", "exports", "vue"], function (require, exports, vue_1) {
  "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  vue_1 = __importDefault(vue_1);
  var app = new vue_1.default({
        ...
  });
});

kashbeck am 29. Jan. 2018

👍3

Alle 3 Kommentare

Es tut mir leid, aber dies ist wirklich eine Frage außerhalb des Umfangs für ein sehr spezielles Setup, das in Problemen nicht gelöst werden sollte. Probleme beziehen sich nur auf Fehlerberichte, die von Vue selbst stammen.

yyx990803 am 4. Jan. 2018

@80LevelElf - Ich habe dies (

import { VueConstructor } from "vue";
const Vue = require("vue") as VueConstructor;  // cast as VueConstructor to get typings. 

const app = new Vue({
  template: "<h1>Hello World</h1>
});

@yyx990803 - Ich commonjs von TypeScript (kein Webpack). Eine Ähnlichkeit zwischen OP und mir besteht darin, dass wir beide die TypeScript-Option baseUrl . Beim Standardimport in TypeScript stimmt definitiv etwas nicht.

Ich benutze auch Vue 2.5.13. Ich richte SSR auf Node 8.9.3 und TypeScript 2.6 ein. Mein tsconfig.json sieht so aus:

{
  "compilerOptions": {
    "outDir": "build",
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "rootDir": "./src",
    "baseUrl": "./src",
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

Ich habe eine Reihe anderer Problemumgehungen ausprobiert, einschließlich des Versuchs, die Datei vue.esm.js über die Eigenschaft compilerOptions.paths zu laden, ohne Erfolg. Ich bekam genau den gleichen vue_1.default is not a constructor Fehler wie OP.

Ich habe hier eine Reproduktion zusammengestellt und eine neue Ausgabe eröffnet

marpstar am 5. Jan. 2018