В этой статье будет полезно понимание однофайловых компонентов (SFC) Vue и диспетчера пакетов узлов (NPM).

Интерфейс командной строки фреймворка, или CLI, является предпочтительным методом формирования проекта. Он обеспечивает отправную точку для файлов, папок и конфигурации. Эти строительные леса также обеспечивают процесс разработки и сборки. Процесс разработки дает возможность видеть обновления, происходящие при редактировании проекта. В процессе сборки создается окончательная версия файлов, которая будет использоваться в производстве.

Установить и запустить Vue.js («Vue») можно с помощью тега сценария, который указывает на сеть доставки контента (CDN) Vue. Никакого процесса сборки или разработки не требуется. Но если вы используете однофайловые компоненты (SFC) Vue, вам необходимо преобразовать эти файлы во что-то, что может понять браузер. Файлы необходимо преобразовать в язык гипертекстовой разметки (HTML), каскадные таблицы стилей (CSS) и JavaScript (JS). В этом случае необходимо использовать процесс разработки и сборки.

Вместо того, чтобы полагаться на Vue CLI для создания каркаса нашего проекта и предоставления нам процесса разработки и сборки, мы создадим проект с нуля. Создадим собственный процесс разработки и сборки с помощью Webpack.

Что такое Webpack?

Webpack - это сборщик модулей. Он объединяет код из нескольких файлов в один. До Webpack пользователь включал тег скрипта для каждого файла JavaScript. Хотя браузеры медленно поддерживают модули ES6, Webpack по-прежнему является предпочтительным способом создания модульного кода.

Помимо того, что Webpack является сборщиком модулей, он также может преобразовывать код. Например, Webpack может взять современный JavaScript (ECMAScript 6+) и преобразовать его в ECMAScript 5. Хотя Webpack связывает сам код, он преобразует его с помощью загрузчиков и плагинов. Думайте о загрузчиках и плагинах как о надстройках для Webpack.

Webpack и Vue

Однофайловые компоненты позволяют нам собрать весь компонент (структуру, стиль и функцию) в одном файле. И большинство редакторов кода обеспечивают подсветку и анализ синтаксиса для этих SFC.

Обратите внимание, что файл заканчивается на .vue. Браузер не знает, что делать с этим расширением. Webpack с помощью загрузчиков и подключаемых модулей преобразует этот файл в HTML, CSS и JS, которые браузер может использовать.

Проект: создание приложения Hello World Vue с использованием однофайловых компонентов.

Шаг 1. Создайте структуру проекта

Самый простой проект Vue будет включать HTML, JavaScript и файл Vue (файл с расширением .vue). Мы поместим эти файлы в папку под названием src . Папка с исходным кодом поможет нам отделить код, который мы пишем, от кода, который в конечном итоге создаст Webpack.

Поскольку мы будем использовать Webpack, нам понадобится файл конфигурации Webpack.

Кроме того, мы будем использовать компилятор Babel. Babel позволяет нам писать код ES6, который затем компилируется в ES5. Babel - одна из тех «дополнительных функций» для Webpack. Babel также нужен файл конфигурации.

Наконец, поскольку мы используем NPM, у нас также будет папка node_modules и файл package.json. Они будут созданы автоматически, когда мы инициализируем наш проект как проект NPM и начнем установку наших зависимостей.

Для начала создайте папку с именем hello-world. Из командной строки перейдите в этот каталог и запустите npm init. Следуйте инструкциям на экране, чтобы создать проект. Затем создайте остальные папки (кроме node_modules ), как описано выше. Структура вашего проекта должна выглядеть так:

Шаг 2. Установите зависимости

Вот краткое изложение используемых нами зависимостей:

vue: фреймворк JavaScript.

vue-loader и vue-template-compiler: используются для преобразования наших файлов Vue в JavaScript.

webpack: инструмент, который позволит нам передать наш код через некоторые преобразования и объединить его в один файл.

webpack-cli: необходим для выполнения команд Webpack.

