通过<script>引入public目录JS正常，import引入src目录JS异常的原因

将scoper.js放置在public目录，通过动态创建<script>标签并设置script.src = "/scoper.js"时，脚本可正常运行（"Hello World"文本显示红色）；但将该脚本移至src目录，使用import { scoper } from "./scoper.js"直接导入后，脚本虽能运行但功能异常。请问这两种运行方式的核心差异是什么？

核心差异分析 #

1. 作用域环境不同 #

• 动态<script>标签加载的脚本默认运行在全局作用域，所有变量、函数都会挂载到window对象上。如果scoper.js的逻辑依赖全局环境（比如直接操作全局DOM对象、监听全局事件），这种方式下能直接获取到所需的上下文。
• ES Module的import会将代码隔离在模块作用域中，变量和函数默认不会暴露到全局。如果scoper.js没有显式导出需要的功能，或者内部逻辑依赖全局作用域的变量，直接导入后无法正常触发预期行为。

2. 执行时机不一致 #

• 动态创建的<script>（设置async=true）会在脚本加载完成后立即执行，此时useEffect已经完成了DOM元素的创建与插入（包括带scoped属性的style标签），scoper.js能正确找到目标元素并处理样式作用域。
• 使用import导入时，模块会在组件初始化阶段就执行，此时useEffect尚未触发，DOM中还没有后续创建的scoped样式标签，scoper.js找不到处理目标，导致样式作用域逻辑失效。

3. 打包编译处理差异 #

• public目录下的脚本不会被React打包工具（如webpack）处理，会原封不动地在浏览器中运行，代码逻辑完全按照原始写法执行。
• src目录下的脚本会被打包工具编译，可能经历tree-shaking、代码压缩、模块封装等处理，改变了代码的执行上下文。如果scoper.js依赖未被打包工具识别的全局DOM操作逻辑，就会出现功能异常。

解决建议（针对import方式） #

如果要使用import导入scoper.js，需要调整代码逻辑适配模块环境：

1. 确保scoper.js显式导出核心功能：

// scoper.js
export function scoper() {
  // 原有的样式作用域处理逻辑
}

2. 在useEffect中，确保DOM元素创建完成后再调用scoper函数：

import React, { useEffect } from "react";
import "./styles.css";
import { scoper } from "./scoper.js";

export default function App() {
  useEffect(() => {
    let style = document.createElement("style");
    style.setAttribute("scoped", "");
    style.innerHTML =
      ".Puma {" +
      "color: purple;" +
      "font-size: 50px;" +
      "text-align: left;" +
      "}";
    let main = document.getElementById("raptors");
    main.appendChild(style);

    // 等待DOM准备好后执行scoper逻辑
    scoper();

    return () => {
      main.removeChild(style);
    };
  }, []);

  return (
    <>
      <div id="lakers" className="Puma">
        <div>Hello World!</div>
      </div>
      <div id="raptors" className="Puma">
        <h1>Raptors win!</h1>
      </div>
    </>
  );
}

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