手把手发布一个npm包及相关注意事项

ZoomQuiet 发布于2019-08-23 12:36 / 2142人阅读

摘要：前言这里是发布包的具体步骤，手把手教会，相关原理在其他文章下面有原理好文章指路分钟教你快速开发一个插件并发布手把手教你封装一个发布之前，需要注册一个账号这里注册具体步骤新建项目如需安装代码下面新建一个文件夹。

前言

这里是发布npm包的具体步骤，手把手教会，相关原理在其他文章下面有
原理好文章指路
10分钟教你快速开发一个vue插件并发布npm

手把手教你封装一个 vue component

发布之前，需要注册一个npm账号
https://www.npmjs.com/ 这里注册

具体步骤

1.新建项目

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev

如需安装less
$ npm install less less-loader --save-dev

2.代码

src 下面新建一个components文件夹。里面放各种组件文件夹。
例如新建input文件夹里面有index.js 和Input.vue文件

// input.js
import Input from "./Input.vue"
export default Input

// Input.vue
export default {
  name: "ui-input", // 这是注册组件的名字。也是要使用这个npm包的标签名字
  props: {
  },
  data () {
    return {
    }
  },
  mounted () {
  },
}

// main.js
import uiInput from "./components/input"
const jovoUI = {
  uiInput,
  uixxx  // 其余vue组件
}
if (typeof window !== "undefined" && window.Vue) { 
  window.Vue.use(jovoUI)
}
jovoUI.install = function (Vue, options) {
  Vue.component(uiInput.name, uiInput)
}
export default jovoUI
// 跑项目的时候测试用,在本地测试的时候，就把组件注册在本地，app.vue里面引用组件调试
// Vue.component("ui-input", uiInput)
// new Vue({
//   el: "#app",
//   render: h => h(App)
// })

需要在本地测试的时候,解开上面的注释，在app.vue或者其他vue文件里测试

// app.vue

3.发布准备

1. .gitignore文件 删掉dist忽略
2.
// webpack.config.js
之前是
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "build.js"
  }
改为
output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    // filename: "build.js" 这是原来的
    filename: "jovoui.js", // 打包后js的名字，自己取,本地调试时，新加的这些东西都要注释掉，解开filename: "build.js注释
    library: "jovoui",  // 使用require引用时的名字
    libraryTarget: "umd", // 指定你的模块输出类型，可以是commonjs,AMD,script形式,UMD模式
    umdNamedDefine: true
  }
3. // package.json文件 
// 文件第一行的 name 是包的名字，不能和已有的npm包重名，否则npm publish时会提示你是否登录，其实你已经登陆了 例如"name": "jovocom",
private改为false
"main": "dist/jovoui.js" 这条是新增的，是打包文件入口，之前是build.js,参考第二条取得打包名字

4. // index.html 
// 本地调试时，需要把第一行解开,以及main.js的注释解开
注释

4.注意事项

1.每次发布之前，要在package.json改版本号

2.npm run build, // 会在生成一个dist文件，里面有jovoui.js和jovoui.map

3.npm publish，// 若有错执行第5条，判断是否登录，未登录执行第四条

4.npm login your account your password your@email.com

5.npm whoami // 判断是否登录

6.每次发布完npm包再本地调试npm时，需要解开以下注释
(1)index.html 改为 // 本地调试时
(2)webpack.config.js 里面的注释切换成build那个新增的注释掉
(3)main.js 本地注册的部分解开注释
(4)npm run build 打包一次

7.更新记一次坑，有一次不知道怎么的切换了淘宝源，npm login一直登不上，报错conflict什么的。要切换到npm官方仓库上，这个时候npm login就能登上了。最后发布npm是发布到官方npm上，不是cnpm,所以要是只能有npm才能下载
$ npm install -g nrm
$ nrm use taobao
$ nrm use npm // 用这句使用npm

8.npm publish出错，说包的名字跟已有的包太相似了，叫换一个，然后换了一个，就成功publish了，所以取名字还是要独特一点，符合这个组件特性一点

使用

npm发布成功使用。
$ npm install xx // 这是发布的包的名字，就是package.json里面的name
每次包更新之后再次安装可以 $ npm install xx@latest
// main.js
import xx from "包名"
Vue.use(xx)
// 某个vue文件
// 这是当初注册组件的名字

云服务器 GPU云服务器每周数百万下载量!NPM包修复了一个远程发布一个用PHP 包及从云服务器发布一个网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98823.html

手把手教你写命令行工具

摘要：命令行工具，即。我们在写命令行工具的时候，需要指定一个可执行文件。或者四调试我们全局安装一个包后，可以全局调用这个命令行工具。命令行工具，即 Cli(command-line interface)。是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行。在学习这篇教程之前，你需要先了解NodeJs,NPM和一些常用的...

DevYK 2019-08-23 11:36 评论0 收藏0
手把手教你发布一个无依赖多类型高质量的键盘npm包

摘要：下面我就以最近开发的数字键盘为例，一一列出具体步骤写基础模块代码注册账号配置配置添加单元测试完善发布足可以完成一个，是为了开发一个高质量的。徽章分别表示是否构建成功代码测试覆盖率版本号下载量开源证书，看起来逼格满满有木有。写在前面没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，...

vboy1010 2019-08-22 17:24 评论0 收藏0
手把手教你写一个 Webpack Loader

摘要：这个由提供的工具。在转换步骤是异步时，你可以这样告诉本次转换是异步的，会在中回调结果通过返回异步执行后的结果参考编写一个本文示例源代码请戳github博客，建议大家动手敲敲代码。本文不会介绍loader的一些使用方法，不熟悉的同学请自行查看Webpack loader 1、背景首先我们来看一下为什么需要loader，以及他能干什么?webpack 只能理解 JavaScript...

JiaXinYi 2019-08-23 17:06 评论0 收藏0
一文看懂npm、yarn、pnpm之间的区别

摘要：请注意，在版本号之前有个字符。理论上，次版本号的变化并不会影响向后兼容性。虽然可以通过命令关闭在版本号前面使用的默认行为，但这个只会影响顶级依赖关系。本文作者对比了当前主流的包管理工具npm、yarn、pnpm之间的区别，并提出了合适的使用建议，以下为译文： NPM npm是Node.js能够如此成功的主要原因之一。npm团队做了很多的工作，以确保npm保持向后兼容，并在不同的环境中...

zgbgx 2019-08-26 11:58 评论0 收藏0