使用Browserify打包时无法找到本地安装的fairychess-web模块

问题根源 #

Create React App（CRA）基于Webpack打包，对本地file:依赖和WASM文件的处理有内置适配；但Browserify需要手动配置路径解析规则和WASM处理插件，才能正确识别这类特殊模块。

具体解决方案 #

1. 确认本地依赖安装状态 #

先检查项目根目录的node_modules/fairychess-web是否存在：

• 如果不存在，执行npm install重新安装本地依赖，确保file:../fairychess-web/pkg的符号链接正确生成。

2. 给Browserify指定模块解析路径 #

Browserify默认的模块查找逻辑可能无法准确定位本地file:依赖，可通过两种方式修正：

• 方式一：修改package.json的browser字段
  在项目根目录的package.json中添加：

  "browser": {
    "fairychess-web": "./node_modules/fairychess-web/fairychess-web.js"
  }
  

  直接指定模块的入口文件路径，帮Browserify精准定位。

• 方式二：打包命令添加路径参数
  在Browserify打包命令中用--path参数指定模块查找路径：

  browserify App.js --path ./node_modules/fairychess-web -o bundle.js
  

3. 安装Browserify的WASM处理插件 #

fairychess-web是wasm-bindgen生成的WASM包，Browserify默认不支持WASM文件打包，需要安装browserify-wasm插件：

1. 安装插件：

   npm install browserify-wasm --save-dev
   

2. 打包时启用插件：

   browserify App.js -p browserify-wasm -o bundle.js
   

   或者在package.json中配置默认插件：

   "browserify": {
     "transform": ["browserify-wasm"]
   }
   

4. 替代方案：用npm link替换file:依赖 #

如果file:依赖的符号链接在Browserify中解析异常，可以换用npm link：

1. 进入../fairychess-web/pkg目录，执行：

   npm link
   

2. 回到当前项目目录，执行：

   npm link fairychess-web
   

3. 重新运行Browserify打包命令。

5. 检查TypeScript编译配置 #

确认tsconfig.json中的paths配置（如果有）是否会导致编译后的模块路径异常，确保tsc生成的__importStar(require("fairychess-web"))中的模块名是Browserify能识别的标准名称。

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