Новое в Vue: сборка браузера модулей ES

Одной из новых функций, появившихся в Vue версии 2.6, является включение Сборка браузера модуля ESчто позволит вам загрузить Vue на вашу страницу следующим образом:

<script type="module">
  import Vue from 'https://unpkg.com/vue@2.6.0/dist/vue.esm.browser.min.js';
  new Vue({
    ...  
  });
</script>

Это означает, что вы можете писать модульные приложения Vue, которые будут работать в браузере без этапа сборки (конечно, в поддерживаемых браузерах).

Давайте рассмотрим причины этой функции и посмотрим, как ее использовать.

Примечание: эта статья изначально была опубликована здесь, в блоге разработчиков Vue.js 05.02.2019.

Немного предыстории модулей JavaScript

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

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

Но в эту эпоху Node.js и мега SPA приложения JavaScript могут иметь сотни зависимостей и тысячи строк кода.

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

Логотипы систем модулей и сборщиков

Будучи чрезвычайно полезными, системы модулей и сборщики стали еще одной сложной областью веб-разработки.

В конце концов, были созданы модульные системы JavaScript, первоначально для Node.js. Варианты использования клиентских модулей также были хороши, но сложность в том, что браузеры должны были их поддерживать.

Загрузчики модулей браузера пытались решить эту проблему, но преобладающее решение состояло в том, чтобы скомпилировать модульный JavaScript обратно в немодулярную форму с помощью сборщика модулей, такого как Webpack или Rollup.

Наконец, модули были добавлены в стандарт ECMA в ES2015, а в 2019 году современные браузеры изначально поддерживают модули ES, что позволяет писать модульный JavaScript, который запускается непосредственно в браузере без необходимости компиляции.

Вот как это сделать:

index.html (на стороне клиента)

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

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

<script type="text/javascript" src="https://mycdn.com/vue.js"></script>
<script type="text/javascript">
  new Vue();
</script>

Сборка UMD объявляет объект Vue в глобальном пространстве имен, делая его доступным для любого сценария, объявленного после загрузки и анализа сценария Vue.

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

Но это удобно для быстрого прототипирования, поскольку не требует этапа сборки.

Посмотреть как модуль

Существуют также сборки Vue, которые экспортируют Vue как модуль (как модуль CommonJS, так и модуль ES).

Однако эти сборки модулей должны использоваться инструментом связывания, таким как Webpack. Например, пользователи могут создать «входной файл» следующим образом:

app.js

import Vue from "vue";
new Vue();

И Webpack взял бы сборку модуля Vue и скомпилировал бы ее в один файл сборки, скажем /расстояние/bundle.jsкоторый используется на стороне клиента следующим образом:

index.html

<script type="text/javascript" src="/dist/bundle.js"></script>

Использование Vue в качестве модуля в браузере

В настоящее время, если вы попытаетесь использовать сборку модуля Vue ES в браузере, например:

index.html

<script type="module" src="vue.esm.js"></script>

Это не сработает. Конечно, он загрузится, но вы увидите такую ​​ошибку консоли:

Uncaught ReferenceError: процесс не определен

Это связано с тем, что сборка модуля Vue ES предназначалась только для использования сборщиком. Сборка включала ссылки на глобальные переменные Node.js, такие как processтак как они помогут оптимизировать связанную версию Vue и будут удалены в процессе сборки.

Начиная с версии 2.6.0-beta1, теперь в пакете Vue доступна новая сборка. vue.esm.browser.js.

Как использовать сборку модуля браузера

Эту новую сборку Vue можно загрузить в браузер без сборщика. Вот пример:

index.js

<!DOCTYPE html>
<html>
<head>
    <title>Vue.js ESM</title>
</head>
<body>
<div id="app">
    {{ message }}
</div>
</body>
<script type="module" src="vue.mjs"></script>
<script type="module" src="app.js"></script>
</html>

app.js

import Vue from './vue.mjs';

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue 2.6.0-beta1 ESM Browser Build!'
  }
});

Чтобы это работало, вам понадобится сервер, который может статически обслуживать показанные файлы. просмотр.mjs должен быть псевдонимом файла node_modules/vue/dist/vue.esm.js.

С использованием .mjs расширение не требуется, но эта статья Google Developers рекомендует это отличать модули браузера от модулей Node)

Отступать

Если вы собираетесь использовать сборку модуля ES, вам, вероятно, потребуется предоставить запасной вариант, поскольку большинство браузеров еще не поддерживают модули ES.

Нет проблем — вы можете настроить очень простую конфигурацию Webpack для объединения этого кода:

webpack.config.js

module.exports = {
  entry: './app.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    
  },
  resolve: {
    alias: {
      './vue.js': './node_modules/vue/dist/vue.esm.browser.min.js'
    }
  }
};

Пакет теперь можно загрузить на страницу с помощью nomodule атрибут. Браузеры, поддерживающие модули, будут знать, что не следует загружать nomodule скрипт, в то время как браузеры, которые не распознают модули, пропустят первые два скрипта и загрузят только запасной вариант.

index.html

<script type="module" src="vue.mjs"></script>
<script type="module" src="app.js"></script>
<script nomodule src="/dist/build.js"></script>

Я написал об этом более подробно в статье 2017 года под названием Однофайловые компоненты JavaScript Vue.js в браузере.

Какая польза от использования Vue в качестве модуля ES?

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

Причина в том, что браузерные ES-модули по-прежнему менее производительны, чем классические скрипты с разделением кода. И поскольку вам все еще придется использовать сборщик для линтинга, транспиляции TypeScript, встряхивания дерева и т. Д., Не похоже, что это сильно упростит вашу настройку.

Хотя я не разработчик плагинов для WordPress, мне сказали, что здесь может быть полезна сборка модуля браузера, поскольку в одном блоге WordPress может быть несколько плагинов с конфликтующими версиями Vue. Сценарий будет загрязнять глобальное пространство имен, в отличие от модуля.

Но если у вас нет такого варианта использования, зачем возиться с модулями браузера?

Вот несколько (правда, абстрактных) причин:

Во-первых, нехорошо, чтобы мир разработки JavaScript полностью зависел от Webpack и Rollup, поскольку это серьезное узкое место и уязвимая точка отказа.

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

Наконец, реализация модулей ES в браузере — это платформа, на которой можно основываться. На данный момент пакетирование в виде классического сценария лучше, но это не значит, что так будет всегда. Проверить Что будет дальше с модулями JS для некоторых особенностей того, что планируется Google.

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


Станьте старшим разработчиком Vue в 2020 году.

Изучите и освойте знания профессионалов о создании, тестировании и развертывании полнофункциональных приложений Vue в нашем последнем курсе.

Учить больше


Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *