Как использовать Vue с Typescript, без сложной системы сборки? - PullRequest
Новая
       0

Как использовать Vue с Typescript, без сложной системы сборки?

0 голосов
/ 01 июня 2018

Я провел два дня, экспериментируя с этим, и пока не достиг никакого прогресса.У меня есть базовый веб-сайт ASP.NET Core, настроенный для Typescript 2.9.Я хочу, чтобы мой интерфейс был очень простым, только одно приложение на страницу, никаких сложных систем или компонентов сборки.

Я бы хотел, чтобы какая-то конфигурация работала как минимум.Это мой текущий файл tsconfig.json: 

{
  "compilerOptions": {
    "declaration": true,
    "mapRoot": "/js/",
    "module": "esnext",
    "removeComments": true,
    "sourceMap": true,
    "target": "esnext"
  },
  "compileOnSave": true

}

(обратите внимание, я пробовал модули es6, es5 и ни одного тоже)

затем, в моей папке wwwroot / js, яУ меня есть Site.ts, выглядит так: 

import { Vue } from "./types/vue";

var _mixin: any;
var _vue = new Vue({
    el: '#vueheader',
    mixins: [_mixin],
    data: {
    },
    methods: {},
    mounted: function () {
    },
});

и в папке wwwroot / js / types у меня есть 5 d.ts файлов из vue вместе с файлом vue.js.Машинопись правильно компилируется в файл js, но когда я захожу на главную страницу, я получаю сообщение об ошибке в chrome, говорящее «404, файл не найден / types / vue»

Вот скомпилированный Site.js: 

import { Vue } from "./types/vue";
var _mixin;
var _vue = new Vue({
    el: '#vueheader',
    mixins: [_mixin],
    data: {},
    methods: {},
    mounted: function () {
    },
});
//# sourceMappingURL=/js/Site.js.map

В моем html есть ссылка:

У кого-нибудь есть идеи?Пожалуйста, не просите меня использовать сложную систему сборки, такую ​​как webpack.Я не хочу раздувать процесс сборки с более чем 600 зависимостями.

1 Ответ

0 голосов
/ 11 июня 2018

Это на самом деле удивительно просто!Я основываю это на своем первом приложении в стиле Vue TodoMVC, которое использовало Require.js.Вы можете экстраполировать свой собственный проект.

Самый простой способ сделать это - использовать загрузчик, такой как Require.js или System.js, который не требует пакетирования - все, что вам нужно сделатькомпилируется с TypeScript.

Так как я использую Require.js и Vue, вот мой package.json

{
  "name": "vue-tutorial",
  "version": "1.0.0",
  "dependencies": {
    "@types/requirejs": "^2.1.28",
    "vue": "^2.1.4"
  }
}

Далее я собираюсь добавить tsconfig.json

{
    "compilerOptions": {
        "outFile": "./built/app.js",
        "noImplicitAny": true,
        "strictNullChecks": true,
        "noImplicitThis": true,
        "module": "amd",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "lib": [
            "dom", "es2015"
        ],
        "types": [
            "requirejs"
        ]
    },
    "include": [
        "src"
    ]
}

Давайте разберем это:

  • outFile: TypeScript эффективно объединит ваш исходный код в один файл (но не его зависимости!).
  • noImplicitAny, strictNullChecks, noImplicitThis: только некоторые конкретные опции --strict. Я настоятельно рекомендую вам включить как минимум.
  • module: amd: AMD - это формат модуля, который понимает Require.js.
  • moduleResolution: node: это позволяет TypeScript легко выбирать .d.ts файлы из node_modules.
  • esModuleInterop: это позволяет нам импортировать Vue с использованием современного синтаксиса.
  • lib: указывает стандартные API, которые вы ожидаете иметь во время выполнения.
  • types: .d.ts файлы для библиотек, которые мы не обязательно импортируем;мы не импортируем Require.js, потому что ожидаем, что он будет доступен глобально.

Теперь наш index.html: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello Vue!</title>
</head>

<body>
    <div id="app"></div>

    <script src="https://unpkg.com/requirejs@2.3.5/require.js"></script>
    <script src="./built/app.js"></script>
</body>

</html>

Давайте создадим наш первый компонент в src/components/GreetingComponent.ts: 

import Vue from "vue";

export default Vue.extend({
    template: `<div>Hello {{name}}!</div>`,
    props: ["name"],
});

Далее, давайте создадим index.ts: 

import Vue from "vue";
import GreetingComponent from "./components/GreetingComponent";

new Vue({
    el: "#app",
    template: `<greeting-component name="Steve"></greeting-component>`,
    components: {
        GreetingComponent
    }
});

И, наконец, давайте создадим загрузчик, который фактически импортирует ваш файл в require-config.ts: 

require.config({
    paths: {
        // JS library dependencies go here.
        // We're using a CDN but you can point to your own assets.
        "vue": "https://unpkg.com/vue@2.5.16/dist/vue",
    }
});
require(["index"]);

Для объяснения:

  • paths сообщит Require.js, где искать Vue и другие библиотеки, когда вы импортируете их с пустым путем.Вы можете настроить, где Require.js будет искать Vue, но помните, что вы должны опустить .js в конце URL.
  • , который вызывает require в конце, загрузит ваш indexмодуль для запуска вашей программы.

Запустите tsc, откройте index.html, и все должно просто работать!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...