记录一次fork前端项目后发布到npm的过程
背景
由于使用到的一个开源组件无法满足需求, 因此需要对开源组件进行修改扩展
fork
首先fork项目到自己的仓库
以https://github.com/chenquincy/vue-dynamic-form-component为例
fork到自己的仓库
https://github.com/iminifly/vue-dynamic-form-component
修改
clone到本地
git clone https://github.com/iminifly/vue-dynamic-form-component.git
业务代码修改
组件改动暂不多说, 根据自己的需要去改就行, 我这里只是添加了两个配置项
本地修改完成, 提交到GitHub仓库
webpack配置修改
我这里修改了组件的名称和版本, 改动的地方主要在package.json里, 如下
第2行 name
第3行 version
第5行 author
第16行 repository
第22行 build里的 --name
第26行 main 这里特别重要, 因为改了name, 所以main必须要同步改下, 否则发布到npm后无法正常使用
{
"name": "vue-dynamic-form-component-iminifly",
"version": "2.8.6",
"license": "MIT",
"author": {
"email": "iminifly@outlook.com",
"name": "iminifly",
"url": "https://github.com/iminifly/"
},
"keywords": [
"vue",
"dynamic",
"form",
"component"
],
"repository": {
"type": "github",
"url": "https://github.com/iminifly/vue-dynamic-form-component"
},
"scripts": {
"dev": "vue-cli-service serve",
"build": "vue-cli-service build --target lib --dest lib --name vue-dynamic-form-component-iminifly ./packages/index.js",
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"main": "./lib/vue-dynamic-form-component-iminifly.umd.min.js",
"typings": "types/index.d.ts",
"vetur": {
"tags": "vetur/tags.json",
"attributes": "vetur/attributes.json"
},
"peerDependencies": {
"element-ui": "^2.11.1",
"vue": "^2.6.10"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
"@vue/cli-plugin-eslint": "^3.8.0",
"@vue/cli-service": "^3.8.0",
"@vue/eslint-config-standard": "^4.0.0",
"@vuepress/plugin-google-analytics": "^1.2.0",
"babel-eslint": "^10.0.1",
"element-ui": "^2.11.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^7.0.0",
"sass": "^1.53.0",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10",
"vuepress": "^1.0.1",
"vuepress-plugin-sitemap": "^2.1.2"
}
}
发布
申请npm账号
https://www.npmjs.com/signup
填写用户名邮箱密码后一步步根据提示验证邮箱即可, 这部分网上资料很多, 唯一要注意的是国外网站不稳定, 有可能你访问不了
本地切换npm仓库
npm config set registry=https://registry.npmjs.org
本地登录npm账户
输入命令
npm login
根据提示, 输入用户名, 邮箱, 密码
本地编译打包项目
进入项目输入
npm run build
发布到npm公共仓库
打包完成后继续输入命令
npm publish
注意, 每次发布前要修改版本号
验证
访问https://www.npmjs.com/
搜索vue-dynamic-form-component-iminifly
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!