Модули ES6 теоретически существуют уже некоторое время, но самый популярный в мире браузер Chrome только недавно добавил поддержку модулей ES6. Даже сейчас поддержка все еще очень мала, так как она поддерживается только в Canary сборке браузера за флагом. Тем не менее усилия по настройке всего этого стоят того, чтобы использовать одну из самых ожидаемых функций ES6.
Настройка
Прежде всего, вам нужно скачать Chrome Canary, а затем включить экспериментальный флаг функций веб-платформы.
На момент написания статьи Canary не был доступен в Linux, поэтому вам нужно будет подождать или получить доступ к компьютеру с Windows или Mac. Если вы читаете это через какое-то время после публикации, возможно, уже выпущена более свежая версия Chrome с поддержкой по умолчанию. Поддержка без флага включена в Chrome 61. Я также сделал для нас быстрый пример и разместил его на Github. Я хотел сделать что-то еще, кроме преобладающего списка дел, поэтому я решил написать код для быстрого счетчика калорий.
Преимущества использования модулей
Основная причина использования модулей — организация кода. Большинство людей уже используют какие-то модули в JavaScript. Если вы использовали библиотеку модулей, то знаете, как использование модулей может помочь вам писать более структурированный и чистый код. Модули ES6 изначально поддерживаются и поддерживают асинхронную загрузку. Последнее затруднило для команды Node.js реализовать его в качестве замены модулям CommonJS, поскольку это сломало бы большую часть существующего кода, поэтому на данный момент Node.js по-прежнему использует свою собственную модульную систему, а не стандартную версию ES6.
Когда поддержка в конечном итоге станет достаточно широко распространенной, мы надеемся, что многие люди будут писать лучший код. Больше всего на этом этапе эволюции нативных модулей устраняется пробел в обучении, который возникал в прошлом с модульным кодом.
Начиная
После того, как вы клонировали код из Github, вам нужно будет запустить какой-то базовый веб-сервер для запуска кода, поскольку модули не поддерживаются файловым протоколом.
причуды
На момент написания «голые» спецификаторы модулей вообще не поддерживаются. Пустой спецификатор — это просто имя файла без каких-либо косых черт или точек перед ним или после него. См. пример ниже:
Как это должно работать:
import { counter } from 'counter.js';// even without the .js extension
Обходной путь:
import { counter } from './counter.js';
Это незначительная проблема, но если вы получаете ошибки, это нужно проверить. Важно понимать, что в HTML-документ необходимо добавить только модуль верхнего уровня, остальное делается с помощью JavaScript.
< module 1
/
index.html <- main.js
\
< module 2
Для использования модулей не обязательно существует иерархия, однако в любом случае рекомендуется создать ее. Также очень возможно создать спагетти-код с модулями. Создание подпапок для каждого уровня модулей — хороший способ предотвратить это.
Требовать против импорта
Синтаксис требования стиля Node.js отличается от фактического синтаксиса ES6. Node.js позаимствовал свой синтаксис из синтаксиса Common.js и с тех пор остался с ним. Модули стиля Common.js были разработаны для синхронной загрузки, что противоречит текущей тенденции в JavaScript для асинхронной загрузки. Если вы используете синтаксис Require прямо сейчас, использование модулей ES6 будет немного непривычным при переходе от синхронизации к асинхронности, но со временем вы обнаружите, что разница не является несовместимой.
Тег скрипта
Для добавления модуля на страницу требуется несколько иной тег, чем обычно. Увидеть ниже:
<script type="module" src="main.js"></script>
Вам нужно добавить тип модуля в тег script, чтобы браузер знал, что вы добавляете код, который использует модули, а не просто какой-либо старый файл JavaScript.
Обратная совместимость
Приятной особенностью спецификации модулей является то, что они также подумали о том, что должен делать браузер, когда он не поддерживает модули. Для этого они создали атрибут nomodule для тега script. Увидеть ниже:
<script nomodule src="main.precompiled.js"></script>
Если браузер не поддерживает модули, он автоматически переключится на этот скрипт. Однако, если он поддерживает модули, он будет игнорировать этот тег.
Создание модуля
В файле counter.js вы найдете модуль. Это конструктор ES5, в котором есть метод, который мы используем для обновления общего количества.
export function counter (element , cals) {
this.el = document.querySelectorAll(element)[0];
console.log(this.el);
this.amount = cals;
this.attr = this.el.getAttribute('data-total');
};
counter.prototype.update= function () {
const newTotal = Number(this.amount) + Number(this.attr);
console.log(this.el);
this.el.children[0].textContent = newTotal + ' Calories';
this.el.setAttribute('data-total', newTotal);
};
Добавляя оператор экспорта перед объявлением конструктора, мы выставляем его в качестве основного «экспорта» для этого модуля. Затем в наш файл main.js мы импортируем счетчик из файла counter.js.
import { counter } from './counter.js';
const form = document.getElementById('add');
const cals = document.getElementById('cals');
const type = document.getElementById('type');
const table = document.getElementById('items');
form.onsubmit = function (event) {
event.preventDefault();
let row = document.createElement('tr');
let cellType = document.createElement('td');
let cellCals = document.createElement('td');
cellType.textContent = type.value;
cellCals.textContent = cals.value;
row.appendChild(cellType);
row.appendChild(cellCals);
table.appendChild(row);
let counterObject = new counter('#counter', cals.value);
counterObject.update();
}
Вот и все. Это очень похоже на то, как мы добавили код для счетчика в другой тег скрипта, прежде чем добавить этот код, за исключением того, что мы вызываем его в верхней части этого документа, а не накапливаем теги скрипта в нашем HTML-файле. Хотите узнать больше о модулях? Оформить заказ этот пост от команды разработчиков Chrome.
Первоначально опубликовано на сайте blog.jscrambler.com 20 июля 2017 г.
