本地开发调试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
的检查。