无需模块运行JavaScript文件及CORS问题解决方案咨询

1. 非模块.js文件的"导入导出"替代方案 #

普通.js文件没有原生的ESM导入导出语法，但可以通过全局作用域实现代码共享：

• 全局挂载变量/函数：把需要共享的代码挂载到window对象上，比如在utils.js中：

  window.utils = {
    calculateSum: (a, b) => a + b,
    formatDate: (date) => new Date(date).toLocaleString()
  };
  

  在依赖它的app.js中直接调用utils.calculateSum(1,2)即可，注意要保证utils.js在app.js之前加载。
• IIFE封装避免全局污染：用立即执行函数封装私有逻辑，只暴露需要共享的部分：

  // utils.js
  const utils = (() => {
    // 私有函数
    const validateNumber = (num) => typeof num === 'number';
    // 对外暴露的方法
    return {
      calculateSum: (a, b) => {
        if (validateNumber(a) && validateNumber(b)) return a + b;
        return 0;
      }
    };
  })();
  window.utils = utils;
  

  这种方式能减少全局变量数量，降低命名冲突风险，但没有ESM的模块隔离和树摇能力，适合本地开发场景。

2. 无需搭建服务器解决本地文件CORS拦截的方案 #

可以通过修改浏览器启动参数或配置绕过本地文件的CORS限制（仅用于本地开发，不要用于浏览外网）：

• Chrome/Edge：关闭所有浏览器实例，右键快捷方式选择"属性"，在"目标"栏末尾添加参数：

  --allow-file-access-from-files --disable-web-security
  

  比如目标栏最终可能是："C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security，点击确定后启动浏览器即可。
• Firefox：在地址栏输入about:config，搜索security.fileuri.strict_origin_policy，将其值改为false，用完记得改回true恢复安全限制。

3. 非模块环境下读取文本/JSON文件 #

可以用传统的XMLHttpRequest或fetch（需配合上述浏览器CORS绕过方案）：

读取JSON文件 #

// XMLHttpRequest方式
const xhr = new XMLHttpRequest();
xhr.open('GET', './data.json', true);
xhr.onload = function() {
  if (this.status === 200) {
    try {
      const jsonData = JSON.parse(this.responseText);
      console.log('JSON数据:', jsonData);
    } catch (err) {
      console.error('JSON解析失败:', err);
    }
  } else {
    console.error('请求失败，状态码:', this.status);
  }
};
xhr.onerror = function() {
  console.error('请求出错');
};
xhr.send();

// fetch方式（需配合浏览器CORS参数）
fetch('./data.json')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.json();
  })
  .then(data => console.log('JSON数据:', data))
  .catch(err => console.error('读取失败:', err));

读取文本文件 #

// XMLHttpRequest方式
const xhrText = new XMLHttpRequest();
xhrText.open('GET', './content.txt', true);
xhrText.onload = function() {
  if (this.status === 200) {
    console.log('文本内容:', this.responseText);
  } else {
    console.error('请求失败，状态码:', this.status);
  }
};
xhrText.send();

// fetch方式（需配合浏览器CORS参数）
fetch('./content.txt')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.text();
  })
  .then(text => console.log('文本内容:', text))
  .catch(err => console.error('读取失败:', err));

4. 切换为普通.js文件的操作步骤 #

1. 修改文件后缀：把所有.mjs文件重命名为.js。
2. 更新HTML脚本标签：移除脚本标签的type="module"属性，比如：
   原来的：<script type="module" src="app.mjs"></script>
   修改为：<script src="app.js"></script>
3. 替换模块导入导出逻辑：把export语句改为将变量/函数挂载到window，把import语句改为直接使用全局挂载的内容，同时调整脚本加载顺序，确保被依赖的文件先加载。
   比如原来的模块代码：

   // utils.mjs
   export const calculateSum = (a, b) => a + b;
   
   // app.mjs
   import { calculateSum } from './utils.mjs';
   console.log(calculateSum(1,2));
   

   修改为普通.js代码：

   // utils.js
   window.calculateSum = (a, b) => a + b;
   
   // app.js
   console.log(calculateSum(1,2));
   

   HTML中脚本顺序：

   <script src="utils.js"></script>
   <script src="app.js"></script>
   

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