本地开发调试NPM包

新开发或修改的 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的检查。

添加新评论