将HTML/CSS/JS网站转换为React时如何正确引入原有JavaScript文件

首先可以明确：你写的import './javascript/main.js'从语法层面是完全可行的，没有报错但功能失效，核心原因是ES Module的执行逻辑、作用域规则，和你原来静态站用的传统script标签的行为存在本质差异，并不是引入语法本身错了。

你之前静态站用的<script src="js/main.js">逻辑，和React工具链默认的ES Module import逻辑，在两个关键维度上完全不同，这就是功能失效的根源：

• 执行时机不同：传统script会在浏览器解析到标签时立即执行代码，且默认等待页面DOM加载完成后再执行DOM操作；而ES Module的代码是在模块解析阶段就立即执行，此时React的JSX还没有把真实DOM渲染到页面上，代码里的document.querySelector(...)根本找不到目标元素
• 作用域规则不同：传统script加载的JS默认共享全局window作用域，所有变量、函数都可以跨文件访问；而ES Module是天然隔离作用域的，你在原main.js里写的变量、函数，不会自动暴露到全局，其他模块甚至页面脚本都访问不到

这也是为什么功能失效却完全没有报错——很多老项目的JS习惯把初始化逻辑写在DOMContentLoaded事件回调里，React应用入口加载时就已经触发完这个事件了，后续import进来的JS才注册的事件监听永远等不到触发，全程静默无提示。

你可以根据自己的改造成本选择对应方案：

• 最小改动方案：适配React的DOM渲染周期
  1. 打开你原有的main.js文件，把里面所有直接执行的DOM操作、事件绑定逻辑，统一包裹成一个可导出的初始化函数，比如export function initPageInteractions() { ...原文件的所有业务代码... }
  2. 在转换后的React页面组件中，导入这个初始化函数，放到useEffect钩子内调用——useEffect的执行时机是React把真实DOM完全挂载到页面之后，和原静态站的DOM完成加载再执行JS的时机完全一致，此时再查找DOM元素、绑定事件，就能实现和原来完全相同的交互效果
• 零改动原JS方案：完全复刻传统script引入逻辑
  如果你完全不想修改原main.js里的任何代码，可以直接走传统静态站的加载逻辑：
  1. 把main.js文件复制到项目的public/js/目录下（public目录下的文件会被原封不动打包，不会走ES Module编译隔离流程）
  2. 在项目根入口的HTML文件（通常是public/index.html）中，加上和原静态站一模一样的script标签：<script type="text/javascript" src="/js/main.js"></script>
     这种方式加载的JS是全局作用域、传统执行时序，只要原JS的初始化逻辑是基于DOM加载事件触发的，功能会直接生效，不需要额外调整
• 保留import引入方式的修正方案
  如果你一定要保留import './main.js'的文件位置和引入逻辑，需要手动解决两个核心问题：
  1. 把原JS里所有需要全局调用的函数、变量，主动挂载到window对象上，比如window.toggleMenu = toggleMenu，打破模块作用域的隔离
  2. 删掉原JS里监听DOMContentLoaded的包裹逻辑，直接把初始化代码暴露成可调用的方法，再在React组件的useEffect中手动触发初始化，否则还是会因为时机问题静默失效

如果调整完还是不生效，可以按以下方向快速定位：

• 检查文件路径的大小写匹配：部分构建工具在生产环境下会对路径大小写做严格校验，如果实际文件夹是JavaScript、js，但你写的路径是小写，会静默找不到文件，不抛出报错
• 检查DOM选择器的类名、ID是否和JSX渲染的DOM属性完全匹配，有没有因为JSX转换时类名写错，导致JS找不到目标元素

内容的提问来源于stack exchange，提问作者i am bad at coding