一、import 用法
1、导入整个模块
// 导入my-module的所有接口,并制订模块名称为myModuleimport * as myModule from '/modules/my-module.js';// 应用时,须要通过新的模块名myModule,来拜访即可myModule.doAllTheAmazingThings();

2、导入单个接口
// 导入单个接口import {myExport} from '/modules/my-module.js';// 导入多个接口import {foo, bar} from '/modules/my-module.js';// 导入接口,并制订别名,编码时更容易应用import {reallyReallyLongModuleExportName as shortName} from '/modules/my-module.js';

3、导入默认接口
// 导入默认接口import myDefault from '/modules/my-module.js';// 导入默认接口,也能够和其余导入形式一起应用import myDefault, * as myModule from '/modules/my-module.js';import myDefault, {foo, bar} from '/modules/my-module.js';

4、动静导入

动态导入在页面加载时就会被导入,有时模块太大且不会在页面加载时应用,能够应用动静导入,在须要用的时候在导入模块。

// 办法一:import('/modules/my-module.js')  .then((module) => {    // Do something with the module.    });// 办法二:let module = await import('/modules/my-module.js');// 办法三:动静导入默认接口(async () => {  if (somethingIsTrue) {    const { default: myDefault, foo, bar } = await import('/modules/my-module.js');  }})();

5、语法补充
import defaultExport from "module-name";import * as name from "module-name";import { export1 } from "module-name";import { export1 as alias1 } from "module-name";import { export1 , export2 } from "module-name";import { export1 , export2 as alias2 , [...] } from "module-name";import defaultExport, { export1 [ , [...] ] } from "module-name";import defaultExport, * as name from "module-name";import "module-name";var promise = import("module-name");

二、参考文档
  • JS中import怎么用?