От автора: для многих разработчиков Vue.js — это первая интерфейсная среда JavaScript, которую они изучили. Если о себе вы можете сказать то же самое, вероятно, у вас еще не было причины изучить взаимодействие Vue JS Webpack. Но по мере того, как продолжается работа с Vue, вы увидите, что Webpack снова и снова появляется в документации, примерах проектов и в отношении таких инструментов, как Vue CLI.
Webpack обещает отличные вещи для пользователей Vue:
Автоматизированный процесс разработки, который делает кодирование бриза
Мир удобных функций разработки, таких как любимые однопользовательские компоненты Vue
Оптимизация для вашего кода, чтобы сделать его быстрым и надёжным
Диапазон возможностей Webpack также объясняется тем, почему это вначале так пугает. Похоже, он делает так много вещей, что трудно понять, что это на самом деле.
Руководства Webpack становятся все более понятными в объяснении, но по-прежнему предполагается, что некоторые базовые знания все еще устанавливаются. В этой статье я попытаюсь дать вам их без слэнга, который в противном случае может вас смутить.
Пример проекта
Webpack помогает вам разрабатывать приложения JavaScript, поэтому для обсуждения мы должны иметь простой пример проекта. Ниже приводится то, о чем я расскажу в этой статье:
app.js
const app = new Vue({ el: '#app', data: { message: 'Hello World' } });
index.html
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> <title>Vue.js Project</title>
</head>
<body> <div id="app">{{ message }}</div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript" src="app.js"></script>
</body>
</html>
Зависимости
История Webpack начинается с некоторых замечаний относительно управления зависимостями JavaScript в HTML-документе. Под «зависимостями» я подразумеваю сторонние библиотеки, такие как Vue, jQuery или Lodash, или даже другие файлы сценариев из вашей собственной базы кода.
На самом деле, нет конкретного способа управления зависимостями в HTML-документе, который может гарантировать, что любые общие функции и переменные имеют глобальную область действия и что сценарии загружаются в правильном порядке.
Например, поскольку vue.js определяет глобальный Vue объект и загружается первым, мы можем использовать Vue объект в нашем app.js сценарии. Если какое-либо из этих условий не будет выполнено, скрипт сломается. Рассмотрим вариант, где мы пытаемся использовать Vue до его загрузки:
<script> console.log(Vue); // Uncaught ReferenceError: Vue is not defined </script> <script type="text/javascript" src="vue.js"></script>
В сложном веб-приложении этой системы недостаточно, потому что:
Глобальные переменные вводят возможности именования коллизий
Порядок загрузки скриптов является хрупким и его можно легко сломать по мере того, как приложение растет
Невозможно использовать оптимизацию производительности, такую как асинхронная загрузка скриптов
Модули
Решение проблемы управления зависимостями заключается в использовании модульной системы, в которой код модулируется и импортируется в другие скрипты. На протяжении многих лет разрабатывалось несколько различных модулей JavaScript-модулей, но модули ES — это система, которая теперь включена в стандарт JavaScript.
Вот простой пример ES-модулей:
moduleA.js
export default function(value) { return value * 2;
}
moduleB.js
import multiplyByTwo from './moduleA'; console.log(multiplyBy2(2)); // 4
Можем ли мы создать модуль Vue.js и избежать обсуждаемых проблем? Да! Файл сценария Vue.js, который используется непосредственно в браузере, является лишь одним из доступных сборок Vue. Существует также сборка модуля ES с именем vue.esm.browser.js, которая может быть использована в нашем примере проекта следующим образом:
app.js
import Vue from './vue.esm.browser.js';
const app = new Vue({ el: '#app', data: { message: 'Hello World' } });
Сценарий теперь не проблема, поскольку компилятор знает, что ему нужно дождаться, пока vue.esm.browser.js будет доступен, прежде чем он сможет запустить. Глобальные переменные не нужны только потому, что на них ссылается их имя файла.
Проблема в том, что модули ES не поддерживаются последовательно в браузерах. Фактически, ещё несколько месяцев назад они не поддерживались ни в одном браузере.
Если мы хотим использовать ES-модули или любую другую систему модулей JavaScript, нам нужно будет разрешить этот код во что-то, что можно надежно использовать в браузере. Введите Webpack.
Создание пакетов
Webpack — это инструмент Node.js, который автономно работает в вашей среде разработки. Webpack способен разрешать модули JavaScript в код, совместимый с браузером, в процессе, называемом «связывание».
Связывание начинается с «входящего файла». Webpack анализирует входящий файл, чтобы найти какие-либо зависимости. В примере проекта app.js является файлом записи и имеет только одну зависимость, Vue.js. В большинстве проектов их будет намного больше.
Затем Webpack анализирует зависимости, чтобы найти любые, какие только могут быть. Этот процесс продолжается до тех пор, пока не будут найдены все зависимости проекта.
Результатом является график зависимостей. Для примера проекта в график входят app.js, vue.js и несколько других зависимостей, требуемых Webpack.
Webpack использует этот график в качестве плана для объединения всего кода в один файл, совместимый с браузером. В примере проекта связанный файл заменит отдельные файлы сценариев vue.js и app.js в документе HTML:
index.html
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> <title>Vue.js Project</title>
</head>
<body> <div id="app">{{ message }}</div> <script type="text/javascript" src="bundle.js"></script>
</body>
</html>
Загрузчики
Webpack обеспечивает надежное решение проблемы управления зависимостями JavaScript. На этом основании появляются другие мощные, например, загрузчики.
Загрузчики позволяют Webpack преобразовывать файл до его вложения. Например, загрузчик Webpack Babel преобразует синтаксис JavaScript следующего поколения, такой как ES2015, в стандартный ES5. Это позволяет разработчикам писать код с использованием современных функций, но при этом поддерживать поддержку в старых браузерах.
Например, в app.js мы используем ES2015 const, который не поддерживается IE10:
app.js
const app = new Vue({ el: '#app', data: { message: 'Hello World' } });
Если используется загрузчик Webpack Babel, const будет преобразован в var до того, как будет добавлен в связку:
Bundle.js
...
var app = new Vue({ el: '#app', data: { message: 'Hello World' } });
...
Существует множество других загрузчиков, включая:
CSS loader
Sass loader
Typescript loader
Vue Loader (для однофайловых компонентов)
Запуск Webpack
Webpack использует декларативный файл конфигурации для описания каждого аспекта сборки. Эти файлы конфигурации, как известно, долго и трудно отслеживать, но для простого проекта вы должны иметь возможность понять суть:
webpack.config.js
module.exports = { // Entry file entry: './app.js', output: { // Output bundle filename: 'bundle.js' }, module: { rules: [ { // For .js files... test: /\.js$/, use: { // Use the Babel loader loader: 'babel-loader' } } ] }, resolve: { alias: { // Ensure the right Vue build is used 'vue$': 'vue/dist/vue.esm.js' } }
};
С созданным конфигурационным файлом Webpack можно запустить с помощью команды CLI:
$ webpack
По мере запуска Webpack выводит статистику о сборке в терминале. Многие из этих характеристик не будут иметь значения в данный момент, но вы хотя бы сможете увидеть, что для этой сборки потребовалось около трех секунд, а выходной файл bundle.js — 299 КБ.
Следующий шаг
Эта статья довольно далека от изучения Webpack, но цель заключалась в том, чтобы дать вам основу, которая, как мне кажется, отсутствует в официальных документах и других руководствах.
Большая польза, которую я надеюсь, вы получили, заключается в том, что Webpack является, прежде всего, модульным пакетом. Из этой базовой модели выходят все прочие функции Webpack.
На следующем этапе я рекомендую вам ознакомиться с разделом «Концепции» в документах Webpack. Удачи!
Автор: Anthony Gore
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.