为何module.exports无法在浏览器导出数组，export却可行？

核心差异 #

• CommonJS（Node.js专属）：module.exports和require是Node.js早期的模块规范，专为服务器端设计，浏览器原生不支持，必须通过打包工具转译才能在浏览器运行。
• ES模块（标准规范）：export和import是ECMAScript官方标准模块语法，现代浏览器（支持ES6+）和Node.js 13.2+都原生支持，浏览器里只需给script标签加type="module"就能直接运行。

你的代码问题分析 #

渲染失败是两个问题叠加导致的：

1. 方法未调用：你把c.arrayss（这是一个函数）直接赋值给arr，但没有执行它，导致buildProducts里的array是函数而非数组，forEach无法执行，自然无法渲染。
2. 浏览器不支持CommonJS语法：你在<script type="module">环境里用了require，浏览器原生不识别这个函数——你说控制台能输出数组，大概率是单独在控制台调用了c.arrayss()，但代码里并没有做这个操作。

解决方法 #

方案1：转成ES模块写法（无需打包，直接在浏览器运行） #

修改你的模块文件（c.js）：

// js model
export default function somefunction() {
  this.arrayss = function () {
    var arr = ["example1", "example2", "example3"];
    return arr;
  };
}

修改导入文件（importfile.js）：

// js file to import model
import somefunction from '../c.js';
const c = new somefunction();
const arr = c.arrayss(); // 必须调用方法获取数组

function buildProducts(parent, array) {
  let html = "";
  array.forEach(function (i) {
    let itemTemplate = `
<li>
  <div>item:  ${i}</div>
</li>`;
    html += itemTemplate;
  });
  parent.innerHTML += html;
}

buildProducts(document.getElementById("jj"), arr);

HTML保持不变，这样浏览器就能正常渲染数组内容了。

方案2：继续用CommonJS，通过打包工具转译 #

如果你坚持用module.exports和require，需要用Webpack、Vite这类工具把代码打包成浏览器能识别的文件：

1. 在项目根目录运行npm init -y初始化项目
2. 安装Vite：npm install vite --save-dev
3. 创建vite.config.js，配置入口文件为你的importfile.js
4. 运行npx vite build生成打包后的文件
5. 在HTML里引入打包后dist目录下的脚本文件（不需要加type="module"）

总结 #

浏览器端代码优先用ES模块语法更省心；如果习惯CommonJS，必须通过打包工具转译。另外要注意函数调用的细节，别把函数本身当成返回值使用。

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