记录一次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