如何在Sage主题的WordPress中解决p5.js未定义问题

别担心，这个问题其实分两类情况：一类是ESLint的"认知"问题，另一类是实际代码加载顺序的问题，我来一步步帮你解决：

一、先搞定ESLint的报错 #

ESLint默认只会识别你代码里定义的变量或者模块化导入的变量，而你是通过<script>标签全局引入的p5，ESLint不知道这个全局变量的存在，所以会报错。解决方法有两种：

1. 临时解决：在代码顶部加全局注释 #

在你的sketch代码最上方加上这行注释，告诉ESLintp5是全局可用的：

/* global p5 */
var sketch = function(p) {
  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(200);
  };
};
new p5(sketch);

2. 永久解决：配置ESLint全局变量 #

如果不想每次写p5代码都加注释，可以修改项目的ESLint配置文件（比如.eslintrc.js或者.eslintrc.json），在globals字段里添加p5：

// .eslintrc.js示例
module.exports = {
  // 其他配置...
  globals: {
    p5: true
  }
};

二、排查实际运行时p5是否真的加载成功 #

有时候ESLint报错解决了，但实际运行还是找不到p5，这时候要检查加载顺序和文件是否正常加载：

1. 检查p5.js的加载状态 #

打开浏览器的开发者工具（F12），切换到网络标签，刷新页面，搜索p5.min.js，看它的请求状态：

• 如果是404：说明文件路径写错了，核对一下src里的路径是否和实际文件位置一致
• 如果是200：确认它的加载顺序是否在你的sketch代码之前

2. 确保你的代码在p5加载完成后执行 #

即使p5是在body末尾引入的，如果你的sketch代码是内联在p5.js之前的，或者提前执行了，也会找不到p5。可以把你的代码包裹在DOMContentLoaded事件里，确保页面所有资源加载完成后再执行：

/* global p5 */
document.addEventListener('DOMContentLoaded', function() {
  var sketch = function(p) {
    p.setup = function () {
      p.createCanvas(500, 500);
      p.background(200);
    };
  };
  new p5(sketch);
});

三、Sage主题更规范的做法：用npm安装并导入p5 #

Sage主题通常用webpack做构建，推荐用npm管理依赖，这样能避免加载顺序问题，也能让ESLint自动识别变量：

1. 首先在项目根目录安装p5：

npm install p5

2. 在你的JavaScript文件里导入p5，然后正常使用：

import p5 from 'p5';

const sketch = function(p) {
  p.setup = function () {
    p.createCanvas(500, 500);
    p.background(200);
  };
};
new p5(sketch);

这样既不用处理ESLint的全局变量问题，构建工具也会自动处理依赖顺序，更符合现代前端开发的规范。

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