Почему модули npm, такие как material-ui, экспортируют файлы es6 и es5?

Question

Во многих недавно установленных модулях 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'

1. В каком сценарии следуетЯ использую экспортированные файлы варианта 3 / es6?

2. Если tree-shaking / dead code elimination работает в веб-пакете и модуле npm.Стоит ли использовать вариант 1 (именованный импорт) вместо варианта 2 (экспорт по умолчанию)?

Answer 1

Основное отличие состоит в том, как эта библиотека экспортирует модули.

Когда вы делаете import AppBar from '@material-ui/core/AppBar/AppBar', это означает, что @material-ui/core/AppBar/AppBar экспортирует один object с export default AppBar.

И вы должны импортировать, как вы это сделали.Однако вы не ограничены в экспорте одного экспорта по умолчанию из вашего модуля.

Например, с помощью React предоставляется основной объект (т. Е. React, который снова экспортируется по умолчанию), который имеет все свойства, которые вы можете использовать.Но с помощью синтаксиса импорта из ES6 вы можете импортировать определенное свойство / функцию из этого модуля (например, import { Component } from 'react';, который экспортируется как export class Component...)

Надеюсь, это понятно!

Answer 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