基于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 相关文章推荐
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
Jul 18 Javascript
简单了解vue 插值表达式Mustache
Jul 22 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php实现异步数据调用的方法
2015/12/24 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
jquery EasyUI的formatter格式化函数代码
2011/01/12 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python如何删除文件中重复的字段
2019/07/16 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python实现数字的格式化输出
2020/08/01 Python
Python中Qslider控件实操详解
2021/02/20 Python
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
《赵州桥》教学反思
2014/02/17 职场文书
工厂车间标语
2014/06/19 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
初中政教处工作总结
2015/08/12 职场文书
《失物招领》教学反思
2016/02/20 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
如何利用Python实现一个论文降重工具
2021/07/09 Python