npm 发布自己组件包
npm 发布自己组件包
发布到 npm 上
- 首先创建自己的npm账号
npm init
npm install
npm uninstall
npm config edit // 编辑
npm config ls -l // 查看 .npmrc 配置文件
npm config get cache // 查看 npm 缓存目录
npm config get prefix // 查看通过 npm install -g 和 cnpm install -g 或者yarn global add 安装包的基础路径, lib/node_modules
npm root -g // 查看全局安装包路径
npm get registry // 查看本地源地址
- 初始化普通项目项目
npm init
// 包名 不能使用大写字母、驼峰命名法
package name: vue-message-box
// 版本
version:
// 介绍
description:
// 入口
entry point
// 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
test command
//
git repository
//
keywords
//
author
//
license:(ISC)
按照默认选项，我们初始化项目已经做好额，生成的 package.json 内容如下
{
"name": "vue-message-box",
"version": "1.0.0",
"description": "基于Vue的一个弹出窗",
"main": "index.js",
"scripts": {
"test": "npm start"
},
"author": "yingzi",
"license": "ISC"
}
完整 package.json
{
"name": "Hello World", //name属性就是你的模块名称
"version": "0.0.1", //version必须可以被npm依赖的一个node-semver模块解析
"author": "张三", //"author"是一个码农
"description": "第一个node.js程序", //一个描述，方便别人了解你的模块作用，搜索的时候也有用。
"mian":"index.js", //main属性指定了程序的主入口文件.
"keywords":["node.js","javascript"], //一个字符串数组，方便别人搜索到本模块
"repository": { //指定一个代码存放地址，对想要为你的项目贡献代码的人有帮助。
"type": "git",
"url": "https://path/to/url"
},
"license":"MIT", //你应该为你的模块制定一个协议，让用户知道他们有何权限来使用你的模块，以及使用该模块有哪些限制,如BSD-3-Clause 或 MIT之类的协议
"engines": {"node": "0.10.x"},
"bugs":{ //填写一个bug提交地址或者一个邮箱，被你的模块坑到的人可以通过这里吐槽
"url":"https://github.com/luoshushu",
"email":"bug@example.com"
},
"contributors":[{"name":"李四","email":"lisi@example.com"}], // "contributors"是一个码农数组。
"scripts": { //指定了运行脚本命令的npm命令行缩写。比如：输入npm run start时，所要执行的命令是node index.js。
"start": "node index.js"
},
"dependencies": { //指定了项目运行所依赖的模块
"express": "latest",
"mongoose": "~3.8.3",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
"devDependencies": { //指定项目开发所需要的模块
"bower": "~1.2.8",
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"browserify": "2.36.1",
"grunt-browserify": "~1.3.0",
}
}
-package.json 详细介绍： http://caibaojian.com/npm/files/package.json.html
- 登陆 npm
npm login
按照提示 输入 用户名密码即可
登陆是可能出现错误
npm ERR! code E409
npm ERR! 409 Conflict - PUT https://registry.npm.taobao.org/-/user/org.couchdb.user:wangjiaxin - [conflict] User wangjiaxin already exists
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/wangjiaxin/.npm/_logs/2021-12-13T07_24_53_438Z-debug.log
解决办法
npm login --registry https://registry.npmjs.org
或者修改 .npmrc 文件
registry=https://registry.npm.taobao.org/ 替换成 registry=https://registry.npmjs.org
426 Upgrade Required - PUT http://registry.npmjs.org/-/user/org.couchdb.user:wangjiaxin
解决办法
npm login --registry https://registry.npmjs.org
登陆成功
Logged in as wangjiaxin on https://registry.npmjs.org/.
发布包
npm publish --registry https://registry.npmjs.org
可能遇见问题
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/vue-message-box - Package name too similar to existing package vue-messagebox; try renaming your package to '@wangjiaxin/vue-message-box' and publishing with 'npm publish --access=public' instead
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, or
npm ERR! 403 on a server you do not have access to.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/wangjiaxin/.npm/_logs/2021-12-13T07_33_48_520Z-debug.log
// 包名 vue-messagebox 和我们要发布的vue-message-box 包名太相似， 并改为用 npm publish --access=public 命令发布
问题二
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/vue-wjxlayout-box - Forbidden
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, or
npm ERR! 403 on a server you do not have access to.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/wangjiaxin/.npm/_logs/2021-12-13T07_45_11_809Z-debug.log
原因是第一次注册npm账号，绑定邮箱没有验证，不允许发布包，到邮箱里验证一下即可
最后成功发布
问题三、重新登陆登陆授权即可
You need to authorize this machine using `npm adduser`
问题四、可能是包名重复，更新包名
You do not have permission to publish "npm-vue-components". Are you logged in as the correct user
Twilio Authy 做验证使用
成功发布显示内容
npm notice
npm notice 📦 vue-wjxlayout-box@1.0.0
npm notice === Tarball Contents ===
npm notice 274B .idea/modules.xml
npm notice 458B .idea/npm-package.iml
npm notice 163B index.js
npm notice 79B npmrc
npm notice 212B package.json
npm notice === Tarball Details ===
npm notice name: vue-wjxlayout-box
npm notice version: 1.0.0
npm notice filename: vue-wjxlayout-box-1.0.0.tgz
npm notice package size: 782 B
npm notice unpacked size: 1.2 kB
npm notice shasum: 90feeedb143421ef4cef7733d39d1156e82c6079
npm notice integrity: sha512-xz69oRusl60Kq[...]5X7TdaEY27VZQ==
npm notice total files: 5
npm notice
+ vue-wjxlayout-box@1.0.0
删除 已发布包
npm unpublish --registry=https://registry.npmjs.org vue-wjxlayout-box@1.0.0
// 删除成功
- vue-wjxlayout-box@1.0.0
编辑一个vue组件发布到npm，并在项目中使用
- 使用 vue-cli 创建一个项目
vue create yingzi-npm-conponment
- 新增目录 package,修改src 目录为 examples，在package 目录下新建index.js 内容如下
// 安装导出组件
import UseMessageBox from "./message-box/index.js";
import UIButton from "./button";
// 存储组件列表
const components = [
UseMessageBox,
UIButton
];
const install = function(Vue) {
// 遍历注册全局组件
components.forEach(component => {
Vue.component(component.name, component);
});
Vue.prototype.$UseMessageBox = UseMessageBox;
};
/* istanbul ignore if 判断是否是直接引入文件 */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
// 导出的对象必须具有 install , can能被 Vue.use() 方法安装
export default {
install,
UseMessageBox,
UIButton
};
- 新建 组件 UIButton 和 UseMessageBox
// 新建button 文件夹 下面新建 button.vue 和 index.js
// /src/button.vue
<template>
<div>
<slot>
我是组件按钮
</slot>
</div>
</template>
<script>
export default {
name: "UIButton",
}
</script>
// index.js
import UIButton from './button'
UIButton.install = function (Vue) {
Vue.component(UIButton.name, UIButton);
}
export default UIButton;
// 新建message-box文件夹 下新建 文件 index.js main.vue main.js
// /src/main.vue
<template>
<transition name="el-fade-in-linear">
<div class="message_box_layout" v-if="showClose">
<div class="message_box_content">
<slot name="title">
<div class="message_box_title">
<div class="message_box_title_content">
<span>{{ title }}</span>
</div>
</div>
</slot>
<slot name="section">
<div class="message_box_section">
{{ message }}
</div>
</slot>
<slot name="footer">
<div class="message_box_footer">
<button style="width: 125px" v-if="isShowCancel" @click="cancel"
>取消</button
>
<button
style="width: 125px; border: 0"
:style="{ backgroundColor: confirmBackgroundColor }"
@click="submit"
>确定</button
>
</div>
</slot>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
isShowClose: {
type: Boolean,
default: false
}
},
watch: {
isShowClose (v, o) {
console.log(v, o)
}
},
data() {
return {
confirmBackgroundColor: "",
showClose: "",
options: "",
isShowCancel: "",
title: "提示",
message: "提示内容"
};
},
created() {
console.log(this.props, this.isShowClose)
this.showClose = this.isShowClose;
},
methods: {
showMessageBox (option) {
this.options = option || undefined;
this.title = option.title || '提示';
this.message = option.message;
this.isShowCancel = !!option.isShowCancel;
this.showClose = true;
this.confirmBackgroundColor = option.confirmBackgroundColor || '';
},
cancel(){
if (this.options.cancel) {
this.options.cancel();
}
this.showClose = false;
},
submit(){
if (this.options.submit) {
this.options.submit();
}
this.showClose = false;
},
},
};
</script>
<style scoped>
.message_box_layout {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0, .7);
z-index: 9999;
}
.message_box_content {
width: 478px;
height: 240px;
background: #FFFFFF;
border-radius: 2px;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
.message_box_title {
width: 100%;
height: 52px;
background: #FAFAFA;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 32px;
padding-right: 21px;
box-sizing: border-box;
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
}
.message_box_title_content {
display: flex;
align-items: center;
}
span{
margin-left: 8px;
font-weight: 600;
}
.message_box_section {
width: 100%;
height: 129px;
padding: 48px 63px 0;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
}
.message_box_footer {
display: flex;
justify-content: center;
}
button {
width: 125px;
height: 32px;
border: 1px solid rgba(24,144,255,.8);
background: rgba(24,144,255,.8);
color: #FFFFFF;
cursor: pointer;
}
button:active {
background: rgba(24,144,255,.4);
}
</style>
// /src/mian.js
import Vue from "vue";
import UseMessageBoxComponent from "./main.vue";
// import merge from "./mergepro"
const MessageBoxConstructor = Vue.extend(UseMessageBoxComponent);
let instance;
const initInstance = () => {
instance = new MessageBoxConstructor({
el: document.createElement('div')
})
instance.$mount();
['modal', 'showClose', 'isShowClose'].forEach(prop => {
console.log('----- showClise -----', prop)
if (instance[prop] === undefined) {
instance[prop] = false;
}
});
console.log(instance)
document.body.appendChild(instance.$el);
}
const UseMessageBox = function () {
if (!instance) {
initInstance();
}
}
UseMessageBox.success = (option) => {
UseMessageBox();
instance.showMessageBox(option);
}
export default UseMessageBox;
export { UseMessageBox }
// 新建index.js
import UseMessageBox from "./src/main.js";
// UseMessageBox.install = function (Vue) {
// Vue.component(UseMessageBox.name, UseMessageBox);
// };
export default UseMessageBox;
配置vue.config.js
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
}
}
package.json 下添加新的script,添加main配置
"main": "dist/myLib.common.js",
"script": {
"lib": "vue-cli-service build --target lib --name myLib packages/index.js"
}
// description 组件库的描述文本
// keywords 组件库的关键词
// license 许可协议
// repository 组件库关联的git仓库地址
// homepage 组件库展示的首页地址
// main 组件库的主入口地址(在使用组件时引入的地址)
// private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false
// publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库
运行 npm run lib 生成组件包发布到 npm
安装使用
import YingZi from "yingzi-vue-components"
import 'yingzi-vue-components/dist/myLib.css';
Vue.use(YingZi)
补充npm发包文件白名单
//当执行npm publish命令，默认包含的文件（不区分大小写）有
package.json
README (and its variants)
CHANGELOG (and its variants)
LICENSE / LICENCE
package.json属性main指向的文件
默认忽略的有
.git
CVS
.svn
.hg
.lock-wscript
.wafpickle-N
.*.swp
.DS_Store
._*
npm-debug.log
.npmrc
node_modules
config.gypi
*.orig
package-lock.json (use shrinkwrap instead)
// 想设置发布文件的黑名单，通过.gitignore或.npmignore这两个文件来设置忽略的文件或文件夹。
// 果你在项目中增加了 .npmignore，那么其会完全替代掉 .gitignore 的作用。
// 想设置发布文件的白名单，设置package.json中的files属性。
// 例如
files:["package.json","src"]
// 这里的优先级是files>.npmignore>.gitignore
npm 常用命令
npm -v //查看版本号
npm --help //查看npm所有命令
npm adduser //添加 npm 账号，也可以去npm官网注册
npm init //构建项目说明，生成 package.json文件
npm view jquery versions //查看历史版本信息(最多只能显示100条)
npm view node versions --json //查看所有版本信息
npm view jquery version //查看最新版本信息
npm info jquery //查看所有版本及jquery的信息
npm ls jquery //查看本地安裝的jquery版本
npm ls jquery -g //查看全局安裝的jquery版本
npm i jquery@3.2.3 //安裝指定版本
npm i jquery //安装推荐的版本
npm i jquery@latest //安裝指定、最新版本
npm install gulp 简写 npm i gulp //安装依赖
npm install gulp -S -D
npm install gulp@3.0.0 --save
npm update gulp //可以把当前目录下node_modules子目录里边的对应模块更新至最新版本
npm update gulp -g //可以把全局安装的对应命令行程序更新至最新版
npm uninstall gulp@3.0.0 --save //卸载依赖
npm install cnpm -g --registry=https://registry.npm.taobao.org //安装淘宝镜像
npm config list //查看npm的配置
npm config set registry https://registry.npm.taobao.org //设置淘宝镜像源
npm config set registry https://registry.npmjs.org //设置npm源
npm set disturl https://npm.taobao.org/dist //设置资源库从淘宝库获取
npm cache clean --force //清空npm本地缓存 ，用于对付使用相同版本号发布新版本代码的人
npm run dev / test / build //执行script命令
npm login //发布包时登录npm账号用的
npm publish //发布包到npm官方库
npm unpublish test //撤销已发布的包
npm unpublish test --force //强制撤销
npm unpublish test@1.0.2 //可以撤销发布自己发布过的某个版本代码
搭建私有npm
- 通过docker verdaccio 搭建
添加成员
npm set registry http://npm.xxxx.com
npm adduser --registry http://npm.xxxx.com
username:xxxx
password:xxxx
email: xxxx
自己搭建服务器发布包时存在上传文件件限制
- 发布 报错 413 Request Entity Too Large
http {
client_max_body_size 100m;
}
