前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步。

前提:会使用 npm,有 vue 基础,了解一点 webpack

Are you ready?  Go!

目录

一、编写自己的npm包

  1. 新建一个空文件夹

  2. 进入文件夹,终端(cmd)运行 npm init

  

  完成后会在目录下生成一个 package.json 文件

  我们可以根据自己的需要补充文件内容

  这是我的:

 {
"name": "bing-test-publish-npm",
"version": "1.0.0",
"description": "布一个npm包",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --hot --inline",
"build": "webpack --display-error-details --config webpack.config.js"
},
"author": "bing",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"es6-promise": "^4.1.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue": "^2.5.9",
"vue-hot-reload-api": "^2.2.4",
"vue-html-loader": "^1.2.4",
"vue-loader": "^13.5.0",
"vue-router": "^3.0.1",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.9",
"vuex": "^3.0.1",
"webpack": "^3.9.1",
"webpack-dev-server": "^2.9.5"
}
}

  3. 配置完后,命令行运行 npm install 安装依赖包,安装完会生成一个node_modules目录

  4. 接下来新建两个文件夹 src(开发目录),dist(发布目录)

  5. 然后我们就可以在 src 目录下编写自己的组件吧

  我的文件目录

  

  app.vue

 <template>
<div class="helloName">
<input type="text" placeholder="请输入姓名" v-model="yourName"></input>
<div v-if="name">hello<span class="name">{{name}}!</span></div>
</div>
</template>
<script>
export default {
name:'helloName',
data () {
return {
yourName: ''
}
},
methods: { },
created(){
}
}
</script>
<style>
</style>

  index.js

 import helloName from './app.vue'
export default helloName

  webpack.dev.conf.js

 const path = require("path");
const webpack = require("webpack");
const uglify = require("uglifyjs-webpack-plugin"); module.exports = {
devtool: 'source-map',
entry: "./src/index.js",//入口文件,src目录下的index.js文件,
output: {
path: path.resolve(__dirname, './dist'),//输出路径,就是新建的dist目录,
publicPath: '/dist/',
filename: 'helloName.min.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
},
{
test: /\.js$/,
exclude: /node_modules|vue\/dist|vue-router\/|vue-loader\/|vue-hot-reload-api\//,
loader: 'babel-loader'
},
{
test: /\.(png|jpg|gif|ttf|svg|woff|eot)$/,
loader: 'url-loader',
query: {
limit: ,
name: '[name].[ext]?[hash]'
}
}
]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
]
}

  文件写好后,我们运行 npm run build,结果是会在 dist 目录下生成一个 helloName.min.js,就是我们在 webpack.dev.conf.js 中 filename 的值

  

  6. 将 package.json 中的 main 字段指向新生成的 helloName.min.js

  7. 新建一个 .npmignore 文件(npm忽略文件),可以把不需要发布的文件忽略,如果只有 .gitignore,没有 .npmignore,则会使用 .gitignore

  如:

.*
*.md
*.yml
build/
node_modules/
src/
test/
gulpfile.js

二、发布npm包

  1. 到 https://www.npmjs.com 注册一个账号

  2. 进入你的项目根目录,运行 npm login

     会输入你的用户名、密码和邮箱

  3. 登录成功后,执行 npm publish,就发布成功啦,我们可以在官网看到

  

三、使用自己的npm包

  接下来我们在其他项目中使用自己刚发布的npm包

  1. 我们进入我们的项目目录运行 npm (或cnpm) install bing-test-publish-npm(我们刚发布的包)

  

  2. 在需要使用此包的页面引入,并使用

 <template>
<div>
我的npm包
<helloName></helloName>
</div>
</template>
<script>
import helloName from 'bing-test-publish-npm'
export default {
name: 'npm',
data () {
return {
}
},
components: {
helloName
}
}
</script>

  这时我发现我的控制台报错了,原来是编码错误,因此,我们需要修改更新代码

<template>
<div class="helloName">
<input type="text" placeholder="请输入姓名" v-model="yourName"></input>
<div v-if="yourName">hello<span class="name">{{yourName}}!</span></div>
</div>
</template>
<script>
export default {
name:'helloName',
data () {
return {
yourName: ''
}
},
methods: { },
created(){
}
}
</script>
<style>
</style>

四、更新npm包

  1. 修改完代码后,我们需要修改 package.json 的version版本

规则:对于"version":"x.y.z"
1.修复bug,小改动,增加z
2.增加了新特性,但仍能向后兼容,增加y
3.有很大的改动,无法向后兼容,增加x

  2. 修改后 运行 npm run build, npm publish 就成功更新了包的版本

   3. 使用时需要

    卸载之前安装的包 npm uninstall bing-test-publish-npm

    重新安装 npm install bing-test-publish-npm

    可通过 npm list bing-test-publish-npm 查看到版本已是最新的版本

五、最终效果

  

主要参考文章

  1. 如何制作并发布一个vue的组件npm包? https://blog.csdn.net/hamupp/article/details/79337643

  2. package.json   http://javascript.ruanyifeng.com/nodejs/packagejson.html

