手摸手教你如何使用npm發布vue外掛程式

2021-10-21 21:21:33 字數 1854 閱讀 2658

有兩種方式:

"build:lib"

:"vue-cli-service build --target lib --name image-ipreview --dest lib ./src/index.js"

下面介紹下命令中的幾個部分。

--target libtarget有好幾個選項。這裡是打包成乙個庫(lib),發布外掛程式的話,一般就是lib

--name image-ipreview: 打包生成的檔名。

-dest lib:打包生成的目錄名稱。這裡是lib,預設為dist

./src/index.js:打包的入口檔案。

打包成功後的檔案如下:

在專案中用的話,一般用.css.umd.min.js這兩個檔案。因此,發布外掛程式的時候,你可以把這兩個檔案拿出來,單獨發布出去,減小包的體積。

發布前需要修改package.json中的部分字段:

最重要的是要修改npm源為官方源(tip:用nrm可以檢視和切換當前源),可以在.npmrc檔案中配置。

終於到了最後發布時候。

首先,你需要有npm賬號。終端輸入npm login,登入成功後,執行npm publish --access public。發布成功後,你會收到npm發來的郵件。

(1)如果遇到如下問題:

修改下包名(即:package.json的name欄位),並且,保證該包名在npm中唯一。方法就是在npm官方**中輸入你的包名檢視。

(2) 我遇到的另乙個問題是,配置檔案引入的別名。

根據vue-cli官方文件,config物件上有了一些初始配置,一開始,我是直接將config.resolve.alias重寫了,即直接給它賦值個自定義物件配置,結果報了乙個沒找到~entry的錯誤,然後,我列印了下config.resolve.alias,發現它上面有這個特殊的配置。是我將它修改沒了。所以,有了下面的寫法。

(3)另乙個可能的問題是package.json中字段的問題。

去掉package.json中的

"browserslist":[

">0.2%"

,"not dead"

,"not ie <= 11"

]}

或者寫在.browserlistrc檔案中。

後面外掛程式版本迭代發布時,需要修改package.json中的version字段,然後,執行打包命令,在npm publish即可。

譯 手摸手教你如何輕鬆發布私有 App

譯文出自 掘金翻譯計畫 譯者 qiuk17 校對者 peachchou,xiaxiayang 來自插圖 virginia poltrack 使用 fastlane 非常簡單 fastlane run get managed play store publishing rights 複製 樣例輸出 i...

手摸手,帶你優雅的使用 icon

這是花褲衩在掘金上發布的關於這個優雅的使用icon的過程 這是關於如何自己封裝乙個元件上傳npm庫 久在vue後台管理系統混跡的童鞋應該知道花褲衩的吧,我用了他的vue admin template模板,順便學習了一下大佬的 裡面有乙個使用svg icon的元件,認真看了下,因為我一般用的都是阿里爸...

手摸手教你擼乙個可拖拽元件(附原始碼)

業務需求 1 實現乙個可以全頁面可以拖拽的元件 2 順帶介紹一下vue draggable外掛程式,可以實現多個元件之間的拖動 展示一下效果圖 這個元件我是借用的vue的directive自定義指令的方式實現的,如果對vue的自定義指令還是不很熟悉的話可以先去官網了解一波,當然熟悉的童鞋也可以不用v...