如何发布自己的npm包（超详细步骤，博主都在用） |
您所在的位置：网站首页 › html怎么发布 › 如何发布自己的npm包（超详细步骤，博主都在用） |
如何发布自己的npm包（超详细步骤，博主都在用）
|
发布自己的npm超详细步骤
前沿： 从去年毕业，vue掌握的还算熟练应用了，做过的vue项目也有十几个了吧，每次做项目的时候，有些组件老是使用，拷贝来拷贝去的使用。我就想把这些组件封装到一起，以后做项目可以直接使用。一开始我不知道封装，在网上找资料学习，大部分的帖子都没有把封装包的方式和发包方式讲的详细，今天我特意自我总结分享发布自己的npm的步骤，让每个人都可以封装自己的包，当然我的方式只是封装包一种方式，至少可以封装正常npm下载使用（大佬有好的方式，勿喷！） 本人发布的简单包 创建项目 主要是基于使用cli3初始化一个项目工程： 全局安装vue-cli： npm install -g @vue/cli 创建一个vue项目： vue create llgtfoo-components-boxs 注：这部分我就不详细说了，相信大家应该都会 在项目中添加组件库文件夹： 在根目录下新建一个plugins文件夹，用来放组件，项目文件结构为： （我的是跟src平级 创建plugins组件文件夹） 添加配置文件 项目根目录下面添加vue.config.js文件，写入以下内容： （主要是配置webpack的打包） const path = require('path') module.exports = { // 修改 pages 入口 pages: { index: { entry: 'src/main.js', // 入口 template: 'public/index.html', // 模板 filename: 'index.html' // 输出文件 } }, // 扩展 webpack 配置 chainWebpack: config => { // @ 默认指向 src 目录 // 新增一个 ~ 指向 plugins config.resolve.alias .set('~', path.resolve('plugins')) // 把 plugins 加入编译，因为新增的文件默认是不被 webpack 处理的 config.module .rule('js') .include.add(/plugins/).end() .use('babel') .loader('babel-loader') .tap(options => { // 修改它的选项... return options }) } } 编写组件 我这是把封装的组件、封装的指令和封装的过滤器每个都写在分类文件夹中，后面在合理添加并继续封装。 下面我以datetime这个组件为例：（是一个时间显示组件）  components下面建组件date-time.vue和单独暴露组件的index.js文件：
date-time.vue内容如下： {{ nowDate }} {{ nowTime }} export default { name: "dateTime", props: { styleObj: {//客户端传递的样式 type: Object, default: () => ({ fontSize: 25, color: ["#dcedff", "#5ca9ff"] }) } }, computed: { useStyleObj() {//用computed是为了暴露客户端的styleObj样式属性值可以选填，更加灵活 let size = 25; let color = ["#dcedff", "#5ca9ff"]; if (this.styleObj.fontSize) { size = this.styleObj.fontSize; } if (this.styleObj.color) { color = this.styleObj.color; } return { fontSize: size, color: color }; }, styleObject() {//根据客户端传递的样式值配置文字的渐变色 return { background: `linear-gradient(180deg,${this.useStyleObj["color"][0]}, ${ this.useStyleObj.color.length > 1 ? this.useStyleObj["color"][1] : this.useStyleObj["color"][0] })`, "-webkit-background-clip": "text" }; } }, data() { return { timer: null, nowWeek: "", nowDate: "", nowTime: "" // styleBox: {} }; }, created() { this.timer = setInterval(() => { this.setNowTimes(); }, 1000); //时间 }, beforeDestroy: function() { if (this.timer) { clearInterval(this.timer); } }, methods: { setNowTimes() {//时间拼接方法 const myDate = new Date(); const wk = myDate.getDay(); const yy = String(myDate.getFullYear()); const mm = myDate.getMonth() + 1; const dd = String( myDate.getDate() myDate.getHours()}` : myDate.getHours() ); const min = String( myDate.getMinutes() myDate.getSeconds()}` : myDate.getSeconds() ); const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; const week = weeks[wk]; this.nowDate = `${yy}/${mm}/${dd} ${week}`; this.nowTime = `${hou}:${min}:${sec}`; this.nowWeek = week; } } }; //样式文件index.js文件内容： 为组件提供 install 方法，供组件对外按需引入 import dateTimes from "./date-time.vue"; dateTimes.install = Vue => Vue.component(dateTimes.name, dateTimes); //注册组件 export default dateTimes;注：这个单独暴露组件的index.js，意思是如果这个工程值封装一个组件使用的话，就用这个index.js文件暴露install即可了。 plugins文件夹下面新建一个index.js文件，为了统一导出所有组件及暴露 install 方法。之前的 index.js 只是安装单个组件，而现在这个 index.js 是循环安装所有组件 所有指令、过滤器统一暴露出去，可以按需引用组件，此时plugins文件夹的内容为
6.在本地页面中使用组件： 在main.js中引入： 在home.vue中使用组件： 在页面中不用引入使用使用组件，因为是全局注册了组件库，所以可以直接使用标签 ，这个标签与组件文件中的date-time.vue里的name保持一致，只不过一个是驼峰式写法，一个是标签名称。这在Vue中很常见。
name:包名
version:包的版本号，每次发包这个版本号都要改
description：包的描述
private：是否私有，一般都是false
author:作者
license：npm包协议
keywords：关键字，供npm上模糊搜索到包
.gitignore文件中添加：
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
src/
plugins/
public/
vue.config.js
babel.config.js
*.map
*.html
把包的一些测试文件过滤掉，最终打包只留下直接封装的文件，即plugins中封装的暴露组件 在终端执行npm run lib 即可，执行结果： 
发布包
终端中执行发包命令 npm login 登录（如果没有npm账号需要自己注册，并认证邮箱） 这样既登录成功  需要 one-time 的话，参照：获取one-time步骤（要这一步npm贼恶心） 在输入npm publish 发布包，出现包名加版本号，即发布成功npm 上能找到自己发布的包： 
使用发布的包 npm i llgtfoo-components-box --save 在项目文件mainjs中引入
import llgtfooComponentsBox from "llgtfoo-components-box";
import "llgtfoo-components-box/dist/llgtfoo-components-box.css";
Vue.use(llgtfooComponentsBox);
注：全局使用,组件可以单独引用
在项目中直接使用组件中的name即可 例如： |
我这里是统一暴露组件、指令、过滤器：
测试可以全局使用组件，说明封装的组件没有问题，下面可以打包了。【本文地址】