在平时的项目开发中, 经常会遇到一些通用组件, 有时候可能需要在不同的项目里使用这个组件,直接拷贝的话后期维护很困难, 因此, 需要将自己的通用组件发布到 NPM 上进行集中管理, 新项目里直接安装引入即可使用。
1. 如何发布版本
下面是开发一个 Vue 单组件的例子:
1.1 安装 vue-cli
npm install -g @vue/cli
1.2 安装完成后, 还需要安装 vue/cli-service-global
npm install -g @vue/cli-service-global
这个包的作用, 可以直接启动单个 vue 文件, 方便我们调试;
安装完成后, 新建一个项目目录,
1.3 初始化项目
npm init
一路回车完成后, 新建一个 vue 文件, 例如: index.vue
1.4 启动调试预览:
vue serve index.vue
打开 http://localhost:8080/
开始调试组件, 调试完成后,
1.5 将此组件打包发布;
在根目录新建一个 js 文件, 引入组件进行注册, 例如我新建一个 index.js
import train from "./index.vue";
const install=(Vue)=>{
Vue.component(train.name, train)
}
export default install
这里需要注意: train.name 这里就是注册组件名称, 若是组件里没有写 name, 这里需要手动写一个名称;
在 package.json 里写入打包命令;
{
"name": "train",
"version": "1.0.0",
"description": "",
"scripts": {
"build": "vue build --target lib ./index.js --dest train --name train"
},
"author": "",
"license": "ISC"
}
build 中的参数分析:
–target lib: 打包成库（Library）与普通的构建应用不一样，它会在 dist 目录下生成对应的 umd.js 文件，也就是通用模块定义的 js 文件。一般用于组件/工具库的入口文件，我们可以在静态 html 以及 Vue CLI 等项目中直接引入并使用。如果不进行构建，只能在 Vue CLI 项目中使用，无法引入一个 js 直接使用。
–dest train: 指定输出目录 (默认值：dist)
–name train: 库或 Web Components 模式下的名字 (默认值：package.json 中的 “name” 字段或入口文件名)
进行打包操作, 直接执行 npm run build 命令:
打包完成后,打包目录多出来了如图的文件;
什么是 umd?
commonJS、requireJS 都是用来处理JS模块化的，其中 commonJS 用来给 nodejs 使用（使用了 module.exports 的用法）。后来使用 import/export 来导出/引入模块。umd 是统一模块定义方法，可以兼容所有其他的模块定义方法。
打包完成后, 将生成的 xx.umd.js 写入到 package.json 的 main 入口;
{
"name": "train",
"version": "1.0.0",
"description": "",
"main": "train/train.umd.js",
"scripts": {
"build": "vue build --target lib ./index.js --dest train --name train"
},
"author": "",
"license": "ISC"
}
1.6 准备发布:
这里需要注意, 若是使用过 npm, yarn 等, 建议安装一个 nrm ,手动切换到 npm 服务器
若是需要发布到内网的JD npm, 使用 npm 直接切换到jd源, 具体登陆和发布流程一致(暂未尝试发布)
下面以发布到 npm 为例子: 注意不要将隐私数据/代码/发布到外网!!!
切换到 npm 之后, 在项目根目录所在的控制台执行: npm login
若是自己没有 npm 账号, 需要先注册: www.npmjs.com/
若是在登录过程中提示: npm notice Please check your email for a one-time password (OTP)
需要输入验证码, 请打开自己的注册邮箱查看验证码:
若是看到: Logged in as 你的昵称 on registry.npmjs.org/.
表示登录成功
1.7 开始发布
执行 npm publish 开始发布
若是遇到403错误提示没有权限, 可能是我们的包名和 npm 上已有的包名重复了, 需要换一个名字再试;
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/train - You do not have permission to publish "train". Are you logged in as the correct user?
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy
将 package.json 中的 name 换个其他名字在发布一次;
我将原有的 train 改为 supper-big-train
然后重新发布;这样就直接成功了
1.8 查看发布效果
在个人中心,查看我的包列表: 就可以看到刚刚发布的包了
2 项目中使用我们的组件
发布成功后, 看看怎么在其他项目中使用我们的组件
先安装组件: npm install supper-big-train --save
安装成功后引入组件使用
import train from 'supper-big-train'
import 'supper-big-train/train/train.css' // 引入样式文件
Vue.use(train)
在页面里直接使用 就可以看到组件效果了!
若要在实际项目里调试, 还有一个小技巧!
直接在组件目录打包完成后, 将
直接拷贝到我们已安装过 组件的项目的 node_modules 目录里可以直接看到效果,
打开 node_modules 目录, 找到插件目录supper-big-train , 然后直接拷贝覆盖就可以了!
3. 如何更新版本:
修改完代码后需要修改package.json中的版本号, 然后和发布流程一样执行发布即可。
