RequireJS для приложений Vue.js + Asp.NETCore + TypeScript

[mayorovp]

default не имеет отношения к модулям AMD. Эта штука появилась в ES6-модулях и оттуда перекочевала в TypeScirpt-модули.

На самом деле вы просто неправильно подключаете Vue. Вы используете вот такую конструкцию:

import Vue from "vue";

Эта конструкция использует default import, который, в свою очередь, выливается в обращение к свойству default.

А надо делать — вот так:

import * as Vue from "vue";

[mayorovp]

Ну или можно использовать файл vue.esm.js вместо vue.js: там делается default export вместо простого присваивания.

[edward_nsk]

Спасибо. Попробую поковырять этот вариант.

Хотя «в лоб» не проходит, при выполнении ошибка:
Uncaught (in promise) Error: Unable to dynamically transpile ES module

A loader plugin needs to be configured via `SystemJS.config({ transpiler: 'transpiler-module' })`.

Instantiating cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.esm.js

[edward_nsk]

RequireJS, гад такой, вообще отказался vue.esm.js переваривать:
vue.esm.js:10809 Uncaught SyntaxError: Unexpected token export

[edward_nsk]

Попробовал import * as Vue from «vue»;
Компилятор TS выдает ошибки.
Может подскажете, что ещё подкрутить?

TryVue D:\Git\starter-vue\TryVue\ClientApp\index.ts 5
Ошибка TS2351 Build: Невозможно использовать new с выражением, у типа которого нет сигнатуры вызова или конструктора.

TryVue D:\Git\starter-vue\TryVue\ClientApp\components\Hello.ts 4
Ошибка TS2339 Build: Свойство «extend» не существует в типе «typeof „D:/Git/starter-vue/TryVue/node_modules/vue/types/index“».

[mayorovp]

А, ну там еще тайпинги поменять надо…

[edward_nsk]

Компилятор, вроде, берет родные тайпинги здесь: «node_modules/vue/types/index». Если надо что-то добавить — я готов попробовать.

Может есть ссылка на работающий пример с TypeScript для случая: import * as Vue from «vue»?

[mayorovp]

Ох, там там еще и тайпинги родные?.. Значит, я невнимательно читал вашу прошлую статью...

Вот, нашел еще одно решение. Нужна настройка "esModuleInterop": true.

[edward_nsk]

Сработало! Спасибо!
Проект с amd-модулями работает без заплатки и через SystemJS, и через RequireJS. В файлах TypeScript ничего менять не надо, достаточно поменять tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "strict": true,
    "module": "amd",
    "outFile": "wwwroot/dist/main.js",
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": [
    "./ClientApp/**/*.ts"
  ]
}

Заплатку можно убирать. Получается зря гланды вырывал не через то место.

[edward_nsk]

На всякий случай уточняю, что «esModuleInterop» появился в версии TypeScript 2.7. На ноуте не обновился и некоторое время не мог понять, почему работавшее приложение вдруг перестало собираться.

[edward_nsk]

В статью внесено дополнение под заголовком UPD 01.03.2018 с учетом предложенного решения @mayorovp.

Также все необходимые изменения внесены в решение VS2017 на github.