Использование экспорта и импорта модульности ES6

Node.js внешний интерфейс JavaScript Babel

мой github.GitHub.com/dedicated мойка…

В ES6 есть два основных способа использования экспорта и импорта.

  1. Именованный экспорт
  2. Экспорт по умолчанию

Именованный экспорт

Каждый тип данных, подлежащих экспорту, должен иметь имя, должен быть унифицирован с введением{}, даже если необходимо экспортировать только один тип данных.Этот тип письма освежает и интуитивно понятен, и это рекомендуемый метод письма.

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}

export {sqrt, square, diag}

//------ main.js ------
import { square, diag } from 'lib';				
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

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

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';				
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

Независимо от того, как вы экспортируете, вам нужно импортировать{}.

Псевдоним именованного импорта

Когда переменные, импортированные из разных модулей, имеют одинаковое имя

import {speak} from './cow.js'
import {speak} from './goat.js'

Эти варианты написания явно вызовут путаницу

Правильный способ это

import {speak as cowSpeak} from './cow.js'
import {speak as goatSpeak} from './goat.js'

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

import {
  speak as cowSpeak,
  eat as cowEat,
  drink as cowDrink
} from './cow.js'

import {
  speak as goatSpeak,
  eat as goatEat,
  drink as goatDrink
} from './goat.js'

cowSpeak() // moo
cowEat() // cow eats
goatSpeak() // baa
goatDrink() // goat drinks

Решение состоит в том, чтобы ввести пространства имен

Импорт пространства имен

import * as cow from './cow.js'
import * as goat from './goat.js'

cow.speak() // moo
goat.speak() // baa

очень просто и элегантно

Экспорт по умолчанию

Экспорт по умолчанию не требует имени, но в файле js может быть только одно экспортное значение по умолчанию.

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

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

Хотя может быть только один экспорт по умолчанию, также можно экспортировать несколько методов.

export default {
  speak () {
    return 'moo'
  },
  eat () {
    return 'cow eats'
  },
  drink () {
    return 'cow drinks'
  }
}

импорт аналогичен импорту пространства имен

import cow from './default-cow.js'
import goat from './default-goat.js'

cow.speak() // moo
goat.speak() // baa

Если метод экспорта, который мы используем при написании модулей, не является единообразным, то нам нужно учитывать, как импортируются разные модули при импорте. Эта проблема может быть устранена путем самореференции. Методы, как показано ниже

Напишите модуль, общий для обоих методов импорта.

import * as myself from './ambidextrous-cow.js' // import this file into itself

// this module's own namespace is its default export
export default myself

export function speak () {
  console.log('moo')
}

Таким образом, вам не нужно учитывать метод импорта при импорте.

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow.speak() // moo
alsocow.speak() // moo

Доступны оба способа введения.

Этот подход также имеет небольшой недостаток, то есть в написанном нами модуле есть функция, которая обычно используется, мы хотим экспортировать ее по умолчанию, ноexport defaultбыл использован, и мы знаемexport defaultМожет использоваться только один раз в модуле. затем используйтеObject.assign

import * as myself from './ambidextrous-cow.js' 

export default Object.assign(speak, myself) 

export function speak () {
  console.log('moo')
}

должны знать о том,Object.assignМожет использоваться только для функций.

Соответствующий импортированный пример

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow() // moo
cow.speak() // moo
alsocow.speak() // moo

Справочная статья

1.[es6] import, export, default cheatsheet

2.Объясните использование и разницу между экспортом, импортом и экспортом по умолчанию в JavaScript ES6.

3.ES Modules: Using named exports as the default export

4.export in MDN

Категории