画龙点睛
本篇文章呢主要是介绍 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";
module
.js所有的成员都会挂载到mod下面可用mod
.的这个方式使用
模块路径
let modPath
= './module.js';
import
{name
} from modPath
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";
console
.log(mod2
);
以上呢就是导出模块，需要注意的事项，谢谢观看，如有不足，敬请指教
