Browserify打包文件与Array.forEach及HTML内联事件监听兼容问题

错误1：fs.createReadStream is not a function 与事件绑定写法问题 #

事件绑定语法修正 #

你当前的事件绑定代码有两处错误：

// 错误写法
inputs.forEach(function(input){
    input.addEventListener(onchange, UpdateEndwords());
});

• 第一个参数应为字符串'change'（事件类型名），而非onchange（DOM元素的属性标识符）
• 第二个参数是函数引用，不能加()，否则会立即执行UpdateEndwords，而非事件触发时执行

修正后代码：

inputs.forEach(function(input){
    input.addEventListener('change', UpdateEndwords);
});

fs模块浏览器兼容处理 #

fs.createReadStream是Node.js专属API，浏览器环境不存在该接口。rhyme-plus-plus大概率是为Node.js开发的，直接用Browserify打包会带入Node的fs模块，导致浏览器报错。

解决方式：

• 使用brfs转换工具：它能把fs.createReadStream/fs.readFileSync的内容直接内联到bundle文件中，适配浏览器环境。
  安装：npm install brfs --save-dev
  打包命令：browserify your-entry-file.js -t brfs -o bundle.js
• 若brfs无效，更换浏览器兼容的押韵库，或确认rhyme-plus-plus是否有浏览器适配分支。

错误2：Uncaught ReferenceError: UpdateEndwords is not defined #

Browserify默认将代码包裹在模块作用域内，UpdateEndwords仅在模块内部可见，不会暴露到全局window对象，而HTML内联事件是从全局作用域查找函数，因此找不到。

如果坚持用内联事件，需手动将函数挂载到全局：

// 定义UpdateEndwords后添加此行
window.UpdateEndwords = UpdateEndwords;

或者放弃内联事件，用修正后的addEventListener配合dom-ready确保DOM加载完成后绑定事件：

const domReady = require('dom-ready');

domReady(function() {
    const inputs = document.querySelectorAll('input');
    inputs.forEach(input => {
        input.addEventListener('change', UpdateEndwords);
    });
});

完整排查流程 #

1. 先修正事件绑定语法，避免提前执行UpdateEndwords
2. 用brfs转换处理fs模块依赖，解决浏览器环境下fs不存在问题
3. 若用内联事件，必须将函数暴露到window全局；否则使用addEventListener+dom-ready的组合写法

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