AI摘要：文章介绍了使用npm link在本地开发调试NPM包的方法，通过将包链接到全局再链接到项目中实现测试。针对webpack+eslint环境下link包被eslint检查的问题，提供了设置symlinks为false或创建.eslintignore文件两种解决方案，后者可同时支持热更新。

新开发或修改的 NPM 模块，如何在项目中试验？最近在做小工具，这个问题摆在面前！但其实 npm 本身已经对此类情况提供了专门的 npm link 指令。

例如我现在要开发一个cafe-directive模块，我模块package.json，如下：

{
  "name": "cafe-directive",
  "version": "1.0.0",
  "description": "vue 通用指令",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel ./src --presets babel-preset-es2015 --out-dir ./lib"
  },
  "keywords": [
    "directive"
  ],
  "author": "wangdaodao <hi@wangdaodao.com>",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

这里，我执行下面的方法：

# 先去到模块目录，把它 link 到全局
cd path/to/cafe-directive
npm link

# 再去项目目录通过包名来 link
cd path/to/my-project
npm link cafe-directive

到这里，就达到了引用的目的了。

但是，这还完，如果你用的webpack+eslint，会发现eslint对你link的包起作用了，这个现象是因为webpack会把link的包resolve成他们的真实地址，所以就不受ignore限制了。

有两种解决方案：
第一种：设置symlinks，这种方法，如果改了测试依赖模块的代码，项目不会热更新了。

# vue cli3解决办法
// vue.config.js添加如下内容
module.exports = {
  chainWebpack: config => config.resolve.symlinks(false)
}
# webpack项目
module.exports = {
  //...
  resolve: {
    symlinks: false
  }
};

第二种：建一个.eslintignore文件，写入测试依赖模块地址，例如我这里，文件夹目录为cafe-directive：

**/cafe-directive

这样，既可以热更新，又排除eslint的检查。