从JavaScript文件导入变量时提示文件不存在，求排查解决

问题情况 #

尝试将一个JavaScript文件中的变量导入到另一个文件时，控制台返回“文件不存在”的错误。

相关代码 #

Button.js #

var MONEY = 0;

const element = document.getElementById("moneyButton");

element.addEventListener("click", function moneyHandle() {
    MONEY++
    document.getElementById("moneycount").innerHTML = `You have: ` + MONEY + `$`;
});

module.exports = { MONEY };

Clicker.js #

const { MONEY } = require('../misc/button')

const element = document.getElementById("clicker")

if (MONEY === 15) {
    console.log('User has entered stage.')
    element.style.opacity = "1";
}

控制台错误信息 #

错误提示：找不到模块 '../misc/button'

解决步骤 #

• 检查文件路径与文件名：

  1. 核对文件名大小写：你的源文件是Button.js，但导入时写的是button，如果系统区分大小写（比如Linux/macOS），会导致文件找不到，需改为require('../misc/Button.js')。
  2. 确认目录层级：../misc/button表示当前文件（Clicker.js）所在目录的上级目录下存在misc文件夹，且其中有目标文件。比如Clicker.js在src/scripts目录，那么../misc指向src/misc，要确保这个路径下确实存在Button.js。

• 适配浏览器模块系统：
  如果是在浏览器环境运行，Node.js的require和module.exports属于CommonJS语法，浏览器默认不支持，需改用ES6模块：

  1. 修改Button.js：

     export let MONEY = 0;
     
     const element = document.getElementById("moneyButton");
     
     element.addEventListener("click", function moneyHandle() {
         MONEY++
         document.getElementById("moneycount").innerHTML = `You have: ` + MONEY + `$`;
     });
     

  2. 修改Clicker.js：

     import { MONEY } from '../misc/Button.js';
     
     const element = document.getElementById("clicker")
     
     if (MONEY === 15) {
         console.log('User has entered stage.')
         element.style.opacity = "1";
     }
     

  3. HTML引入脚本时添加type="module"：

     <script type="module" src="path/to/Button.js"></script>
     <script type="module" src="path/to/Clicker.js"></script>
     

• 注意变量同步问题：
  即使路径问题解决，CommonJS导出的是变量副本，后续点击按钮修改的MONEY不会同步到Clicker.js中。如果需要实时同步，建议用对象包裹变量（比如export const state = { MONEY: 0 }，修改时操作state.MONEY++），或者使用ES6模块的可修改导出。

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