Используя Узел.js требует против импорта/экспорта ES6

есть несколько вариантов использования / возможностей, которые вы можете рассмотреть:

требуется:

• вы можете иметь динамическую загрузку, где имя загруженного модуля не является предопределенный / статический, или где вы условно загружаете модуль только если это "действительно требуется" (в зависимости от определенного потока кода).
• загрузка синхронный. Это означает, что если у вас несколько requires, они есть загружается и обрабатывается один за другим.

ES6 Импорт:

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

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

основными преимуществами являются синтаксические:

• более декларативный / компактный синтаксис
• модули ES6 в основном сделают UMD (Universal Module Definition) устаревшим - по существу устраняет раскол между CommonJS и AMD (server vs browser).

вы вряд ли увидите какие-либо преимущества в производительности с ES6 модулей. Вам все равно понадобится дополнительная библиотека для связывания модулей, даже если в браузере есть полная поддержка функций ES6.

есть ли преимущества использования одного над другим?

текущий ответ-нет, потому что ни один из текущих движков браузера не реализует import/export от стандарта ES6.

некоторые сравнительные диаграммы http://kangax.github.io/compat-table/es6/ не принимайте это во внимание, поэтому, когда вы видите почти все зеленые цвета для Хрома, просто будьте осторожны. import ключевое слово из ES6 не было принято во внимание счет.

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

(мы все еще можем быть просто несколько ошибок прочь или лет до тех пор, пока V8 не реализует это в соответствии со спецификацией ES6. )

этой документ это то, что нам нужно, и это документ это то, что мы должны подчиняться.

и стандарт ES6 сказал, что зависимости модуля должны быть там, прежде чем мы прочитаем модуль, как на языке программирования C, где у нас были (заголовки) .h файлы.

это хорошая и хорошо проверенная структура, и я уверен, что эксперты, создавшие стандарт ES6, имели это в виду.

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

это займет некоторое время, пока import/export встроенная поддержка идет в прямом эфире, и require ключевое слово не будет идти никуда в течение длительного времени.

что это require?

это node.js способ загрузки модулей. ( https://github.com/nodejs/node )

узел использует методы системного уровня для чтения файлов. Вы в основном полагаетесь на что при использовании require. require закончится в какой-то системный вызов, как uv_fs_open (зависит от конечной системы, Linux, Mac, Windows) для загрузки файла/модуля JavaScript.

чтобы проверить, что это правда, попробуйте использовать Babel.JS, и вы увидите, что import ключевое слово будет преобразован в require.

использование модулей ES6 может быть полезно для "встряхивания дерева"; т. е. включение Webpack 2, Rollup (или других bundlers) для идентификации путей кода, которые не используются/импортируются, и поэтому не попадают в результирующий пакет. Это может значительно уменьшить размер файла, исключив код, который вам никогда не понадобится, но с CommonJS поставляется по умолчанию, потому что Webpack и др. не имеют возможности узнать, нужен ли он.

делается это с помощью статического анализа кода путь.

например, через:

import { somePart } 'of/a/package';

... дает упаковщик намек на то, что package.anotherPart не требуется (если он не импортирован, он не может быть использован - правильно?), поэтому он не будет беспокоиться о его связывании.

чтобы включить это для Webpack 2, вам нужно убедиться, что ваш транспилер не выплевывает модули CommonJS. Если вы используете es2015 плагин с babel, вы можете отключить его в вашем .babelrc вот так:

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

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

когда дело доходит до асинхронной или, возможно, ленивой загрузки, то import () гораздо мощнее. Смотрите, когда нам требуется компонент в асинхронном режиме, то только мы импортируем его в некотором асинхронном режиме, как в const переменной.

const module = await import('./module.js');

или если вы хотите использовать require() затем,

const converter = require('./converter');

дело в том import() фактически асинхронна по своей природе. Как упоминалось neehar venugopal в ReactConf, вы можете использовать его для динамической загрузки компонентов.

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

Примечание - если вы разрабатываете узел.проект JS, то вы должны строго использовать require() как узел выдаст ошибку исключения как invalid token 'import' если вы используете import . Таким образом, узел не поддерживает операторы импорта

обновление - как предложено Дэн Dascalescu: С v8.5. 0 (выпущен Sep 2017), node --experimemntal-modules index.mjs можно использовать import без Бабеля. Вы можете (и должны) также опубликуйте свои пакеты npm как собственный ESModule, с обратной совместимостью старый require путь.

см. это для получения дополнительной информации о том, где использовать асинхронный импорт - https://www.youtube.com/watch?v=bb6RCrDaxhw

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

import {foo, bar} from "dep";

имя файла: dep.js

export foo function(){};
export const bar = 22

кредит идет к Пол Шан. Подробнее.