webpack-dev-server: хотя это и не требуется для нашего небольшого проекта (поскольку мы не будем делать никаких HTTP-запросов), мы все равно будем «обслуживать» наш проект с сервера разработки.

babel-loader: преобразуйте наш код ES6 в ES5. (Ему нужна помощь в следующих двух зависимостях.)

@ babel / core и @ babel / preset-env: Babel сам по себе ничего не делает с вашим кодом. Эти два «дополнения» позволят нам преобразовать наш код ES6 в код ES5.

css-loader: принимает CSS, который мы записываем в наших .vue файлах, или любой CSS, который мы можем импортировать в любой из наших файлов JavaScript, и разрешает путь к этим файлам. Другими словами, выясните, где находится CSS. Это еще один загрузчик, который сам по себе мало что сделает. Нам нужен следующий загрузчик, чтобы что-то сделать с CSS.

vue-style-loader: возьмите CSS, полученный из нашего css-loader, и вставьте его в наш HTML-файл. Это создаст и вставит тег стиля в заголовок нашего HTML-документа.

html-webpack-plugin: возьмите наш index.html и вставьте наш связанный файл JavaScript в заголовок. Затем скопируйте этот файл в папку dist .

римраф: позволяет нам удалять файлы из командной строки. Это пригодится, когда мы будем строить наш проект несколько раз. Мы будем использовать это для удаления любых старых сборок.

Давайте сейчас установим эти зависимости. В командной строке запустите:

npm install vue vue-loader vue-template-compiler webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env css-loader vue-style-loader html-webpack-plugin rimraf -D

Примечание. «-D» в конце отмечает каждую зависимость как зависимость разработки в нашем package.json. Мы объединяем все зависимости в один файл, поэтому для нашего небольшого проекта у нас нет производственных зависимостей.

Шаг 3: Создайте файлы (кроме нашего файла конфигурации Webpack).

До этого момента ничто не должно выглядеть слишком чуждым. Я сохранил каждый файл очень простым. Я добавил лишь минимум CSS и JS, чтобы увидеть наш рабочий процесс в действии.

Шаг 4: Указание Webpack, что делать

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

Ниже представлен файл конфигурации Webpack (webpack.config.js). Создайте этот файл в корневом каталоге проекта. Построчно мы обсудим, что происходит.

Строки 1 и 2: мы импортируем два подключаемых модуля, которые мы используем ниже. Обратите внимание, наши загрузчики обычно не нужно импортировать, только наши плагины. И в нашем случае для vue-loader (который мы используем в строке 9) также нужен плагин для работы (однако, например, Babel не работает).

Строка 4: Мы экспортируем нашу конфигурацию как объект. Это дает нам доступ к нему, когда мы запускаем команды Webpack.

Строка 5: Это наш входной модуль. Webpack нужно место для старта. Он просматривает наш main.js файл, а затем начинает анализировать наш код с этого момента.

Строки 6 и 7: это объект модуля. Здесь мы в первую очередь передаем массив правил. Каждое правило сообщает Webpack, как обрабатывать определенные файлы. Итак, хотя Webpack использует точку входа main.js, чтобы начать прочесывание нашего кода, он использует правила для преобразования нашего кода.

Строка 8 (правило): это правило указывает Webpack использовать babel-loader для любых файлов, заканчивающихся на .js . Помните, что Babel преобразует ES6 + в ES5.

Строка 9 (правило): это правило предписывает Webpack использовать vue-loader (и не забывать связанный плагин в строке 17) для преобразования наших .vue файлов в JavaScript.

Строка 10 (правило): Иногда нам нужно передать файл через два загрузчика. Как ни странно, Webpack будет передавать файл справа налево, а не слева направо. Здесь мы используем два загрузчика и говорим Webpack: «возьмите мой CSS из моего файла Vue или любых файлов JavaScript (css-loader) и вставьте его в мой HTML как тег стиля (vue-style-loader).

Строки 11 и 12: Закройте наш массив правил и объект модуля.

