javascript - work - require module es6




Usando o Node.js requer vs. importação/exportação do ES6 (6)

Em um projeto em que estou colaborando, temos duas opções em qual sistema de módulo podemos usar:

  1. Importando módulos usando require e exportando usando module.exports e module.exports .
  2. Importando Módulos Utilizando a Importação ES6 e Exportando Utilizando export ES6

Há algum benefício de desempenho em usar um sobre o outro? Existe algo mais que devemos saber se usarmos módulos do ES6 sobre os do Node?


Há algum benefício de desempenho em usar um sobre o outro?

A resposta atual é não, porque nenhum dos mecanismos de navegação atuais implementa a import/export do padrão ES6.

Alguns gráficos de comparação http://kangax.github.io/compat-table/es6/ não levam isso em conta, então quando você vir quase todos os greens para o Chrome, tenha cuidado. import palavra-chave de import do ES6 não foi levada em consideração.

Em outras palavras, os motores de navegadores atuais, incluindo o V8, não podem importar novos arquivos JavaScript do arquivo JavaScript principal por meio de qualquer diretiva JavaScript.

(Podemos estar a apenas alguns bugs de distância ou anos até que o V8 implemente isso de acordo com a especificação do ES6).

Este document é o que precisamos, e este document é o que devemos obedecer.

E o padrão ES6 dizia que as dependências do módulo deveriam estar lá antes de lermos o módulo, como na linguagem de programação C, onde tínhamos (cabeçalhos) arquivos .h .

Essa é uma estrutura boa e bem testada, e tenho certeza de que os especialistas que criaram o padrão ES6 tinham isso em mente.

Isso é o que permite que o Webpack ou outros pacotes de pacotes otimizem o pacote em alguns casos especiais e reduzam algumas dependências do pacote que não são necessárias. Mas nos casos em que temos dependências perfeitas, isso nunca acontecerá.

Ele precisará de algum tempo até que o suporte nativo de import/export seja ativado, e a palavra-chave require não irá a lugar nenhum por muito tempo.

O que é require ?

Esta é a maneira do node.js de carregar módulos. ( https://github.com/nodejs/node )

O nó usa métodos no nível do sistema para ler arquivos. Basicamente, você depende disso quando usar require . require terminará em alguma chamada de sistema como uv_fs_open (depende do sistema final, Linux, Mac, Windows) para carregar o arquivo / módulo JavaScript.

Para verificar se isso é verdade, tente usar Babel.js e você verá que a palavra-chave import será convertida em require .


Há algum benefício de desempenho em usar um sobre o outro?

Lembre-se de que ainda não existe nenhum mecanismo JavaScript que ofereça suporte nativamente aos módulos ES6. Você mesmo disse que está usando Babel. O Babel converte a declaração de import e export para o CommonJS ( require / module.exports ) por padrão. Então, mesmo se você usar a sintaxe do módulo ES6, você estará usando o CommonJS sob o capô se você executar o código no Node.

Existem diferenças técnicas entre os módulos CommonJS e ES6, por exemplo, o CommonJS permite que você carregue módulos dinamicamente. O ES6 não permite isso, mas existe uma API em desenvolvimento para isso .

Como os módulos do ES6 fazem parte do padrão, eu os utilizaria.


As principais vantagens são sintáticas:

  • Sintaxe mais declarativa / compacta
  • Os módulos ES6 farão basicamente o UMD (Universal Module Definition) obsoleto - essencialmente remove o cisma entre CommonJS e AMD (server vs browser).

É improvável que você veja benefícios de desempenho com os módulos ES6. Você ainda precisará de uma biblioteca extra para empacotar os módulos, mesmo quando houver suporte completo para recursos do ES6 no navegador.


Eu pessoalmente uso importação porque, nós podemos importar os métodos requeridos, membros usando importação.

import {foo, bar} from "dep";

Nome do arquivo : dep.js

export foo function(){};
export const bar = 22

O crédito vai para Paul Shan. Mais informações .


Quando se trata de assíncrono ou carregamento lento, então o import () é muito mais poderoso. Veja quando solicitamos o componente de maneira assíncrona, então usamos import lo de alguma maneira assíncrona como na variável const usando o await .

const module = await import('./module.js');

Ou se você quiser usar require() então,

const converter = require('./converter');

A coisa é import() é na verdade assíncrona na natureza. Como mencionado por neehar venugopal no ReactConf , você pode usá-lo para carregar dinamicamente os componentes ReactConf para a arquitetura do lado do cliente.

Também é muito melhor quando se trata de roteamento. Essa é a única coisa especial que faz com que o log de rede baixe uma parte necessária quando o usuário se conecta a um site específico para seu componente específico. por exemplo, página de login antes do painel não baixar todos os componentes do painel. Porque o que é necessário atual ou seja, componente de login, que só será baixado.

O mesmo vale para a export : a export ES6 é exatamente igual à do CommonJS module.exports .

OBSERVAÇÃO - Se você estiver desenvolvendo um projeto node.js, será necessário usar estritamente require() pois o nó emitirá um erro de exceção como invalid token 'import' se você usar a import . Portanto, o nó não suporta instruções de importação.

ATUALIZAÇÃO - Como sugerido por Dan Dascalescu : Desde a v8.5.0 (lançado em setembro de 2017), o node --experimental-modules index.mjs permite que você use a import sem o Babel. Você pode (e deve) também publicar seus pacotes npm como ESModule nativo, com compatibilidade retroativa para o antigo modo de requerimento .

Veja isto para mais espaço livre onde usar importações assíncronas - ReactConf


Usando módulos ES6 pode ser útil para 'árvore tremendo'; isto é, habilitar o Webpack 2, Rollup (ou outros bundlers) para identificar caminhos de código que não são usados ​​/ importados e, portanto, não fazem parte do pacote resultante. Isso pode reduzir significativamente o tamanho do arquivo, eliminando o código que você nunca precisará, mas com o CommonJS é empacotado por padrão, porque o Webpack et al não tem como saber se é necessário.

Isso é feito usando a análise estática do caminho do código.

Por exemplo, usando:

import { somePart } 'of/a/package';

... dá ao bundler uma dica de que o package.anotherPart não é necessário (se não for importado, não pode ser usado - certo?), por isso não vai incomodar empacotá-lo.

Para habilitar isso para o Webpack 2, você precisa garantir que o seu transpilador não esteja cuspindo módulos do CommonJS. Se você estiver usando o plug-in es2015 com o babel, você pode desativá-lo em seu .babelrc forma:

{
  "presets": [
    ["es2015", { modules: false }],
  ]
}

Rollup e outros podem funcionar de forma diferente - veja os documentos se estiver interessado.





babeljs