高效地调试npm包总结

·  阅读 1624

【前言】

现在有这么一个场景,比如一个项目A中引用了一个npm包a, 如何高效地进行联调,当然如果直接调试npm包就能搞定,就不用联调,但很多情况并不如此。

现在提供一种思路:

a中通过监听文件变化,重新进行编译,得到输出文件build-a.js, a项目中的package.json中的main字段也指向build-a.js. 这样,我们可以实时得到最新的编译文件。然后通过npm linkA中对应的包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包,欢迎留言!

参考文献

github.com/allenGKC/Bl…

分类:
前端
标签: