Использование однофайлового компонента Vue.js без сборщиков модулей

К концу этой статьи вы сможете использовать однофайловый компонент Vue.js в своем веб-проекте без использования каких-либо сборщиков модулей, таких как Webpack.

Оглавление:

• "Вступление"
• Быстрая и грязная установка (установка TLDR)
• 1. Начало работы и установка
• 2. Конфигурация
• 3. Создайте файлы приложения
• Предостережения

Вступление

В 2019 году jQuery по-прежнему остается наиболее широко используемым веб-фреймворком в сети, несмотря на то, что он занимает 2-е место как самый страшный интерфейсный веб-фреймворк.

Одним из ключевых факторов, почему так много разработчиков по-прежнему придерживаются jQuery, является тот факт, что комплекты модулей, такие как Webpack и Rollup, заведомо сложны в настройке и обслуживании.

Когда два года назад я перешел с jQuery на Vue.js, моей мотивацией было использование однофайлового компонента (SFC) Vue, это было для меня главным коммерческим аргументом.

Однофайловый компонент Vue (SFC) - это единственная наиболее мощная функция онбординга фреймворка, которая значительно упрощает процесс адаптации с jQuery на Vue, НАМНОГО, НАМНОГО по сравнению с другими фреймворками.

Однако тогда было невозможно использовать Vue SFC без Webpack. Теперь очень возможно использовать Vue SFC без сборщика модулей. Но прежде чем мы начнем, давайте посмотрим, как просто выглядит однофайловый компонент.

В восторге? Теперь я собираюсь показать вам, как мы можем начать новый проект с использованием однофайлового компонента Vue без использования каких-либо сборщиков модулей. Давайте начнем.

Быстрая и грязная установка (установка TLDR)

Vue упрощает нам использование его в существующем приложении. Если вы хотите быстро погрузиться в самую гущу событий, не беспокоясь о том, как поддерживать код (например, на хакатоне), мы можем добиться этого, используя всего два (2) файла.

.
├── index.html
└── js
    └── components
        └── myComponent.vue

Давайте разберем код в приведенной выше сути.

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>

Мы загружаем vue и http-vue-loader из тега скрипта через unpkg. Unpkg.com - это CDN для всего в npm.

• Https://unpkg.com/vue - загружает стандартную vue.js библиотеку, которая содержит среду выполнения + компилятор для фреймворка Vue. Это наш выбор.
• Https://unpkg.com/http-vue-loader - Эта библиотека представляет собой плагин Vue (секретный соус), который будет обрабатывать .vue файлы в нашем проекте.

<div id="app">
  <span>Hello</span>
  <app-world></app-world>
</div>

Эта часть создает HTML-код, необходимый для монтирования нашего компонента Vue. Это позволит Vue создать дерево компонентов из div#app. Наше приложение будет содержать только один компонент с именем app-world. Вы можете создать столько, сколько захотите позже.

new window.Vue({
  el: '#app',
  components: {
    'app-world': window.httpVueLoader('/js/components/AppWorld.vue')
  },
})

С window.Vue и window.httpVueLoader, прикрепленными к глобальной (оконной) области. Вот как мы инициализируем новый корневой экземпляр Vue и монтируем его на #app. Мы собираемся использовать httpVueLoader для загрузки компонента AppWorld.vue, используя действительный путь http. Наш компонент может позже использоваться как <app-world> в HTML.

AppWorld.vue будет содержать все необходимое для рендеринга выделенного слова «World» и записи «Hello World» в консоль инспектора.

Далее, это просто типичный Vue SFC, посмотрите, как поддерживается функция с ограниченным объемом. Обратите внимание, что я использую module.exports вместо export default. Это связано с тем, что httpVueLoader еще не разрешает модули, требуемые с использованием синтаксиса export.

Просто запустите этот проект с помощью расширения Веб-сервер для Chrome и поздравляю! Вы загрузили свой первый Vue SFC, даже не касаясь Webpack!

Такая установка идеально подходит для хакатонов, взломов и тестов. Однако для реальных современных приложений мы хотим контролировать версии наших зависимостей и каждый раз загружать правильную версию. Для этого мы воспользуемся пакетом npm под названием @pika/web (Pikaweb).

Давайте сделаем это на этот раз немного элегантнее.