~~~~~~~~~~~~~~~~~~~~~~~我是简朴又廉价的分割线~~~~~~~~~~~~~~

饼饼有话说:

写的好辛苦呀说实话这个编辑器不咋好用。。

花了好半天写文章,又花了一会修改文章格式,这次给自己认真程度打80分吧,想要写一篇优秀的博文好不容易呀,我会继续加油哒~~

如果觉得受用的话,可不可以给我点个赞呀,激励这个拖延症患者~~

如何发布一个npm包(基于vue)的更多相关文章

  1. 从0到1发布一个npm包

    从0到1发布一个npm包 author: @TiffanysBear 最近在项目业务中有遇到一些问题,一些通用的方法或者封装的模块在PC.WAP甚至是APP中都需要使用,但是对于业务的PC.WAP.A ...

  2. 发布一个npm包(webpack loader)

    发布一个npm包,webpack loader: reverse-color-loader,实现颜色反转. 初始化项目 mkdir reverse-color-loader cd ./reverse- ...

  3. (转)前端开发-发布一个NPM包之最简单易懂流程

    原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站 ...

  4. 如何发布一个npm包?

    npm包在现在前端开发中经常使用且便利,而我也是经常使用,而没研究怎么去发布npm.那如何发布npm包呢? 一.在npm的官网上注册一个账号登录,https://www.npmjs.com/ 注意此步 ...

  5. 如何发布一个 npm 包

    一 背景 在工作时,突然接到经理的一个要求,需要将一个react的高阶组件函数封装成一个npm包.之前从没弄过,当场还是有些懵逼的,但是这毕竟是工作,不能推脱.于是开始了学习.汤坑之旅.最终包发布,线 ...

  6. 发布一个npm包

    前言 我这里是写了一个vue轮播图插件,因此我使用了vue的脚手架工具创建一个项目,当然你也可以选择自己搭建脚手架. 本例中我会使用vue脚手架创建一个项目,并发布到npm上面去. 通过脚手架创建项目 ...

  7. webpack创建library及从零开始发布一个npm包

    最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...

  8. 如何发布一个包到npm && 如何使用自己发布的npm包 && 如何更新发布到npm的package && 如何更新当前项目的包?

    如何发布一个包到npm First 在https://www.npmjs.com注册一个账号. Second 编辑好项目,文件大致如下: 其中,gitignore可以如下: .DS_Store nod ...

  9. 如何开发一个npm包并发布到npm中央仓库

    转自: https://liaolongdong.com/2019/01/24/publish-public-npm.html 如何开发一个npm包并发布到npm中央仓库需求背景:平时在项目工作中可能 ...

随机推荐

  1. 新建一个项目,如何使用abp用户登录系统

    1.首先参考Framework.Web里的packages.config,把相关的包都安装好. 2.App_Start文件夹下的xxxModule.cs和Startup.cs拷过来,修改下命名空间. ...

  2. Heartbleed心脏出血漏洞原理分析

    Heartbleed心脏出血漏洞原理分析 2017年01月14日 18:14:25 阅读数:2718 1. 概述    OpenSSL在实现TLS和DTLS的心跳处理逻辑时,存在编码缺陷.OpenSS ...

  3. 解决vs code 内置终端,字体间隔过大问题。(linux centos7成功)

    如图. 去文件-首选项-设置里修改. "terminal.integrated.fontFamily": ""注意此处默认为空白,所以显示的就比较奇怪. 此处我 ...

  4. linux 查看信息-磁盘分区&网络

    磁盘和分区 1.查看挂接的分区状态 2.查看所有交换分区 3.查看启动时IDE设备检测状况 网络 1.查看网络接口属性 2.查看防火墙设置 3.查看路由表 4.查看所有监听端口 5.查看所有已经建立的 ...

  5. centos6.9 编译安装 zabbix-3.0.15

    本文采用编译安装,请在zabbix官网下载所需版本.此处安装版本是:zabbix-3.0.15.tar.gz 操作系统:centos 6.9 一.安装mysqlmysql-community-libs ...

  6. Vue post提交

    vue中的axios 是不直接支持post方法的,所以我们得绕一下路,我目前在登录的时候运用到了,服务器端用php,可以收到数据 let param = new URLSearchParams(); ...

  7. 如何解决XMLHttpRequest cannot load file:~~~~~~~~~~~. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-res

    原因:Chrome不支持本地Ajax请求. 解决: 右击Chrome浏览器快捷方式,选择“属性”,在“目标”中加上"--allow-file-access-from-files", ...

  8. Python基础整理

    第一章 Python介绍 1.3 基本类型 操作符 +,-,*,/,%,**(幂),divmod(除法) divmod(10,3)=(3,1) None表示出错 表示假: None,0,0.0,&qu ...

  9. 设置navigation的title

      onReady(){         wx.setNavigationBarTitle({           title: this.data.title         });     } 

  10. RxSwift学习笔记7:buffer/window/map/flatMap/flatMapLatest/flatMapFirst/concatMap/scan/groupBy

    1.buffer的基本使用 let publishSubject = PublishSubject<String>() //buffer 方法作用是缓冲组合,第一个参数是缓冲时间,第二个参 ...