Хотя здесь говорится о VueJS. Я подозреваю, что он будет работать и с любым другим языком JavaScript, таким как Angular или React.


Я изучаю Vue.js и люблю его. Зная, что у меня на подходе более крупное приложение, и что я хотел начать использовать TypeScript. Похоже, сейчас самое время это сделать. На данный момент у меня есть четкое представление о Vue, но я не могу найти никакой документации (более 2 недель нахождения точных, МИНИМАЛЬНЫХ требований) о том, как настроить TS и фактически запустить его.

Вот пример кода HTML и Vue, который работает с использованием только тегов сценария и обычного JavaScript.

HTML

<div id="app">
  <h4>{{ Value }}</h4>
</div>

@section Scripts {
  <script src="~/lib/vue/vue.js"></script>
  <script src="~/js/test.js"></script>
}

JavaScript - test.js

var app = new Vue({
  el: "#app",
  data: {
    Value: "Hello there"
  }
});

Это работает и производит Hello there на странице.

Настройка TypeScript

Это кажется прямым, у меня есть папка TypeScripts под моей папкой js, где будут "исходные" файлы .ts. Выходные файлы будут находиться в папке js как файлы .js. Вот мой tsconfig.json, расположенный в папке TypeScripts:

{
  "compileOnSave": true,
  "compilerOptions": {
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../",
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "module": "amd"  // <-- Should this be used?
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

Это работает, и я получаю файлы .js каждый раз, когда сохраняю файлы .ts.

Однако теперь я хочу включить Vue в .ts, используя его способами, которые я видел в видеороликах, а также в коде в Интернете. Следующий код компилируется без ошибок:

JavaScript - ES6 - test2.ts

const Vue = require("vue")
const app = new Vue({
  el: "#app",
    data: {
      Value: "Hello there"
    }
})

Теперь я обновляю HTML следующим образом:

HTML

<div id="app">
  <h4>{{ Value }}</h4>
</div>

@section Scripts {
  <script src="~/js/test2.js"></script>
}

Я перезагружаю страницу и получаю только разметку {{ Value }}. Плюс ошибка JavaScript: Uncaught ReferenceError: require is not defined.

Это кажется достаточно простым, я полагаю, я просто добавляю следующую строку в раздел Scripts и удаляю единственную ссылку на файл test2.js:

@section Scripts {
  <script src="~/lib/require.min.js" data-main="/js/test2.js"></script>
}

Перезагрузите, и теперь я получаю: Uncaught Error: Module name "vue" has not been loaded yet for context: _. Use require([]), который ссылается на это, но теперь этот код похоже, отличается от того, как должен выглядеть файл .ts.

Файл ES6 Test2.ts , похоже, используется для программирования. То, как он хочет, чтобы я написал инструкцию require в приведенной выше ссылке, кажется гораздо более подробным и не отображается ни в каких образцах кода, которые я видел. Так что я, должно быть, что-то упускаю. Если это поможет, значит, загрузки Vue и Require были получены из моего файла package.json (npm), который выглядит следующим образом:

"devDependencies": {
  "@types/node": "^9.4.7",
  "requirejs": "^2.3.5",
  "vue": "^2.5.16"
  ...
}

И мой bundleconfig.json, который помещает их в папки wwwroot/lib, куда они должны идти.

{
  "outputFileName": "wwwroot/lib/require.min.js",
  "inputFiles": ["node_modules/requirejs/require.js"]
},
{
  "outputFileName": "wwwroot/lib/vue/vue.js",
  "inputFiles": [ "node_modules/vue/dist/vue.js" ]
}

Я должен поверить, что я так близок к этому. Возможность писать код в более современных версиях ES - это здорово. Я просто не смог найти нужный кусок головоломки, чтобы сложить все воедино.

3
Grandizer 14 Мар 2018 в 18:11

1 ответ

Лучший ответ

Основная проблема выше, потому что на первом примере «простого JavaScript» вы вообще не используете модули. Вы загружаете библиотеку Vue непосредственно на своей странице, что создает глобальный объект Vue, а затем ваш скрипт - глобальный (I.E. не модуль) и ссылается на объект Vue напрямую.

Для файла test2.ts вы упоминаете, что это ES6, но затем вы «требуете» в библиотеке Vue. Это означает, что код теперь пытается использовать модули, но модули CommonJS, а не модули ES6. (Где бы вы написали что-то вроде import Vue from "vue"). Это означает, что во время выполнения потребуется загрузчик (например, библиотека require.js, которую вы пытаетесь использовать), которая могла бы работать при правильной настройке, но обычно вам нужно что-то вроде WebPack для упаковки Vue. .js и ваш код в отдельный пакет, который страница загружает во время выполнения.

Примечание. Отредактированный абзац ниже

Я создал образец проекта ASP.NET Core, показывающий, как настроить TypeScript и WebPack для создания пакета для каждой страницы с использованием глобального объекта Vue.js через тег скрипта. Я поместил в него обширный файл readme, чтобы объяснить все его действия. Вы можете увидеть его на странице https://github.com/billti/SimpleVueApp. Если у вас есть дополнительные отзывы, я буду продолжать обновлять его, чтобы сделать его лучше / понятнее.

Тем не менее, когда вы углубляетесь в Vue, следует помнить об одном ограничении Visual Studio. В настоящее время нет полной поддержки файлов .vue (известных в документации как «компоненты с одним файлом»). Под «обширной поддержкой» я подразумеваю то, что эти файлы имеют определенный контекст, который мы не делаем прямо сейчас для обеспечения хорошего IntelliSense (т.е. списки завершения, ошибки, всплывающие подсказки и т. Д.). Кроме того, HTML-файлы в Visual Studio (которые вы открываете как файлы .vue) также поддерживают только простой CSS в тегах <style> и простой JavaScript в тегах <script> в настоящее время, тогда как с правильным Vue и настройки WebPack, вы можете делать такие вещи, как писать МЕНЬШЕ кода прямо в тегах стиля и писать TypeScript прямо в тегах сценария. Моя команда сейчас занимается этим и надеется улучшить это в ближайшем будущем.

Сообщите мне, если что-то из этого непонятно. Рад помочь в дальнейшем.

1
Bill Ticehurst 22 Мар 2018 в 00:28