Строки 13: Создайте массив плагинов. Здесь мы добавим два необходимых нам плагина.

Строка: 14–16 (плагин): HtmlWebpackPlugin берет расположение нашего файла index.html и добавляет к нему наш связанный файл JavaScript с помощью тега сценария. Этот плагин также скопирует HTML-файл в нашу папку распространения, когда мы создадим наш проект.

Строка 17 (плагин): VueLoaderPlugin работает с нашим vue-loader для анализа наших .vue файлов.

Строка 18: Закройте массив плагинов.

Строка 19: Закройте экспортируемый объект Webpack.

Шаг 5: Настройка нашего файла package.json, чтобы мы могли запускать Webpack

Наша конфигурация завершена, теперь мы хотим увидеть наше приложение. В идеале, когда мы вносим изменения в наше приложение, браузер обновляется автоматически. Это возможно с webpack-dev-server.

Удалите test скрипт в нашем package.json файле и замените его скриптом для обслуживания нашего приложения:

Название этой команды - ваш выбор. Я решил называть свое serve, поскольку мы будем обслуживать наше приложение.

Из нашего терминала или командной строки мы можем запустить npm run serve, а он, в свою очередь, запустит webpack-dev-server --mode development.

--mode development - это то, что называется флагом или опцией. Мы не говорили об этом, но по сути это указывает Webpack, что вы находитесь в режиме разработки. Мы также можем передать --mode production, что мы и сделаем при сборке нашего проекта. Они не обязательно нужны для работы Webpack. Без них вы получите предупреждающее сообщение о необходимости предоставить режим при запуске Webpack.

Я говорю «обязательно требуется», потому что Webpack минимизирует наш код в рабочем режиме, но не в процессе разработки. Так что не думайте, что эти команды ничего не делают - они делают.

Давайте запустим npm run serve и посмотрим, что произойдет.

Когда мы запускаем npm run serve, мы получаем некоторый вывод в нашем терминале. И, если все пойдет хорошо:

А если немного прокрутить вверх:

В браузере укажите http://localhost:8080. Вы увидите сообщение Blue Hello World шрифтом Roboto.

Теперь давайте обновим проект и изменим сообщение на Hello Universe. Обратите внимание, что веб-страница обновляется автоматически. Это здорово, правда? Вы можете вспомнить обратную сторону?

Давайте немного изменим приложение и включим ввод, к которому мы привяжем переменную (с v-model). Мы выведем переменную в теге <h2> под полем ввода. Я также обновил раздел стилей, чтобы оформить сообщение. Наш файл App.vue должен выглядеть так:

Когда мы обслуживаем наше приложение, у нас будет вход с сообщением Hello World под ним. Входные данные привязаны к переменной message, поэтому по мере ввода мы меняем содержимое <h2>. Вперед, введите в поле ввода, чтобы изменить <h2>content.

Теперь вернитесь в свой редактор и под <h2>tag добавьте следующее:

<h3>Some Other Message</h3>

Сохраните свой App.vue и посмотрите, что произойдет.

h2, который мы только что обновили, введя наш ввод, вернулся к Hello World. Это связано с тем, что браузер действительно обновляется, а тег скрипта и страница загружаются снова. Другими словами, мы не могли поддерживать состояние нашего приложения. Это может показаться неважным, но когда вы тестируете свое приложение и добавляете в него данные, будет неприятно, если ваше приложение «перезагружается» каждый раз. К счастью, Webpack предлагает нам решение под названием Hot Module Replacement.

Замена горячего модуля - это плагин, предоставляемый самим Webpack. До этого момента мы не использовали сам объект Webpack в нашем файле конфигурации. Однако теперь мы импортируем Webpack, чтобы получить доступ к плагину.

В дополнение к плагину мы передадим в Webpack еще одну дополнительную опцию - опцию devServer. В этом варианте мы установим hot на true. Кроме того, мы внесем (необязательно) обновление в наш рабочий процесс сборки: мы автоматически откроем окно браузера при запуске npm run serve. Мы делаем это, устанавливая для open значение true, которое также находится внутри параметра devServer.

