手把手發布一個npm包及相關注意事項

ZoomQuiet 發布于2019-08-23 12:36 / 2216人閱讀

摘要：前言這里是發布包的具體步驟，手把手教會，相關原理在其他文章下面有原理好文章指路分鐘教你快速開發一個插件并發布手把手教你封裝一個發布之前，需要注冊一個賬號這里注冊具體步驟新建項目如需安裝代碼下面新建一個文件夾。

前言

這里是發布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 包及從云服務器發布一個網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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