如何在p5.js中加载外部文件的颜色数组？解决require未定义

问题背景 #

尝试使用Node.js的require语法加载外部颜色数组文件时，浏览器抛出ReferenceError: require is not defined错误——因为浏览器环境不支持Node.js的CommonJS模块系统，需要改用浏览器兼容的方案。

原代码核心问题：

• sketch.js中使用了require('./colors.js')，这是Node.js专用语法
• colors.js使用exports.colors导出数组，同样不被浏览器支持

解决方案 #

方案1：全局变量（最简单，无需服务器） #

这是最直接的浏览器兼容方案，把颜色数组挂载到全局window对象上：

1. 修改colors.js：

// colors.js
window.colorPalette = [
  "#c0a8a8",
  "#a8a890",
  "#90a8c0",
  "#d8d8d8",
  "#90c0d8",
  "#f0f0f0",
  "#a8c0c0",
  "#30a8c0",
  "#d89078",
  "#f09000",
  "#009090",
  "#fffff0",
  "#a8d8d8",
];

2. 调整HTML引入顺序：
   必须在sketch.js之前引入colors.js，确保全局变量先被定义：

<body>
  <div id="palette"></div>
  <script src="colors.js"></script>
  <script src="sketch.js"></script>
</body>

3. 更新sketch.js：
   去掉require，直接使用全局变量，同时修复随机颜色输出的错误：

// sketch.js
// noprotect
function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB);
  background(5, 10, 100);

  colorization(window.colorPalette);
}

function colorization(colorArr) {
  console.log(colorArr[1]);

  // 修复：直接输出随机选中的颜色值，而非通过索引取值
  const randomElement = colorArr[Math.floor(Math.random() * colorArr.length)];
  console.log(randomElement);
}

方案2：ES6模块（推荐，需本地服务器） #

如果你的项目运行在本地服务器（比如p5.js编辑器、VS Code的Live Server插件），可以使用标准ES6模块语法：

1. 修改colors.js为ES模块：

// colors.js
export const colors = [
  "#c0a8a8",
  "#a8a890",
  "#90a8c0",
  "#d8d8d8",
  "#90c0d8",
  "#f0f0f0",
  "#a8c0c0",
  "#30a8c0",
  "#d89078",
  "#f09000",
  "#009090",
  "#fffff0",
  "#a8d8d8",
];

2. 给sketch.js添加模块类型：
   在HTML中修改sketch.js的引入标签：

<script src="sketch.js" type="module"></script>

3. 更新sketch.js使用import：

// sketch.js
import { colors } from './colors.js';

// noprotect
function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB);
  background(5, 10, 100);

  colorization(colors);
}

function colorization(colorArr) {
  console.log(colorArr[1]);

  const randomElement = colorArr[Math.floor(Math.random() * colorArr.length)];
  console.log(randomElement);
}

内容的提问来源于stack exchange，提问作者Carol.Kar