导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

• 静态导入
  • 初始化加载
    • import xxx from './xxx'; ，script 依赖 type="module"
• 动态导入
  • 按需加载
    • import('./xxx'); 不依赖 type="module"
      • import('./xxx').then(module => console.log(module));

import、export 只支持在 http、https 服务端起起来中使用

• 这个 html 得用服务器起起来跑（http、localhost、...），而不是直接把 html 文件放到浏览器上跑。
• 注意 script 中得加 type="module"，不加会报错↓

用 vite 跑个服务器能行（vite 默认支持ES6 的 import、export）

静态 import 和动态 import 方式

import、export 语法

导出模块 export {...}：

utils.js

export function plus(a, b) { return a + b }

export function minus(a, b) { return a - b }

相当于

function plus(a, b) { return a + b }
function minus(a, b) { return a - b }

export {
	plus,
  minus
}

⭐️ 注意：

• import 和 export 是关键字，不是方法
• 上边 export {...} 不是导出一个对象的意思，而是导出一个模块的意思
• 然后这个模块中里边包含 plus 和 minus
• 每一个模块的方法，叫一个接口
• 下边的 { plus, minus } 作为一个整体叫模块，而不是对象

import { plus, minus } from './utils'

const res = plus(1, 2);
const res1 = minus(1, 2);

• 表示从模块中解构，而不是从对象中解构

不解构的方式导入：

• 是模块
• utils 才是对象

import * as utils from './utils'
// ↑解释：把 *（模块）命名为叫 utils 的命名空间，它是个对象

const { plus, minus } = utils;

const res = plus(1, 2);
const res1 = minus(1, 2);

重命名方法导入：

import { plus: computedPlus, minus } from './utils';

const res = computedPlus(1, 2);
const res1 = minus(1, 2);

默认导出 export default

• 默认导出一种类型的值作为模块导出出去
• 下边导出对象也叫做：把一个对象当做模块导出出去

function plus(a, b) { return a + b }
function minus(a, b) { return a - b }

// ↓这叫做：默认导出一个对象
export default {
	plus,
  minus
}

导入：

• 这个时候的 utils 就是个对象了

import utils from './utils';

const { plus, minus } = utils;

模块副作用（副作用导入）

function plus(a, b) { return a + b }
function minus(a, b) { return a - b }

console.log('This is a UtilsModule');

如果想要上边模块中 log 执行，直接导入就好：

import './utils'

导出模块和默认导出同时使用

export default {
	a: 1,
  b: 2
}

export function plus(a, b) { return a + b }

export function minus(a, b) { return a - b }

导入：

import utils, { plus, minus } from './utils'

注意：

• utils 得写 { plus, minus } 前边，因为有默认导出的原因

也可以把 { plus, minus } 作为一个整体导入：

import utils, * as computedMethods from './utils'

const { plus, minus } = computedMethods;
const res = plus(1, 2);

⭐️ 动态 import

• import 不加括号，是静态导入
• import 加了括号，是动态导入
• import() 不是在调用方法，只是动态导入的一种规定的语法

import().then

import('./utils').then(module => {
	console.log(module);

  const { a, b } = module.default;
  const { plus, minus } = module;

  const res = plus(1, 2);
});

或者用 async/await 写法

(async () => {
	const { default: utils, plus, minus } = await import('./utils');
  // 不能直接用 default，因为是关键字
  const res = plus(1, 2);
})();

(async () => {
	const { default: { a, b }, plus, minus } = await import('./utils');
  // 不能直接用 default，因为是关键字
  console.log(a, b);
})();