添加基础HTML前端后JavaScript的require无法正常工作

核心原因 #

• require()是Node.js专属的模块加载语法，属于CommonJS模块规范的一部分，浏览器环境并没有内置对这个函数的支持。
• 你之前的代码在Node.js环境能正常运行，是因为Node.js runtime本身提供了require函数来加载本地或npm安装的模块；但把代码放到HTML里在浏览器中运行时，浏览器根本不知道require是什么，自然会抛出未定义的错误。

解决办法 #

1. 改用CDN直接引入crypto-js

这是最简单的方案，直接在HTML中通过<script>标签引入crypto-js的CDN资源，之后就能在浏览器全局环境中使用CryptoJS对象：

<!-- 在HTML的<head>标签中添加CDN引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

<script>
class Block {
  constructor(index, timestamp, data, previousHash = '') {
    this.index = index;
    this.timestamp = timestamp;
    this.data = data;
    this.previousHash = previousHash;
    this.hash = this.calculateHash();
  }

  calculateHash() {
    // 直接使用全局的CryptoJS对象调用SHA256方法
    return CryptoJS.SHA256(this.index + this.previousHash + this.timestamp + JSON.stringify(this.data)).toString();
  }
}
</script>

2. 使用打包工具处理（适合复杂项目）

如果你的代码依赖多个Node.js模块，推荐用Webpack、Vite这类前端打包工具。它们会将所有依赖模块打包成浏览器可以识别的单文件，这样你可以继续使用require或者ES模块的import语法编写代码，再通过打包流程适配浏览器环境。

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