前言

我這里是寫了一個vue輪播圖插件，因此我使用了vue的腳手架工具創(chuàng)建一個項目，當(dāng)然你也可以選擇自己搭建腳手架。

本例中我會使用vue腳手架創(chuàng)建一個項目，并發(fā)布到npm上面去。

通過腳手架創(chuàng)建項目

全局安裝

首先，要創(chuàng)建項目，封裝vue的插件用webpack-simple很合適，因此你需要全局安裝@vue/cli-init插件：

yarn global add @vue/cli-init //或者 npm install @vue/cli-init -g

使用vue init webpack-simple vue-test-plugin 初始化目錄； vue-test-plugin是項目名稱，也是新建項目的目錄。
然后我使用全局安裝失敗了，那么我就使用局部安裝把。

局部安裝

新建D:/test test文件夾，局部安裝@vue/cli-init插件：

yarn add @vue/cli-init //或者 npm install @vue/cli-init

安裝成功之后，使用命令初始化vue-test-plugin項目：

./node_modules/.bin/vue init webpack-simple vue-test-plugin

然后就一路enter直到項目創(chuàng)建完成。創(chuàng)建完成后的目錄如下：

插件開發(fā)

在./src/目錄下實現(xiàn)你自己的功能，我的功能實現(xiàn)完了之后如下：

./src/lib/banner.vue：是主功能文件

./src/lib/index.js：

import VueBanner from './banner.vue' const plugin = {install: function(Vue) {Vue.component(VueBanner.name, VueBanner)} } // 這里的判斷很重要 if (typeof window !== 'undefined' && window.Vue) {window.Vue.use(plugin) } export default plugin

我們在webpack配置的入口文件就是index.js，install是掛載組件的方法，有了它我們就可以在外部use一個插件了。

如果外部使用<script>引入的話window存在，window.Vue.use(plugin)就直接將插件掛在在全局了。

修改文件配置

package.json 文件

{"name": "vue-test-plugin","description": "vue的插件測試","version": "1.0.1","author": "姓名 <xxx@xxx.com>",// 配置main結(jié)點，如果不配置，我們在其他項目中就不用import XX from '包名'來引用了，只能以包名作為起點來指定相對的路徑"main":"dist/vue-test-plugin.js",//開源協(xié)議"license": "MIT",// 因為組件包是公用的，所以private為false"private": false,"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"},// 指定代碼所在的倉庫地址"repository": {"type": "git","url": "git+xxxxx" //這里寫github的git地址，格式為：'git+' + gitHubURL},"dependencies": {"vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"], // 指定關(guān)鍵字"keywords": ["vue","test-plugin"],// 項目官網(wǎng)的url"homepage": "github地址下的readme.md文件地址","devDependencies": {...} }

webpack.config.js 文件

// entry: './src/main.js',entry: './src/lib/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',// filename: 'build.js'filename: '/vue-test-plugin.js',library: 'VueTestPlugin',libraryTarget: 'umd',umdNamedDefine: true},

由于不是所有使用組件的人都是通過 npm 安裝使用 import 引入組件的，還有很多人是通過 <script>標(biāo)簽的方式直接引入的，所以我們要將 libraryTarget 改為 umd 格式，同時我們要配置文件入口和出。

.gitignore 文件

dist/ //刪除此行

因為要用dist文件夾，所以在.gitignore文件中把dist/去掉。

index.html 文件

<!-- <script src="/dist/build.js"></script> --><script src="/dist/vue-test-plugin.js"></script>

打包

yarn build //或者 npm run build

因為在import的時候，自動會加載packge.json文件中的main中的路徑，我這里是：dist/vue-test-plugin.js，因此會去讀取這個文件，所以需要打包。

發(fā)布npm

• 1.注冊npm官網(wǎng)賬號
• 2.切換到vue-test-plugin根目錄下，添加npm賬號：npm adduser
• 3.輸入自己的npm用戶名、密碼、郵箱。
• 4.上傳代碼：npm publish

發(fā)布出現(xiàn)問題：npm ERR! publish Failed PUT 403

如果發(fā)布過程中出現(xiàn)此問題是因為使用了淘寶鏡像，需要切換成原來的鏡像，發(fā)布成功后，再切回來。

檢查是否使用了淘寶鏡像

npm config get registry

出現(xiàn)如下結(jié)果：

https://registry.npm.taobao.org/

如果出現(xiàn)如上結(jié)果，繼續(xù)下一步

切換成原來的npm源

npm config set registry=http://registry.npmjs.org

繼續(xù)npm publish發(fā)布npm包。

切回淘寶鏡像

npm config set registry=https://registry.npm.taobao.org/

轉(zhuǎn)載于:https://www.cnblogs.com/wenwenwei/p/10956523.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的发布一个npm包的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。