• 如何开发自己的npm依赖包,开发-本地调试-打包发布到自己的镜像库


    开发自己的npm依赖包

    如果是开发一个全新的依赖

    1. 新建文件夹如custom(后面都使用custom表示此开发得的依赖)
    2. 执行npm init 初始化项目
    3. 在pacakge.json中定义当前开发依赖包的name和version,如不需要添加命名空间name直接为包名即可。
      在这里插入图片描述4. 业务及逻辑开发

    本地调试

    依赖开发过程中可以在其他本地项目中(后面使用A表示)使用调试,以查看实时效果

    1. 在custom根目录下执行命令:
    npm link
    
    • 1

    在这里插入图片描述

    1. 在A的根目录下执行
    npm link Pname
    
    • 1

    其中Pname就是custom依赖的名称,即package.json中的name字段
    在这里插入图片描述

    1. 检查A项目是否已经连接到了custom
      在A的node_modules文件夹下查看是否有custom依赖包
      在这里插入图片描述
      4.A连接上custom后就可以通过引入node_modules中的依赖的方式引用custom进行测试,custom本地修改后,A项目中也会实时更新。
      在这里插入图片描述

    打包:

    1. 添加webpack.config.js文件
      如果不想暴露源码,可以先通过webpack打包后提供打包后的文件。

    2. 检查项目package.json的name和version,这将作为包的名称和版本
      在这里插入图片描述

    3. 根据实际情况配置package.json中的main(入口文件)等字段
      在这里插入图片描述

    4. 执行打包命令:

    npm pack
    
    • 1

    执行完后会在项目根目录下生成一个[packagename].tgz压缩文件
    在这里插入图片描述
    补充:给依赖添加命名空间
    如果希望打包的文件具有命名空间如@vue,只需修改pacakge.json的name,在前面加上命名空间,再执行步骤2的打包命令。生成的打包文件名就为test-tiny-ui-framework.tgz
    在这里插入图片描述

    上传打包文件到自己的镜像库

    我使用的是公司的Nexus Repository,将刚刚打包的文件上传到对应目录即可。

  • 相关阅读:
    PHP框架详解 - Laravel 框架
    leetcode 33. 搜索旋转排序数组-java
    axure9.0 工具使用思考
    I2C——笔记
    2022年全国大学生数学建模竞赛C题思路
    如何运行HBuilder内置浏览器
    Unity之Hololens如何实现3D物体交互
    通信行业的必备网站
    2024骨传导耳机哪款值得买?健身人士说这五款骨传导耳机好~
    【C++从入门到精通】第2篇:C++基础知识(中)
  • 原文地址:https://blog.csdn.net/lingliu0824/article/details/125764527