使用p5.js基于模板文件在本地生成自定义唯一文件的方法咨询

你提供的代码本身就是无需Node环境的纯前端本地实现方案，仅依赖浏览器能力即可完成需求，相关优化和运行说明如下：

代码优化建议 #

你现有代码是直接修改模板文件第一行的变量定义，如果变量位置不固定，建议改为匹配变量名替换，避免行号变动导致修改失败：

let result;
function preload() {
  // 读取本地模板文件内容
  result = loadStrings('template.js')
}
function setup() {
  if (result) {
    // 遍历所有行匹配目标变量替换
    const modifiedContent = result.map(line => {
      // 匹配要修改的变量定义行
      if (line.trim().startsWith('let number =')) {
        // 替换为新的变量值
        return 'let number = "' + 1 + '"';
      }
      // 其余行保持不变
      return line;
    // 拼接为带换行的完整字符串
    }).join('\n');
    // 生成并导出修改后的文件
    let writer = createWriter('modifiedTemplate.js');
    writer.write(modifiedContent);
    writer.close();
  }
}

配套的HTML代码保持你现有写法即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

本地运行注意事项 #

• 直接双击打开本地HTML文件会触发浏览器跨域限制，导致loadStrings无法读取本地模板文件，可通过两种简单方法解决：
  • 使用编辑器自带静态服务运行，比如VS Code安装Live Server插件后，右键HTML文件选择「Open with Live Server」即可启动访问
  • 若本地有Python环境，在项目目录执行python -m http.server 8000，浏览器访问localhost:8000即可
• 代码运行后会自动触发浏览器文件下载，得到的modifiedTemplate.js就是修改后的副本，所有操作都在本地完成，不会上传数据。

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