ES模块跨文件导入时DOM操作引发TypeError报错的解决方案

ES模块被导入时，浏览器会完整执行模块内所有顶层代码，不会因为仅导入部分导出变量就跳过其他逻辑。
你在exam.js中导入index.js时，index.js里的DOM查询代码也会被执行，但exam.html页面中不存在class为container的元素，document.querySelector('.container')返回null，读取null的style属性就会抛出该类型错误。
注意：type="module"自带的DOM解析延迟效果，仅能保证脚本访问当前加载页面的DOM，无法解决跨页面导入时目标页面不存在对应元素的问题。

可根据项目实际情况选择以下任意一种方案：

• 方案1：给DOM操作加存在性判断（改动最小）
  修改index.js代码，操作DOM前先校验元素是否存在：

const container = document.querySelector('.container')
if (container) {
  container.style.backgroundColor = 'green'
}
export const colors = {red: 'red', blue: 'blue'}

• 方案2：拆分页面专属逻辑和公共导出逻辑（推荐，长期维护性最好）
  不要把仅在index.html运行的页面专属DOM代码，放在会被其他页面导入的模块里：

1. 新建公共常量文件constants.js，存放多页面共用的导出内容：

export const colors = {red: 'red', blue: 'blue'}

2. 修改index.js，仅保留index页面专属逻辑，公共变量从常量文件导入：

import { colors } from './constants.js'
document.querySelector('.container').style.backgroundColor = 'green'
// 其余index页面专属业务逻辑

3. 修改exam.js，从公共常量文件导入变量，不再引入带index页面专属逻辑的index.js：

import {colors} from './constants.js'
console.log(colors);

• 方案3：通过页面路径判断执行逻辑（适合不想拆分文件的小型项目）
  修改index.js，仅在当前页面为index.html时执行对应DOM操作：

if (window.location.pathname.endsWith('index.html')) {
  document.querySelector('.container').style.backgroundColor = 'green'
}
export const colors = {red: 'red', blue: 'blue'}

内容的提问来源于stack exchange，提问作者Gbubemi Attah