如何在React Node项目中正确添加自定义修改的hls.js依赖？

问题根源 #

你之前的操作只复制了单个hls.js文件，而npm本地依赖需要完整的包结构（至少包含package.json来定义模块入口），另外file:/的路径写法不正确，导致npm无法正确解析依赖。

正确实现步骤 #

1. 确保hls.js打包产物符合规范 #

修改完hls.js源码后，执行npm run build，保留打包生成的完整dist目录及项目根目录的package.json，不要只提取单个hls.js文件。hls.js的package.json里定义了main/module字段，npm会通过这些字段找到正确的模块入口。

2. 配置本地npm依赖 #

• 在你的React项目根目录创建local_modules文件夹，然后把整个修改并打包后的hls.js项目目录复制到local_modules/hls.js下（即local_modules/hls.js内包含package.json、dist等文件）。
• 在项目的package.json中添加依赖：

  "dependencies": {
    // 其他依赖...
    "hls.js": "file:./local_modules/hls.js"
  }
  

• 执行npm install，此时npm会正确识别本地包，你就可以正常用import Hls from "hls.js"导入了。

3. 开发阶段更高效的方案：npm link #

如果需要频繁修改hls.js源码，推荐用npm link避免重复复制文件：

• 在修改后的hls.js源码目录下执行：

  npm link
  

• 切换到你的React项目目录，执行：

  npm link hls.js
  

之后你修改hls.js源码并重新npm run build，React项目会自动使用最新的本地包，无需重新安装依赖。

4. 若坚持使用单个文件导入（不推荐） #

如果只想用dist下的单个hls.js文件，注意它是UMD格式，在React项目中导入时需要适配：

// 假设hls.js放在src/lib目录下
import Hls from './lib/hls.js';
// 若默认导出失效，尝试：
const Hls = require('./lib/hls.js').default;

另外，UMD文件依赖浏览器环境的window对象，若出现兼容性错误，可在public/index.html中提前引入该脚本：

<script src="./lib/hls.js"></script>

然后在组件中直接使用全局变量window.Hls。

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