Почему модули npm, такие как material-ui, экспортируют файлы es6 и es5?
Во многих модулях npm, которые я недавно установил (например, @ material-ui / core), есть три способа импортировать один и тот же компонент React:
import { AppBar } from '@material-ui/core'
import AppBar from '@material-ui/core/AppBar/AppBar'
import AppBar from '@material-ui/core/es/AppBar/AppBar'
В каком сценарии следует использовать экспортированные файлы варианта 3 / es6?
Если
tree-shaking/dead code eliminationработает в webpack и модуле npm. Должен ли я лучше использовать вариант 1 (названный импорт) вместо варианта 2 (экспорт по умолчанию)?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Есть два типа экспорта:
1) Именованный экспорт, то есть вы экспортируете что-то вроде:
// exports a function declared earlier
export { myFunction };
// exports a constant
export const FOO = "foo";
если вы хотите импортировать их, то синтаксис будет таким:
import {FOO, myFunction} from './file';
2) Экспорт по умолчанию, то есть вы экспортируете что-то вроде:
export default function() {}
вы можете переименовать свою функцию, класс в любое имя, которое хотите при импорте, и его синтаксис будет таким:
import myFunction from './file';
ПРИМЕЧАНИЕ. Вы можете иметь несколько именованных экспортов в одном файле, но вы не можете иметь несколько экспортов по умолчанию в одном файле.
Для получения более подробной информации перейдите по этой ссылке: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
Основное различие заключается в том, как эта библиотека экспортирует модули.
Когда вы выполняете import AppBar from '@material-ui/core/AppBar/AppBar', это означает, что @material-ui/core/AppBar/AppBar экспортирует один object с export default AppBar.
And you're expected to imported as you did. However you're not limited to export a single default export from your module.
Например, с React предоставляет доступ к главному объекту (то есть React, который снова экспортируется по умолчанию), у которого есть все свойства, которые вы, возможно, захотите использовать. Но с синтаксисом импорта из ES6 вы можете импортировать определенное свойство / функцию из этого модуля (например, import { Component } from 'react';, который экспортируется как export class Component...).
Надеюсь, это понятно!
В вашем первом примере я бы не стал использовать
export { myFunction };, хотя это правильно, но немного сбивает с толку; что вы экспортируете объект, в котором есть функция ... Вместо этого сделайтеexport function myFunction() {...}. Вам не кажется, что это более понятно?