一、普通加载
二、内嵌
三、预加载 (用了es6模块就不需要预加载了,es6模块是异步加载的)
模块引入
es6模块
模块的思想可以概括为:把代码拆开,再把他们连接起来,如何处理模块之间的依赖是模块系统的核心,依赖模块的必须是模块,也就是不能在普通script标签中引入模块:
嵌入的模块定义代码不能使用 import 加载到其他模块。只有通过外部文件加载的模块才可以使用 import 加载。因此,嵌入模块只适合作为入口模块。
最基础的 import 和 export 基本所有环境都已经支持了(包括nodejs)
import 引入的文件只会执行一次,可能会产生副作用请注意
AMD 模块:就是 layui 用的那个,require 之后要回调
CommonJS:模块 node 用的那个,直接 const xx = require('')
CMD 模块:用 define 没见有人用过
parcel对module的支持不完善
首先不支持嵌入代码,必须用 src 属性引入
另外,会报错,因为module会默认static模式,不能隐式声明,而parcel的代码依赖这一点,所以需要在模块引入之前先声明:
var parcelRequire;
参见:https://www.cnblogs.com/dou-fu-gan/p/17077594.html
parcel官方github也有issue,原谅博主太懒(截至2023/2/2仍不支持)
参考链接
JavaScript 高级程序设计第四版(不能点,别点了)
一文彻底搞懂JS前端5大模块化规范及其区别 cnblog
JavaScript 模块