Простой JavaScript ES6 против импорта ()

Question

Я собираюсь использовать импорт / экспорт модуля ES6 через babel, но натолкнулся на это запутанное утверждение в этой статье.

Говорится:

Сила ES6 import а также export в сочетании с require() метод, дает нам свободу организовывать весь код на стороне клиента в модули и в то же время писать код, используя всю мощь новой версии JavaScript.

Это звучит как система ES6 и require() служить двум различным целям, тем самым делая это babel/browserify подходить к лучшему. Насколько я понимаю, они оба делают одно и то же, только немного по-разному. Может ли кто-нибудь помочь объяснить это?

Answer 1

Это утверждение противоречиво. Если вы попали в ES6/ES7, вы не захотите использовать стиль CommonJSrequire, но вы всегда хотите загружать модули асинхронно, используя import,

На самом деле ES6/ES7 имеет программный способ импорта модулей: System.import(...), но спецификация загрузчика все еще обсуждается...

Пока он не получит статус рекомендации, существует полифил (и более того...): SystemJS.

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

ОП спросил в каком-то комментарии...

Почему System.import(...) из ES6 понадобится для js-модулей, когда у нас есть возможности загрузки / экспорта модулей ES6? Разве они не выполняют одинаковые задачи?

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

Например, допустим, у вас есть приложение, для которого требуются плагины, а некоторые параметры имеют флаг loadPlugins который может быть true или же false, Таким образом, вы захотите загрузить их, если приложение хочет, чтобы они были загружены:

if(options.loadPlugins) {
   Promise.all(
      options.plugins.map(plugin => System.import(plugin.path))
   ).then(() => {
      // Do stuff when all plugins have been already loaded!
   });
}