一、前提

作为前端程序员，我们知道使用组件的一种方式就是npm安装开源的组件，然后在项目中引用。
但是，作为组件开发者，要调试组件，是不是要每次把组件打包上传到npm，然后在项目中npm安装再使用？
使用npm link命令可以在开发组件的同时，在项目中调试。

组件目录：npm link 项目目录： npm link 包名/相对路径注意： 包名不是文件夹名，包名看package文件，其中

但是，问题来了。话不多说，npm link后启动不了项目 的往下看：

二、错误场景：

在以上操作无误之后（在项目中 npm link 包名/相对路径 ），再运行项目，发现项目运行不了了，2333333

三、排查第一步

步骤

去项目中的node_modules文件夹（没错，就是你npm install产生的文件夹，那个你最不想看的文件夹），找一下你npm link过去的包。

结果

是不是就是把你整个组件代码拷贝过去了？

所以呢

代码直接拷贝过去不一定能用，原因：

  1. 入口文件不够纯粹（组件中在入口文件中添加了测试用例，真正打包到npm上是没有测试用例的）
  2. 组件本地开发环境有很多npm包（也就是去组件目录中的node_modules文件夹）在打包到npm上之后是没有的，就是所说的开发环境和生产环境
  3. 组件本地开发环境中的npm包（也就是去组件目录中的node_modules文件夹）和项目中的npm包冲突了

再然后呢

你项目就跑不起来了，233333

四、解决办法

先看思路

项目中找到组件包

项目中的node_modules文件夹找到通过npm正常安装的包（这时候包下面的node_modules中是生产环境所需要的包），大体结构如下：

  • 包名/文件名
  • lib
  • font
  • 其他的一些东西
  • png
  • main.css
  • main.js
  • node_modules
  • packge.json
  • README>md

项目用yarn为什么启动不了 项目启动不了,怎么测试_webpack


开发人员本地测试改动代码，对应的是lib里面的内容。

解决办法

1.手动替换

将组件打包 npm run build:publish 之后的lib文件夹替换掉项目中的lib文件夹

2.操作系统的link命令

link -s 组件目录/dist/lib 项目目录/node——modules/组件包名目录/lib

如此一来，每次在组件开发中运行npm run build ，项目中的node_modules会同步更新
注意：每次组件中更新代码都需要npm run build：publish

注意

1. ``npm run build:publish``命令需要自己配置，npm run build 生成的文件名会带上hash值，而正式发布到npm的包是不带hash值的。
2. 入口文件一般是main.js或者index.js（webpack中自行配置的），不同项目打包后入口文件的位置不同，就比如上面main.js入口文件在lib文件夹下，在引用的时候也要住注意 ``require('包名/lib')``