variable - require javascript es5




Quando devo usar chaves para a importação do ES6? (6)

Parece óbvio, mas fiquei um pouco confuso sobre quando usar chaves para importar um único módulo no ES6. Por exemplo, no projeto React-Native em que estou trabalhando, tenho o seguinte arquivo e seu conteúdo:

initialState.js
var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

No TodoReducer.js, tenho que importá-lo sem chaves:

import initialState from './todoInitialState';

Se eu colocar o initialState entre chaves, recebo o seguinte erro para a seguinte linha de código:

Não é possível ler toda a propriedade de undefined

TodoReducer.js:
export default function todos(state = initialState.todo, action) {
// ...
}

Erros semelhantes também acontecem aos meus componentes com as chaves. Eu queria saber quando eu deveria usar chaves para uma única importação, porque obviamente, ao importar vários componentes / módulos, você deve colocá-los entre chaves, o que eu sei.

Editar:

A publicação do SO here não responde à minha pergunta. Em vez disso, pergunto quando devo ou não usar chaves para importar um único módulo ou nunca devo usar chaves para importar um único módulo no ES6 (aparentemente isso não é o caso, como eu vi a importação única com chaves)


Resumo dos módulos ES6 :

exportações:

Você tem 2 tipos de exportação:

  1. Exportações nomeadas
  2. Exportações padrão, no máximo 1 por módulo

Sintaxe:

// Module A
export const importantData_1 = 1;
export const importantData_1 = 2;
export default function foo () {}

Importações:

O tipo de exportação (isto é, exportações nomeadas ou padrão) afeta como importar algo:

  1. Para uma exportação nomeada, precisamos usar chaves e o nome exato como a declaração (ou seja, variável, função ou classe) que foi exportada.
  2. Para uma exportação padrão, podemos escolher o nome.

Sintaxe:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // for our named imports

// syntax single named import: 
// import { importantData_1 } 

// for our default export (foo), the name choice is arbitrary
import ourFunction from './A';   

Coisas de interesse:

  1. Use uma lista separada por vírgula entre chaves com o nome correspondente da exportação para a exportação nomeada.
  2. Use um nome de sua escolha sem chaves para uma exportação padrão.

Pseudônimo, suposto nome:

Sempre que você deseja renomear uma importação nomeada, isso é possível por meio de aliases . A sintaxe para isso é a seguinte:

import { importantData_1 as myData } from './A';

Agora importamos importantData_1 mas o identificador é myData vez de importantData_1 .


A resposta de Dan Abramov acima explica sobre as exportações padrão e as exportações nomeadas .

Qual usar?

Citando David Herman : O ECMAScript 6 favorece o estilo de exportação único / padrão e fornece a sintaxe mais agradável para a importação do padrão. A importação de exportações nomeadas pode e até deve ser um pouco menos concisa.

No entanto, no TypeScript, a exportação nomeada é favorecida devido à refatoração. Por exemplo, se você exportar uma classe por padrão e renomeá-la, o nome da classe será alterado apenas nesse arquivo e não nas outras referências, com o nome da classe de exportações nomeado será renomeado em todas as referências. As exportações nomeadas também são preferidas para utilitários.

Uso geral o que você preferir.

Adicional

A exportação padrão é na verdade uma exportação nomeada com o nome padrão, portanto, a exportação padrão pode ser importada como:

import {default as Sample} from '../Sample.js';

Eu diria que também há uma notação estrelada para a palavra-chave import ES6 que vale a pena mencionar.

Se você tentar consolar o Mix do log:

import * as Mix from "./A";
console.log(Mix);

Você vai ter:

Quando devo usar chaves para a importação do ES6?

Os colchetes ficam dourados quando você precisa apenas de componentes específicos do módulo, o que diminui o espaço ocupado por empacotadores como o webpack.


Para entender o uso de chaves em instruções de import , primeiro você precisa entender o conceito de destruição introduzido no ES6

  1. Destruição de objetos

    var bodyBuilder = {
      firstname: 'Kai',
      lastname: 'Greene',
      nickname: 'The Predator'
    };
    
    var {firstname, lastname} = bodyBuilder;
    console.log(firstname, lastname); //Kai Greene
    
    firstname = 'Morgan';
    lastname = 'Aste';
    
    console.log(firstname, lastname); // Morgan Aste
  2. Destruição de matriz

    var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
    
    console.log(firstGame); // Gran Turismo

    Usando correspondência de lista

      var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
      console.log(secondGame); // Burnout

    Usando o operador spread

    var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
    console.log(firstGame);// Gran Turismo
    console.log(rest);// ['Burnout', 'GTA'];

Agora que resolvemos isso, no ES6, você pode exportar vários módulos. Você pode então usar a destruição de objetos, como abaixo

Vamos supor que você tenha um módulo chamado module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

Você gostaria de importar as funções exportadas para index.js ;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

Você também pode usar diferentes nomes de variáveis ​​como

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

normalmente, quando você exporta uma função, precisa usar o {}

if you have export const x 

você usa a import {x} from ''

if you use export default const x 

você precisa usar a import X from '' aqui, você pode alterar X para qualquer variável que desejar


Os chavetas ({}) são usadas para importar ligações nomeadas e o conceito por trás disso é a destruição da atribuição

Uma demonstração simples de como a instrução de importação funciona com um exemplo pode ser encontrada em minha própria resposta a uma pergunta semelhante em Quando usamos '{}' nas importações de javascript?







ecmascript-6