构建音乐流网站时，使用chromaprint.js去重遇模块找不到问题求助

我之前在构建前端项目时也碰到过类似的情况，chromaprint.js虽然宣称支持浏览器环境，但直接用require()引入时确实容易触发"Cannot find module"错误，大概率是库的入口配置或者browserify的模块解析逻辑导致的，给你几个亲测有效的解决方案：

1. 直接指定库的浏览器版入口文件 #

首先确认你已经通过npm install chromaprint.js --save正确安装了依赖，然后去node_modules/chromaprint.js目录下看看，通常这类库会把浏览器兼容的打包文件放在dist文件夹里（比如chromaprint.min.js）。

你可以直接在代码里指定这个路径来引入：

const Chromaprint = require('chromaprint.js/dist/chromaprint.min.js');

2. 在package.json中配置browser字段映射 #

如果不想每次都写长路径，可以在项目根目录的package.json里添加browser字段，给chromaprint.js设置一个别名，指向它的浏览器版入口：

{
  "browser": {
    "chromaprint": "./node_modules/chromaprint.js/dist/chromaprint.min.js"
  }
}

之后在代码里就可以简洁地引入：

const Chromaprint = require('chromaprint');

3. 用browserify-shim处理非UMD格式的库 #

如果chromaprint.js没有打包成标准的UMD模块，而是直接挂载到全局对象上，那可以用browserify-shim来适配：

1. 先安装依赖：

npm install browserify-shim --save-dev

2. 在package.json里添加配置：

{
  "browserify-shim": {
    "chromaprint.js": "global:Chromaprint"
  },
  "browserify": {
    "transform": ["browserify-shim"]
  }
}

3. 之后你既可以通过require('chromaprint.js')引入，也可以直接使用全局的Chromaprint对象。

额外排查点 #

• 检查你的gulp-browserify任务配置，有没有设置ignore或者exclude规则不小心排除了chromaprint.js所在的node_modules目录；
• 确认chromaprint.js的版本是否最新，有些旧版本可能存在浏览器环境适配的bug。

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