如何在项目中调试本地包

前端_库日天
576 阅读2分钟

场景：在很多公司，都有自己封装的工具库或者组件库，那么在本地调试这些库的时候，该如何做到呢？

1.概念介绍

首先你必须知道一个概念，就是 nodejs 中对于包的管理。nodejs中的包管理工具就是npm。许多时候开发中并不满意npm的安装包的速度，所以也会安装cnpm or yarn这类全局包，进行包管理。

  1. 全局包安装在哪呢？

运行命令：

npm config list
# 或者
npm config ls -l
# 在输出的内容中找到下面这段代码，"C:\\Program Files\\nodejs" 就是全局包安装的路径
：prefix = "C:\\Program Files\\nodejs"
  1. 如何安装全局包
npm install -g xxx;

  1. 如何将本地包拷贝到全局包路径下呢？

    no,no,no，一定不是你想的那样！把整个文件夹拷贝到 "C:\Program Files\nodejs" 目录下。

作为程序员，我们肯定不会用这么粗鲁的手段解决问题。

  1. 首先cd 到你的本地包目录下
cd packages/Utils
  1. 运行以下命令，既可以将本地包安装到全局目录下。
npm link

2.实战演练

假设我们现在有本地依赖包 utils, 本地项目study;

  1. 链接（注册）项目
cd work/utils //进入项目目录`
yarn link //注册该项目
  1. 项目内引用
cd study  //进入目标项目
yarn link utils //建立链接
yarn install  // 以防万一

  1. 指向src目录

    1. 使用babel-plugin-import的情况
    extraBabelPlugins: [
[
        "import",
        {
            libraryName: "utils",
            //指向src`
            libraryDirectory:"src",
            style: true,
        },
        "utils",
    ]
]
    1. 不使用babel-plugin-import按需引入的情况。修改位置：utils的package.json内，main指向src下的入口。记得本地调试完要改回来哦。
    {
    "main":"src/index.ts"
}

  2. 项目内取消引用(调试结束)

cd work/utils
yarn unlink utils
yarn install --force
  1. 取消链接

以后还打算用的话可以跳过这步保留链接

cd work/utils // 进入包目录
yarn unlink // 取消link，之后不会再link到

  1. 注意事项

    如果项目内指向了src，修改依赖包里的代码后，在目标项目里没有及时更新最新的代码，建议修改依赖包的代码后重新加载一下项目，在依赖包项目上右键有一个reload from Disk的操作选项；

文章是自己总结写的，如果有存在不足之处，欢迎留言。谢谢！

avatar
文章
阅读
粉丝