Vue: TypeScript 및 AMD(UMD)에서 잘못 생성된 JS 코드 - 버전 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 -- 저도 비슷하지만 다른 상황입니다. TypeScript의 commonjs 출력을 사용하고 있습니다(웹팩 없음). OP와 I의 한 가지 유사점은 둘 다 TypeScript baseUrl 옵션을 사용하고 있다는 것입니다. TypeScript의 표준 가져오기에 확실히 문제가 있습니다.

나도 Vue 2.5.13을 사용하고 있습니다. 노드 8.9.3 및 TypeScript 2.6에서 SSR을 설정하고 있습니다. 내 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 파일을 로드하는 것을 포함하여 여러 다른 해결 방법을 시도했지만 성공하지 못했습니다. OP와 똑같은 vue_1.default is not a constructor 오류가 발생했습니다.

나는 여기에 재현을 모아서 새로운 문제를 열었습니다.

나는 같은 문제에 부딪쳤다.

내 이해에서 vue.js 파일은 vue-class-component와 같이 exports.default 변수를 설정해야 합니다.

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

vue-class-component 파일에는 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({
        ...
  });
});