【前言】
现在有这么一个场景，比如一个项目A中引用了一个npm包a, 如何高效地进行联调，当然如果直接调试npm包就能搞定，就不用联调，但很多情况并不如此。
现在提供一种思路：
在a中通过监听文件变化，重新进行编译，得到输出文件build-a.js, a项目中的package.json中的main字段也指向build-a.js. 这样，我们可以实时得到最新的编译文件。然后通过npm link将A中对应的包a软链到我们的a工程中，这里可以通过去监听文件变化刷新页面。最终我们可以得到这么一个效果：
a包中的代码发生变化，工程A起server的页面相应地发生变化，得到相应的效果。
【实战】
1. 直接通过vue-cli生成一个测试项目vue-test-a, 在根目录下简单的写一个vue.config.js文件，内容如下
// vue.config.js
module.exports = {
configureWebpack: {
watch: true //监听文件变化，触发重新编译，默认的HMR猜猜会忽略node_modules，所以这里需要增加这个配置参数
}
}
修改App.vue文件
<template>
<div id="app">
123
<button @click="test">output a.id</button>
</div>
</template>
<script>
import a from 'vue-test-npm-a';
export default {
methods: {
test() {
a()
}
}
}
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
2. 此时，项目会报错，原因是没有vue-test-npm-a模块，接着创建vue-test-npm-a包，这里方便起见，直接通过rollup创建一个npm包。
先创建一个vue-test-npm-a的目录，里面通过npm init --y 初始化，然后添加rollup.config.js，最终的结构如下：
.
├── build
│ └── bundle.js
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
├── foo.js
└── main.js
//foo.js
export default 129
// src/main.js
import foo from './foo.js';
export default function () {
console.log(foo);
}
// rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'build/bundle.js',
format: 'es'
},
watch: {
include: 'src/**'
}
};
//package.json
{
"name": "vue-test-npm-a",
"version": "1.0.0",
"description": "",
"main": "build/bundle.js",
"scripts": {
"build": "rollup --config rollup.config.js --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3. 至此，用于测试的npm包构建完毕。接着通过npm link 将之前的项目中的vue-test-npm-a软链到我们刚才创建的包工程上。
具体操作是先在vue-test-npm-a根目录下执行:
npm link
然后在vue-test-a的根目录下执行：
npm link vue-test-npm-a
然后通过yarn serve 启动 vue-test-a, 通过npm run build启动 vue-test-npm-a。
现在，修改vue-test-npm-a中的代码，vue-test-a对应也会发生变化了！
【写在最后】
如果大家有更好的方法调试npm包，欢迎留言！
