Почему нельзя экспортировать функцию внутри объекта по умолчанию - PullRequest
Новая
       27

Почему нельзя экспортировать функцию внутри объекта по умолчанию

0 голосов
/ 14 января 2019

Мне интересно, почему это недопустимо в приложении, созданном с использованием create-react-app: 

/***** myLib.js *****/
const multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

Nor: 

/***** myLib.js *****/
let multiplyByTwo = val => val * 2;

export default { multiplyByTwo };

Ни: 

/***** myLib.js *****/
function multiplyByTwo(val) { return val * 2; };

export default { multiplyByTwo };

Затем в другом файле: 

/***** main.js *****/
import { multiplyByTwo } from './myLib'

console.log(multiplyByTwo(10));

Когда я пытаюсь его скомпилировать, я получаю эту ошибку: 

Failed to compile.

./src/main.js
Attempted import error: 'multiplyByTwo' is not exported from './myLib'

Однако это действительно: 

/***** myLib.js *****/
export const multiplyByTwo = val => val * 2;

Также это: 

/***** myLib.js *****/
export let multiplyByTwo = val => val * 2;

Ответы [ 3 ]

0 голосов
/ 14 января 2019

Вы говорите о разнице между экспортом по умолчанию и именованным экспортом:

Допустим, у вас есть App.js, и если вы делаете что-то вроде 

export default () => {
  // do something
}

Это экспорт по умолчанию и «ограничен» одним импортом, например 

import App from './App'

Именованный экспорт будет выглядеть примерно так: 

export const add = (a, b) => a + b;

Это именованный экспорт, и вы импортируете его с помощью фигурных скобок, например: 

import { app } from './app'

Подробнее здесь

0 голосов
/ 14 января 2019

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

Пример: 

import React from 'react';

В этом случае мы не указываем конкретное предполагаемое имя при импорте, здесь React также может быть reactDefaultExport это имя является пользовательским именем.

Приходит к Именованный экспорт , когда вы хотите экспортировать что-то конкретное, которое необходимо импортировать с точным именем, тогда мы используем экспорт имен.

Пример: 

import React,{Component} from 'react';

В этом Компонент является именованным экспортом, когда мы используем функциональные / не имеющие состояния компоненты, нам не нужен Компонент, поэтому мы можем избежать его импорта, но React по умолчанию экспорт.

0 голосов
/ 14 января 2019

Разница между именованным экспортом и экспортом по умолчанию .

Когда вы используете export default <expression>, это выражение становится доступным для импорта в другое место, когда вы используете import exprName from .... Модуль экспортирует expression в качестве экспорта по умолчанию, а import exprName берет экспорт этого модуля по умолчанию и помещает его в exprName. Но синтаксис import { exprName } - это нечто совершенно другое ; этот синтаксис указывает, что вы хотите извлечь с именем export с именем exprName из модуля. Это не разрушение, даже если оно выглядит очень похоже на это.

Ваш myLib.js не имеет именованного экспорта multiplyByTwo (он имеет только экспорт по умолчанию объекта, который имеет свойство с именем multiplyByTwo), так 

import { multiplyByTwo } from './myLib'

выходит из строя.

Лучше всего использовать именованный экспорт вместо myLib: 

export const multiplyByTwo = val => val * 2;

и затем его можно импортировать с использованием синтаксиса import { multiplyByTwo }, который вы используете в другом месте.

Другой вариант, использующий тот же код в исходном myLib, заключается в том, чтобы импортировать экспортированный объект по умолчанию, а затем деструктурировать его после импорта: 

import myLib from './myLib';
const { multiplyByTwo } = myLib;

Но это выглядит немного странно.

...