html 引入 js 代码的几种方式

一、普通加载

二、内嵌

三、预加载 (用了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 模块