基于vue如何发布一个npm包的方法步骤


Posted in Javascript onMay 15, 2019

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

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

Are you ready? Go!

一、编写自己的npm包

1. 新建一个空文件夹

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

基于vue如何发布一个npm包的方法步骤

完成后会在目录下生成一个 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 目录下编写自己的组件吧

我的文件目录

基于vue如何发布一个npm包的方法步骤

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: 30000,
          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 的值

基于vue如何发布一个npm包的方法步骤

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,就发布成功啦,我们可以在官网看到

基于vue如何发布一个npm包的方法步骤

三、使用自己的npm包

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

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

基于vue如何发布一个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 uninstallbing-test-publish-npm
  • 重新安装 npm installbing-test-publish-npm
  • 可通过 npm listbing-test-publish-npm 查看到版本已是最新的版本

五、最终效果

基于vue如何发布一个npm包的方法步骤

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
Jan 14 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 #Javascript
JavaScript页面倒计时功能完整示例
May 15 #Javascript
vue组件间通信六种方式(总结篇)
May 15 #Javascript
JS正则表达式封装与使用操作示例
May 15 #Javascript
微信小程序实现授权登录
May 15 #Javascript
基于vue实现一个神奇的动态按钮效果
May 15 #Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 #Javascript
You might like
ThinkPHP中redirect用法分析
2014/12/05 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
详解jquery中$.ajax方法提交表单
2014/11/03 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
浅谈jquery中next与siblings的区别
2016/10/27 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[00:36]DOTA2上海特级锦标赛 Archon战队宣传片
2016/03/04 DOTA
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
python去掉行尾的换行符方法
2017/01/04 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
python修改文件内容的3种方法详解
2019/11/15 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
计算机毕业生求职信
2014/06/10 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
出租房屋协议书
2014/09/14 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
继承公证书格式
2015/01/26 职场文书
政协委员个人总结
2015/03/03 职场文书
2015年个人审计工作总结
2015/04/07 职场文书
升职自荐书
2019/05/09 职场文书
关于python类SortedList详解
2021/09/04 Python