基于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 相关文章推荐
javascript 显示当前系统时间代码
Dec 28 Javascript
js改变文章字体大小的实例代码
Nov 27 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
详解一个基于套接字实现长连接的express
Mar 28 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
vue3.0 上手体验
Sep 21 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
js验证密码强度解析
2020/03/18 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python实现浪漫的烟花秀
2019/01/30 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
python图片剪裁代码(图片按四个点坐标剪裁)
2020/03/10 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
Ado与Ado.net的相同与不同
2014/12/08 面试题
介绍一下Mysql的存储引擎
2015/02/12 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
十八届三中全会宣传方案
2014/02/21 职场文书
党风廉政承诺书
2014/03/27 职场文书
车辆工程专业求职信
2014/04/28 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
辛德勒的名单观后感
2015/06/03 职场文书
四大名著读书笔记
2015/06/25 职场文书
中秋节随笔
2015/08/15 职场文书
领导莅临指导欢迎词
2015/09/30 职场文书
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技