Обратите внимание, что мы импортировали Webpack, чтобы получить доступ к hotModuleReplacementPlugin. Мы добавили это в массив plugins, а затем сказали Webpack использовать его с hot: true. Мы открываем окно браузера автоматически, когда обслуживаем приложение с open: true.

Запускаем npm run serve:

Окно браузера должно открыться, и если вы откроете инструменты разработчика, вы должны заметить небольшое изменение в выводе. Теперь он сообщает нам, что включена горячая замена модуля. Давайте введем наш ввод, чтобы изменить <h2> контент. Затем измените тегh3 на One More Message.

Сохраните файл и посмотрите, что произойдет.

Браузер не обновляется, но наш <h3>change отражается! Сообщение, которое мы ввели во входные данные, остается, но h3 обновляется. Это позволяет нашему приложению сохранять свое состояние, пока мы его редактируем.

Шаг 7: Создание нашего проекта

Пока мы обслужили наше приложение. Но что, если мы хотим создать наше приложение, чтобы мы могли его распространять?

Если вы заметили, когда мы обслуживаем наше приложение, файлы не создаются. Webpack создает версию этих файлов, которые существуют только во временной памяти. Если мы хотим распространить наше приложение Hello World для нашего клиента, нам нужно построить проект.

Это очень просто. Как и раньше, мы создадим сценарий в нашем файле package.json, чтобы сообщить Webpack о необходимости создания нашего проекта. Мы будем использовать webpack в качестве команды вместо webpack-dev-server. Мы также передадим флаг --mode production.

Мы также сначала воспользуемся пакетом rimraf, чтобы удалить все предыдущие сборки, которые у нас могут быть. Мы делаем это просто rimraf dist.

dist - это папка, которую Webpack автоматически создает при сборке нашего проекта. «Дист» - это сокращение от «распространение», т. Е. мы «распространяем» код наших приложений.

Команда rimraf dist сообщает пакету rimraf удалить каталог dist. Убедитесь, что вы не rimraf src случайно!

Webpack также предлагает плагин, который будет выполнять этот процесс очистки, который называется clean-webpack-plugin. Я выбрал dist показать альтернативный способ.

Наш файл package.json должен выглядеть так:

Обратите внимание на три вещи:

  1. Я создал отдельный clean скрипт, чтобы мы могли запускать его независимо от нашего скрипта сборки.
  2. npm run build вызовет созданный нами независимый clean скрипт.
  3. У меня && между npm run clean и webpack. Эта инструкция гласит: «сначала запустите npm run clean, затем запустите webpack».

Построим проект.

npm run build

Webpack создает каталог dist, а наш код находится внутри. Поскольку наш код не выполняет HTTP-запросы, мы можем просто открыть наш index.html файл в браузере, и он будет работать должным образом.

Если бы у нас был код, который отправлял HTTP-запросы, мы бы столкнулись с некоторыми ошибками из разных источников при выполнении этих запросов. Чтобы он заработал, нам нужно запустить этот проект с сервера.

Давайте рассмотрим index.html, который Webpack создал в браузере и редакторе кода.

Если мы откроем его в нашем редакторе или посмотрим на исходный код в наших инструментах разработки, вы увидите, что Webpack внедрил тег скрипта. Однако в нашем редакторе вы не увидите стили, потому что тег стиля динамически внедряется во время выполнения с помощью JavaScript!

Также обратите внимание, что информация о нашей консоли разработки больше не присутствует. Это потому, что мы передали Webpack флаг --production.

Заключение

Понимание процесса сборки используемых вами фреймворков поможет вам лучше понять сам фреймворк. Потратьте некоторое время, чтобы попытаться создать Angular, React или другой проект Vue без использования соответствующих интерфейсов командной строки. Или просто создайте базовый сайт из трех файлов (index.html, styles.css и app.js), но используйте Webpack для обслуживания и создания производственной версии.

Спасибо за прочтение!

воз