1. Начало работы и установка

Pikaweb упрощает загрузку зависимостей, поддерживающих модули ES из node_modules. Давайте начнем новый проект с npm init и установим наши зависимости.

npm init
npm install -D @pika/web
npm install -S vue http-vue-loader

2. Конфигурация

Pikaweb по умолчанию будет использовать любой модуль ES (ESM), установленный вашими зависимостями. Часто это не то, что нам нужно, поэтому давайте определим пути к правильным файлам распространения в наших зависимостях. В вашем package.json файле. Добавьте в конце следующее свойство:

{
  "name": "My Version Controlled Project"
  "dependencies": { ... }
  "devDependencies": { ... }
  "@pika/web": {
    "webDependencies": [
      "vue/dist/vue.esm.browser.js",
      "http-vue-loader/src/httpVueLoader.js"
    ]
  }
}

Объяснение

vue.esm.browser.js - это новый тип распространения, представленный в Vue 2.6, который позволяет импортировать Vue как ESM, вместо этого используйте vue.esm.browser.min.js в производстве.

Затем файл dist для http-vue-loader записывается в UMD. Мы не можем напрямую использовать их как ESM. Чтобы решить эту проблему, Pikaweb использует Rollup, который использует rollup-plugin-commonjs для преобразования файла в ESM. Там творится какая-то магия. Давай просто покатаемся с этим 😏.

После обновления файла package.json запустите Pikaweb в своем терминале следующим образом:

npx @pika/web

Это скопирует ваши зависимости, указанные в package.json, в папку web_modules. В терминале должно получиться что-то вроде этого:

3. Создайте файлы приложения.

Это очень похоже на проект хакатона ранее. За исключением того, что на этот раз у вас будет контроль версий всех зависимостей с помощью npm. В любом случае давайте создадим файлы.

.
├── package.json
├── node_modules
├── web_modules
├── index.html
└── js
    ├── app.js
    ├── components
        └── myComponent.vue

Прежде чем мы перейдем к коду, помните, что Pikaweb копирует наши зависимости в виде модулей ES в папку web_modules. Чтобы использовать их, мы должны вызвать наш скрипт с type=”module”, например:

<script type="module" src="path/to/file"></script>

Это позволяет нам загружать файл как модуль, использующий синтаксис import/export в нашем коде.

Давайте продолжим и отредактируем наш index.html файл.

Обратите внимание, что мы переместили весь наш код javascript в app.js и импортировали его как модуль. Все это возможно благодаря type=”module”. Вот как будет выглядеть app.js.

Мне просто нравится тот факт, что мы можем использовать модули ES в вечнозеленых браузерах прямо сейчас. Прощай, спагетти, код jQuery.

AppWorld.vue остается прежним.

Вот и все. Загрузите его с помощью веб-сервера для Chrome, и вы должны получить тот же результат, что и раньше.

Если вы новичок в Vue.js, вы можете не получить блок текста, в котором говорится:

«Вы используете Vue в режиме разработки»

Это результат работы vue-devtools. Незаменимый инструмент разработки, если вы разрабатываете на Vue. Вы можете скачать его из Google Chrome.

Пришло время заняться взломом и изучить новые функции, предоставляемые библиотекой Vue.js. Если вы застряли, я установил пример на Github в качестве справочника. Загрузите или клонируйте его, чтобы сразу приступить к работе.

Предостережения

На момент написания около 85% браузеров в мире поддерживают ESM. Этот пример не будет работать в IE11.

Здесь также не будет никакой пользы для разделения кода. Но, как сказал Пикавеб:

«В 2019 году вам следует использовать упаковщик, потому что вы этого хотите, а не потому, что вам это нужно».

С большими приложениями я все равно хотел бы использовать сборщик модулей, в основном потому, что Webpack и Rollup - действительно хорошее программное обеспечение, и я рекомендую их. Я использую Webpack в своих проектах ежедневно.

Это оно!

Спасибо за прочтение. Я надеюсь, что принес пользу и помог вам. Хотелось бы услышать, что вы думаете об этом подходе, и были бы рады услышать ваши предложения о том, как его улучшить.

Если вам нравится контент, помогите мне поделиться им. Вы также можете связаться со мной через социальные сети:

• Твиттер
• Инстаграм