Я считаю, что сути того, как работают модули ES2015, достаточно, чтобы заставить кого-то купить их прямо сейчас. Итак, в этом посте я поделюсь своим опытом миграции AMD ES5 с использованием кодовой базы Require.js на ES2015 с использованием Webpack и Babel.

Краткий отказ от ответственности: я делюсь здесь своим опытом и мнениями, вы можете использовать их на свой страх и риск, но, пожалуйста, не считайте это учебным пособием, поскольку могут быть предостережения, с которыми я не сталкивался, или ваше использование- случай может совершенно другой! ;)

Стратегический подход

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

ПОЦЕЛУЙ свою кодовую базу

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

Кроме того, глядя на унаследованный код, очень легко отвлечься на старые шаблоны и захотеть начать быстрый рефакторинг. Серьезно, сейчас не время для этого. Создайте задачу, выпейте кофе (одноклубник в моем случае) и создайте задачу или напишите на стикере или что-то еще, что вам нужно сделать, чтобы не забыть вернуться к ней позже!

Имейте в виду различия

Теперь, есть некоторые фундаментальные изменения, которые вы можете иметь в виду. Пожалуйста, проверьте мой предыдущий пост о ES2015 в разделе catchs для некоторых предостережений, характерных для ES2015.

Кроме того, имейте в виду, что для того, чтобы перенести это в CommonJS, Babel и Webpack изменяют все объявления переменных (если вы специально не требуете, чтобы они оставались прежними, но сохраняйте их для действительно конкретных случаев).

В качестве основных правил:

  • Избегайте глобальных переменных (серьезно, если вы использовали их до этого момента, сейчас самое время остановиться!)
  • Осторожно с необъявленными зависимостями: в других модульных системах можно было просто заставить все работать, если вы пропустили прямую зависимость, но она была объявлена ​​в другом месте, теперь она обязательно сломается.

Миграция старых модулей

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

  • Удалите функциональную оболочку, она больше не нужна.
  • Не беспокойтесь о использовать строгий режим, по умолчанию каждый модуль ES2015 работает в строгом режиме.
  • В AMD экспортированные переменные отправлялись в верхнюю область с помощью оператора return, теперь вы можете экспортировать столько данных (переменных), сколько хотите. Просто выберите правильный синтаксис и объявление.
  • Если ваш код изменяет импортированные переменные во время выполнения, остановитесь. Импортированные переменные ES2015 доступны только для чтения, помните об этом! Если вам действительно нужно это сделать, сделайте копию, также для лучшей практики сложно изменить импортированные переменные, как вы, наверное, понимаете…

Библиотеки

Итак, если у вас есть библиотека, которая должна быть скомпилирована с набором Babel/Webpack, есть некоторые ключи, которые необходимо установить в вашем webpack.config внутри библиотеки, чтобы ваше пространство имен осталось неизменным:

// webpack config
// ...
output: {
  filename: 'library.js', // output compiled file
  libraryTarget: 'umd',   // which mod definitions to support
  library: 'foo',         // lib namespace
  umdNamedDefine: true    // well, if the define is named
}
// ...

С приведенной выше конфигурацией пространство имен вашей библиотеки будет доступно как foo и будет поддерживать как CommonJS, так и AMD (что не должно вызывать беспокойства, если вы используете Webpack в своем основном проекте). Вам просто нужно добавить файл library.js в качестве зависимости вашего основного проекта и включить его там, где это необходимо, как любой обычный модуль.

Итак, вот что я узнал при переносе кодовой базы с AMD на ES2015. Не стесняйтесь делиться своими выводами или давать какие-либо отзывы, просто опубликуйте их здесь или позвоните мне в твиттере.