Vue: Código JS generado incorrectamente por TypeScript y AMD (UMD) - versión 2

Creado en 4 ene. 2018 · 3Comentarios · Fuente: vuejs/vue

Versión

2.5.13

Enlace de reproducción

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

pasos para reproducir

Simplemente ejecute la aplicación abriendo el
/VueProblemApp/VueProblemApp/index.html archivo y verá el error en la consola.

¿Lo que es esperado?

El compilador de TypeScript debería tomar las mecanografías de Vue y producir el código correcto.

¿Qué está pasando realmente?

El código JS resultante no es correcto (ver comentarios para una explicación detallada).

Hace varios días, creé el código JS generado incorrectamente por el error

Recibí una respuesta de @ yyx990803 , pero soy un novato en JS y no lo hice bien desde la primera vez.
Y si lo entiendo ahora mismo, el problema sigue siendo relevante.

Evan me respondió:

Parece que no hay nada en su configuración que apunte el módulo "vue" a la compilación de UMD vue.js que incluyó usted mismo. Entonces, el compilador de TS lo está resolviendo desde node_modules / vue y usando el campo "principal" en package.json, que es una compilación de CommonJS. Necesita especificar el mapeo usando compilerOptions.paths en su tsconfig.

Entonces, si entiendo bien a Evan, pensó que RequireJS descargaba el archivo vue.js incorrecto.
El de la derecha es para el sistema de módulos UMD / AMD, pero el compilador TS hace una referencia al archivo vue.js para el sistema de módulos CommonJS. Es por eso que obtuve el error.

Pero no es correcto. El compilador de TS solo hace referencia a

mi sitio/

y en mi caso es:

mySite / vue.js

no importa qué archivo vue.js sea. Entonces, si no hay vue.js en este enlace, habrá un error 404.

Además, trato de cambiar la configuración principal en node_modules / vue / package.json así: "main": "dist / vue.js" y me da el mismo error.

He comprobado el archivo vue.js que está cargando RequireJS y es el archivo correcto . RequireJS analizarlo correctamente, el problema está en las mecanografías.

Además, si hago la importación de esta manera (como @ Micene09 ofrecido):

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

Todo funciona bien cargando el mismo archivo vue.js en mySite / vue.js.
Entonces, si lo hago bien, el problema aún permanece.

Fuente

80LevelElf

Comentario más útil

Me encontré con el mismo problema.

Según tengo entendido, el archivo vue.js debería establecer la variable exports.default como lo hace el componente vue-class-component.

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

El archivo vue-class-component tiene un caso especial para manejar la exportación predeterminada que falta de Vue, razón por la cual funciona.

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

Desafortunadamente, el compilador de TypeScript 2.5 no genera un caso especial para manejar el valor predeterminado que falta. Sin embargo, TypeScript 2.7 tiene una nueva opción ( esModuleInterop ) que soluciona este problema.

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

Con esModuleInterop establecido en true , la salida contiene una función llamada __importDefault , que maneja correctamente la propiedad predeterminada que falta.

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 en 29 ene. 2018

👍3

Todos 3 comentarios

Lo siento, pero esta es realmente una pregunta fuera de alcance para una configuración muy específica que no debería resolverse en problemas. Los problemas son para informes de errores que se originan solo en Vue.

yyx990803 en 4 ene. 2018

@ 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 - Estoy en una situación similar, pero diferente. Estoy usando commonjs salida de TypeScript (sin paquete web). Una similitud entre OP e I es que ambos estamos usando la opción TypeScript baseUrl . Definitivamente, algo está mal con la importación estándar en TypeScript.

Yo también estoy usando Vue 2.5.13. Estoy configurando SSR en Node 8.9.3 y TypeScript 2.6. Mi tsconfig.json ve así:

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

Probé una serie de otras soluciones, incluido intentar cargar el archivo vue.esm.js a través de la propiedad compilerOptions.paths , sin éxito. Recibía exactamente el mismo error de vue_1.default is not a constructor que OP.

He reunido una reproducción aquí y he abierto un nuevo número.

marpstar en 5 ene. 2018