ESModule-import用法

画龙点睛

本篇文章呢主要是介绍 ESModule的import用法

import

1、文件类型省略问题
import add from "./demo1.js"
form后面跟的是一个字符串采用相对路径“./”代表当前目录
"./demo1.js"的文件类型.js不能省略而在commjs中可以省略

2、index.js问题
"../demo2" => 写法错误
".demo2/index.js" 必须填写完整的项目名称 不能省略index.js ，后续会在webpack中介绍如何支持忽略index文件

3、在引用文件的时候不能省略"./" 否则会认为在使用第三方模块，这一点和commjs相同

4、文件引用
import {name} from "/04/demo/add.js" => 可以使用文件的路径加载模块

5、引用网上CDN模块
import cdn from 'http:url'

执行模块

在项目开发过程中仅仅是执行这个模块并不提取其中导出的成员，下面的两种写法仅供参考

1、 import {} from "./module.js"

2、import './module.js' //这种写法更为常见

提取全部模块

import * as mod "./module.js";//通过关键字 * as 

module.js所有的成员都会挂载到mod下面可用mod.的这个方式使用

模块路径

//假如说在项目开发过程中才能知道模块的路径，而import只支持存在文件的顶层，如下

//项目运行才知道模块路径
let modPath = './module.js';
import {name} from modPath // => error code  

//满足某些条件才加载模块 
if (true) {
    import { name } from "./module.js"
}

//动态导入模块

import提供一个全局import函数用来动态导出函数，返回的是一个promise对象可以链式调用

import ('./module.js').then(res => {
    console.log(res);
    res.methords()
})

导出命名成员和默认成员

模块导出命名成员和默认成员如下

let name = "loki";

let age = 20;

let season = "spring"

export { name, age };

export default season

解决方法共有两个，仅供参考

1、通过as

import { name, age, default as mod1 } from './demo1.js';

console.log(mod1);

2、优化写法

import mod2, { name, age } from "./demo1";

//mod2代表默认成员,name,age是demo1.js导出的成员

console.log(mod2);

以上呢就是导出模块，需要注意的事项，谢谢观看，如有不足，敬请指教