Vue: تم إنشاء رمز JS بشكل خاطئ بواسطة TypeScript و AMD (UMD) - الإصدار 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 من TypeScript (بدون حزمة ويب). أحد أوجه التشابه بين OP و I هو أننا نستخدم الخيار TypeScript baseUrl . هناك شيء خاطئ بالتأكيد في الاستيراد القياسي في TypeScript.

أنا أيضًا أستخدم Vue 2.5.13. أقوم بإعداد SSR على Node 8.9.3 و TypeScript 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"
  ]
}

لقد جربت عددًا من الحلول الأخرى ، بما في ذلك محاولة تحميل ملف vue.esm.js عبر خاصية compilerOptions.paths ، ولكن دون جدوى. كنت أتلقى نفس الخطأ vue_1.default is not a constructor مثل OP.

لقد جمعت نسخة هنا وفتحت عددًا جديدًا

واجهتني نفس المشكلة.

من وجهة نظري ، يجب أن يقوم ملف vue.js بتعيين المتغير exports.default كما يفعل مكون vue-class.

vue-class-component.js (السطر 192):
exports['default'] = Component$1;

يحتوي ملف مكون فئة vue على حالة خاصة للتعامل مع التصدير الافتراضي المفقود من Vue ، وهذا هو سبب نجاحه.

vue-class-component.js (السطر 12):
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;

لسوء الحظ ، لا يقوم برنامج التحويل البرمجي TypeScript 2.5 بإخراج حالة خاصة للتعامل مع الوضع الافتراضي المفقود. ومع ذلك ، يحتوي TypeScript 2.7 على خيار جديد ( esModuleInterop ) يعمل على إصلاح هذه المشكلة.

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

مع تعيين esModuleInterop على true ، يحتوي الناتج على دالة تسمى __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({
        ...
  });
});