Автор оригинала: Anthony Gore.
Одна из новых функций, прибывающих в Vue версии 2.6, является включением Модуль ES Browser Build , позволяя вам загрузить Vue на вашей странице, как это:
Это означает, что вы можете написать модульные приложения Vue, которые будут работать в браузере без шага сборки (в поддерживаемых браузерах, конечно).
Давайте исследуем причины этой функции и посмотрите, как его использовать.
Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js 2019/02/05.
Немного фона на модулях JavaScript
Когда был создан JavaScript, большинству людей не было очевидно, что оно закончится самым популярным языком программирования в мире.
В основном это было предназначено для запуска всплывающих всплывающих окон и мигающего текста, поэтому предполагалось, что написание всего кода в одном сценарии будет достаточно.
Но в этой эпоху Node.js и Mega SPAS, приложения JavaScript могут иметь сотни зависимостей и тысяч строк кода.
Для разработки масштабированного приложения, как это, практически требуется, чтобы код можно разделить на модули, чтобы обеспечить масштабируемую способ для импорта зависимостей, выполнить поддержание кода и обеспечить эффективность.
Хотя чрезвычайно полезные, модули системы и бундалы стали очередной сложной областью веб-разработки.
В конце концов, были созданы системы модуля JavaScript, изначально для Node.js. Корпус использования для модулей для сторон с клиентами был также прочным, но сложность заключается в том, что браузеры должны были бы их поддерживать.
Модуль браузера Погрузчики попытались решить эту проблему, но преобладающее решение состояло в том, чтобы компилировать модульный JavaScript обратно в недугулярную форму с использованием модуля Bundler, как WebPack или Rollup.
Модули были наконец добавлены в стандарт ECMA в ES2015, а в 2019 году современные браузеры поддерживают ES Modules, что позволяет писать модульный JavaScript, который работает непосредственно в браузере без необходимости для компиляции.
Вот как это сделать:
index.html (сторона клиента)
utils.mjs (сторона сервера)
export function addTextToBody(text) {
const div = document.createElement('div');
div.textContent = text;
document.body.appendChild(div);
}
Пример кода от Модули Ecmascript в браузерах Джейк Арчибальд.
Vue.js строит
Давайте изменим прикрепление на мгновение и обсудим VUE сборки.
Поскольку существует ряд различных сред и использовать случаи использования для библиотеки Vue.js, поэтому существует ряд «сборки».
Например, если вы хотите использовать Vue непосредственно в браузере, вы можете использовать сборку «UMD»:
index.html.
Создание UMD объявляет объект VUE в глобальном пространстве имен на глобальном пространстве, что делает его доступным для любого сценария, объявленного после нагрузки Vue Script и Parsed.
Это «классический» способ включения библиотеки JS в проекте, но он имеет ряд пониженных условий E.G. Сценарии должны быть загружены в порядке их использования.
Но это удобно для быстрой прототипирования, так как он не требует шага сборки.
Vue как модуль
Существуют также VUE сборки, которые экспортируют Vue в качестве модуля (оба модуля Commonjs и модуль ES).
Эти модульные сборки должны использоваться в комплекте, например, WebPack. Например, пользователи создадут «входной файл»:
app.js.
import Vue from "vue"; new Vue();
И WebPack будет принимать модуль сборки Vue и компилировать его в один файл сборки, скажем, /dist/bundle.js , который получает подержанную книгу, как это:
index.html.
Использование Vue в качестве модуля в браузере
В настоящее время, если вы попытаетесь использовать модуль Vue ES в браузере, как это:
index.html.
Это не будет работать. Конечно, это загрузится, но вы будете встречаться с ошибкой консоли, как это:
Uncaught formaterror: процесс не определен
Это потому, что модуль VUE ES был предназначен только для использования в Bundler. Создание включенных ссылок на глобалы Node.js, как Процесс , поскольку они помогут оптимизировать комплектную версию Vue, и будут разбиты в процессе соединения.
Что касается V2.6.0-Beta1, теперь в пакете Vue есть новая сборка vue.esm.browser.js Отказ
Как использовать модуль браузера
Эта новая сборка Vue может быть загружена в браузер без бабки. Вот пример:
index.js.
Vue.js ESM
{{ message }}
app.js.
import Vue from './vue.mjs';
new Vue({
el: '#app',
data: {
message: 'Hello Vue 2.6.0-beta1 ESM Browser Build!'
}
});
Чтобы сделать эту работу, вам понадобится сервер, который может статически служить показанным файлам. Vue.mjs должен быть псевдонимым к файлу node_modules/vue/dist/vue.esm.js Отказ
Используя .mjs Расширение не требуется, но Эта статья Google разработчиков рекомендует это Различать модули браузера из узлов модулей)
Отступать
Если вы собираетесь использовать модуль ES Build, вы процитируете необходимость предоставить загрязнение, так как большинство браузеров еще не поддерживают модули ES.
Нет проблем – вы можете настроить очень простой конфигурацию WebPack для BUBLE THE CODE:
webpack.config.js.
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
// add Babel here if needed
},
resolve: {
alias: {
'./vue.js': './node_modules/vue/dist/vue.esm.browser.min.js'
}
}
};
Пакет теперь может быть загружен на странице, используя Nomodule атрибут. Браузеры, которые поддерживают модули, не будут загружать Nomodule Скрипт, в то время как браузеры, которые не распознают модули, будут пропущены первые два сценария и загружать только загрязнение.
index.html.
Я написал об этом более широко в статье с 2017 года под названием Vue.js Одно файл JavaScript Компоненты в браузере Отказ
Что выгодно использует Vue как модуль ES?
После того, как все это сквозь статью, вы можете разочарованы на ответе: не так много.
Причина в том, что модули браузера ES все еще менее исполняются, чем Code-Split Classic Scripts. И поскольку вам все еще придется использовать Bundler для провисания, Teamprctry транспитальный, дерево встряхивание и т. Д., Это не так упростить вашу настройку.
В то время как я не разработчик плагина WordPress, мне сказали, что модуль браузера может быть полезен там, поскольку один блог WordPress может иметь несколько плагинов с конфликтующими версиями Vue. Сценарий загрязняет глобальное пространство имен, где не будет модуль.
Но если у вас нет этого использования, почему беспокоит модули браузера?
Вот несколько (по общему признанию абстрактных) причин:
Во-первых, не очень хорошо иметь мир разработки JavaScript полностью, опираясь на WebPack и Rollup, так как это значительное узкое место и уязвимая точка отказа.
Во-вторых, имея родное, стандартизированное решение будет упростить разработку веб со временем. Мы можем устанавливать все конкурирующие модульные системы, которые использовались в прошлом. Возможно, даже WebPack и скалит пройдут спокойно в ночь, как Стандартизированное соединительное решение Предлагается теперь, когда модули были стандартизированы.
Наконец, реализация браузера модулей ES – это платформа для создания. Прямо сейчас соединяется как классический скрипт, лучше, но это не значит, что это всегда будет. Проверьте Что дальше для модулей JS Для некоторых особенностей того, что планируется Google.
Если вы знаете какие-либо другие случаи использования для модулей браузера, оставьте комментарий.
Стать старшим Vue Developer в 2020 году.
Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.
Учить больше