JavaScript模块导入导出作用域问题：未导出代码为何修改页面

为什么未导出的greetings相关代码能修改DOM #

ES模块的执行逻辑是：只要一个模块被首次import，不管你导入的是它的哪个导出项，整个模块的顶层代码都会完整执行一次，之后再导入该模块只会返回缓存的导出结果，不会重复执行顶层代码。

export/import语法的作用只是控制模块内哪些变量可以被外部访问，不会限制顶层代码的执行：你代码里的greetings相关逻辑是hello.js的顶层代码，在hello.js被app.js引入的时候就会自动执行，虽然greetings变量没有导出、外部访问不到，但它执行时产生的操作DOM的副作用是不受限的，所以能修改index.html的内容。

避免模块未被调用就自动执行的最佳实践 #

要实现只有代码被显式导入调用时才执行，遵循以下规则即可：

• 所有带副作用的逻辑（操作DOM、发请求、修改全局变量等）都封装为函数或类导出，不要直接写在模块顶层。只有常量声明、纯工具函数/类的定义这类无副作用的代码可以放在顶层。
  改造后的hello.js示例：

  const hello = () => console.log('Hello from hello.js');
  
  // 把之前的顶层执行逻辑封装成函数导出
  export const initGreetings = () => {
    const greetings = document.getElementById('main')
    greetings.innerHTML += 'Hello there from hello.js';
  }
  
  export default hello;
  

  使用时需要显式调用才会执行对应的逻辑：

  import hello, { initGreetings } from './hello.js'
  
  console.log('Hello from app.js')
  hello()
  // 不调用initGreetings的话，对应逻辑永远不会执行
  initGreetings()
  

• 如果项目使用webpack、Vite等打包工具，可以在package.json中配置sideEffects字段，明确标注哪些模块存在顶层副作用，其余无副作用的模块如果未被显式导入，会被Tree Shaking机制直接剔除，不会被打包执行。配置示例：

  {
    "sideEffects": ["*.css", "./src/utils/global-init.js"]
  }
  

• 如果部分模块的执行时机需要灵活控制，不要使用顶层静态import，改用动态import()语法按需加载，只有触发对应逻辑时才会加载执行模块：

  // 点击按钮时才加载执行hello.js
  document.querySelector('#loadBtn').addEventListener('click', async () => {
    const { default: hello, initGreetings } = await import('./hello.js')
    hello()
    initGreetings()
  })
  

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