Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Cada arquivo js é um módulo e a especificação do módulo CommonJS é adotada por padrão.

Módulo ES6 emergente pk módulo CommonJS tradicional

modo de carregamento

• CommonJS é síncrono, a execução do código é interrompida até que o módulo seja carregado.
• Os módulos ES6 são assíncronos, o código pode continuar em execução enquanto o módulo é carregado posteriormente.

modo de execução

A execução dos módulos CommonJS e ES6 é singleton: o módulo será carregado apenas uma vez e todas as referências ao módulo apontarão para a mesma instância.

Dependências

• CommonJS é estático e as dependências do módulo são determinadas em tempo de compilação.
• Os módulos ES6 são dinâmicos e as dependências dos módulos são determinadas em tempo de execução

Forma de árvore tremendo

Uma técnica de otimização para remover código não utilizado de pacotes JavaScript.

• CommonJS não suporta trepidação de árvore e código não utilizado em módulos também será carregado.
• A modularidade ES6 suporta trepidação de árvore, que remove automaticamente o código não utilizado para reduzir o tamanho do pacote.

Três maneiras de habilitar módulos ES6

1. Definido no arquivo package.json "type": "module", então o Node.js tratará todos os arquivos .js como módulos ES6.
2. Altere a extensão do arquivo para .mjs, para que o Node.js o trate automaticamente como um módulo ES6.
3. Adicionar tag de script type="module" Atributos

Sintaxe do módulo ES6

padrão exportar importar exportar padrão

Cada módulo só pode ter uma exportação padrão

let a = 1
// 默认导出 a
export default a
1
2
3

// 导入默认时，可以命其他名称
import b from './demo.js'

console.log(b)
1
2
3
4

Expressões de função/funções anônimas podem ser usadas diretamente como exportações padrão

export default function myFunc() {}
1

export default function() {}。
1

Exportar e importar múltiplas exportações { }

let a = 1
let b = 2

export { a, b }
1
2
3
4

// 导入多项时，必须与导出名对应
import { a, b } from './demo.js'

console.log(a, b)
1
2
3
4

Renomear como ao exportar

let a = 1
let b = 2

export { a as c, b as d }
1
2
3
4

// 导入时，只能导入新的名称
import { c, d } from './demo.js'

console.log(c, d)
1
2
3
4

Exportar outras especificações de módulo

export { name1, name2, ... } from 'module-name'
1

Importe tudo o que for exportado pelo módulo import*

export let a = 1;
export let b = 2;
1
2

// 通过 as 重命名为一个变量（值为对象）
import * as myModule from "./demo.mjs";

console.log(myModule.a);
console.log(myModule.b);
1
2
3
4
5

Renomear como ao importar

import {trunc as StringLib} from "../lib/string.js"
import {trunc as MathLib} from "../lib/math.js"
1
2

Importar arquivos em formato json

import pkg from "./package.json" assert { type: "json" };
1

const { default: jsonObject } = await import('./file.json', {
  assert: {
    type: 'json'
  }
});
1
2
3
4
5

Importar módulo CommonJS

import * as 自定义名称  from '模块名称'
1

Sintaxe do módulo CommonJS

• Existe um objeto de módulo em cada módulo, que possui as exportações de atributos (o valor do atributo também é um objeto)
• Ao importar através de require(), será obtido o atributo exports do objeto módulo no módulo exportado.
• Dentro do mesmo módulo, não misture exports e module.exports para exportar conteúdos diferentes, pois isso pode causar confusão e comportamento imprevisível.

Exportar e importar item único module.exports

Exportar

module.exports = "朝阳";
1

importar

const demoModule = require("./demo.js");

console.log(demoModule); // 朝阳
1
2
3

Exportar e importar múltiplas exportações

Exportar

exports.a = 1;
exports.b = 2;
1
2

importar

const demoModule = require("./demo.js");

console.log(demoModule); // { a: 1, b: 2 }
1
2
3