修改node_modules中element-ui代码后不生效，如何快速测试？

1. 修改node_modules后没生效，是不是缓存的问题？ #

大概率和缓存以及Element-UI的编译机制有关，我给你理清楚关键原因：

• 首先，Vue项目的dev服务（一般基于webpack）会有构建缓存，如果你之前已经编译过Element-UI，它会复用之前的缓存文件。你可以先试试：
  • 直接重启npm run dev服务，很多时候重启就会重新读取修改后的文件
  • 删除项目根目录下的node_modules/.cache文件夹（如果存在），强制webpack重新构建
• 更核心的点：Element-UI在node_modules里默认提供的是预编译后的产物（存放在lib目录下），而你可能修改的是它的源码（src目录）。dev环境下项目加载的是lib里编译好的文件，所以改源码自然不会生效，这时候需要手动重新编译Element-UI的源码。

2. 新手如何更新node_modules里的现有代码？ #

修改node_modules里的文件操作很直接，但要适配Element-UI的编译逻辑：

• 第一步：找到目标组件的源码，比如node_modules/element-ui/src/components/button，直接修改里面的代码
• 第二步：进入node_modules/element-ui目录，执行它的编译命令：npm run build，这会把你修改后的源码重新编译到lib目录
• 第三步：回到项目根目录，重启npm run dev，就能看到修改后的效果了

注意：这种修改是临时的！只要你执行npm install、npm update或者删除node_modules重新安装，所有修改都会被覆盖——因为node_modules是依赖的安装目录，npm会重新下载官方的Element-UI包。

3. 快速测试必须要fork吗？ #

完全不需要！fork是长期维护自定义版本才需要做的操作，快速测试的话，直接修改node_modules里的代码就足够了：

• 按照上面的步骤修改并重新编译Element-UI，就能快速验证你的想法
• 如果你怕修改被意外覆盖，可以先备份一下修改后的文件，或者在测试期间不要执行任何会更新依赖的命令（比如npm install）
• 只有当你需要长期使用自己修改后的Element-UI版本，或者要把修改贡献给官方的时候，才需要fork仓库，然后把项目里的Element-UI依赖改成你fork后的仓库地址（比如在package.json里写成"element-ui": "git+https://github.com/你的用户名/element-ui.git"）

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