Vue: टाइपस्क्रिप्ट और एएमडी (यूएमडी) द्वारा गलत जनरेट किया गया जेएस कोड - संस्करण 2

मुझे खेद है, लेकिन यह वास्तव में एक बहुत ही विशिष्ट सेटअप के लिए दायरे से बाहर का प्रश्न है जिसे मुद्दों में हल नहीं किया जाना चाहिए। समस्याएँ बग रिपोर्ट के लिए हैं जो केवल Vue से ही उत्पन्न होती हैं।

@ 80LevelElf - मैंने इसे (अभी के लिए) निम्नलिखित करके हल किया:

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 - मैं एक समान, लेकिन अलग स्थिति में हूं। मैं टाइपस्क्रिप्ट (कोई वेबपैक नहीं) से commonjs आउटपुट का उपयोग कर रहा हूं। ओपी और आई के बीच एक समानता यह है कि हम दोनों टाइपस्क्रिप्ट baseUrl विकल्प का उपयोग कर रहे हैं। टाइपस्क्रिप्ट में मानक आयात में निश्चित रूप से कुछ गड़बड़ है।

मैं भी Vue 2.5.13 का उपयोग कर रहा हूँ। मैं नोड 8.9.3 और टाइपस्क्रिप्ट 2.6 पर एसएसआर स्थापित कर रहा हूं। मेरा tsconfig.json इस तरह दिखता है:

{
  "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"
  ]
}

मैंने सफलता के बिना compilerOptions.paths संपत्ति के माध्यम से vue.esm.js फ़ाइल को लोड करने का प्रयास करने सहित कई अन्य समाधान की कोशिश की। मुझे ओपी के समान ही vue_1.default is not a constructor त्रुटि मिल रही थी।

मैंने यहां एक पुनरुत्पादन को एक साथ रखा एक नया अंक खोला है

मैं एक ही मुद्दे में भाग गया।

मेरी समझ से, vue.js फ़ाइल को exports.default वैरिएबल सेट करना चाहिए जैसे कि vue-class-component करता है।

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

Vue-वर्ग-घटक फ़ाइल में Vue से लापता डिफ़ॉल्ट निर्यात को संभालने के लिए एक विशेष मामला है, यही कारण है कि यह काम करता है।

vue-class-component.js (पंक्ति 12):
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;

दुर्भाग्य से, टाइपस्क्रिप्ट 2.5 कंपाइलर लापता डिफ़ॉल्ट को संभालने के लिए एक विशेष मामले को आउटपुट नहीं करता है। हालाँकि, टाइपस्क्रिप्ट 2.7 में एक नया विकल्प ( esModuleInterop ) है जो इस समस्या को ठीक करता है।

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

esModuleInterop को true esModuleInterop सेट करने के साथ, आउटपुट में __importDefault नामक एक फ़ंक्शन होता है, जो लापता डिफ़ॉल्ट संपत्ति को ठीक से संभालता है।

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({
        ...
  });
});