如何上傳Vue組件到npm庫中

介紹

組件庫在當下很是流行。
可是使用組件庫和發佈組件庫就是兩回事了
今天我會詳細的介紹如何在npm發佈本身的組件庫，並在項目中使用

---

建立組件庫，咱們今天藉助vue-sfc-rollup這個npm包工具，
這是一個對於咱們建立組件很是有用的工具
該軟件包爲項目建立了一組文件。如其文檔
)所述，其建立的文件包括如下內容（SFC表明「單個文件組件」）

• 壓縮rollupjs配置
• 帶有build / dev腳本和依賴項的相應package.json文件
• 最小的babel.config.js和.browserslistrc文件用於轉譯
• 打包SFC時彙總使用的包裝器
• 樣本SFC以啓動開發
• 一個示例使用文件，可用於在開發過程當中加載/測試您的組件/庫

開始

首先全局安裝vue-sfc-rollup：

npm install -g vue-sfc-rollup

全局安裝後，從命令行進入要在其中放置庫項目的目錄。進入該文件夾後，運行如下命令來初始化項目。

sfc-init

在提示中選擇如下選項：

✔ Is this a single component or a library? › Single Component
✔ What is the npm name of your component? (你的npm包名字)test-vue-component
✔ What is the kebab-case tag name for your component? … test-vue-component
✔ Will this component be written in JavaScript or TypeScript? › JavaScript
✔ Enter a location to save the component files: … ./test-vue-component

配置完成後，進入對應文件夾進行依賴下載

cd ./test-vue-component
npm install

完成後，您能夠在選擇的編輯器中打開該文件夾。

如上所述，爲咱們構建了一個示例Vue組件。您能夠在/src/lib-components文件夾中找到它。要查看此組件的外觀，能夠運行npm run serve並導航到http：// localhost：8080 /

發佈自帶示例包進行測試

npm build

如文檔所述：

運行在3個編譯後的文件生成腳本結果 dist目錄，每一個的 main， module和 unpkg性能在你的package.json文件中列出。生成這些文件後，就能夠開始了！

運行此命令後，咱們準備發佈到NPM。在執行此操做以前，請確保您已在NPM上擁有一個賬戶（若是須要，能夠在此處進行操做）。

接下來，咱們須要經過運行如下命令將您的賬戶添加到您的終端：

npm adduser

瞭解package.json

當發佈到npm時，咱們使用package.json文件來控制發佈哪些文件。若是您查看package.json最初設置項目時建立的文件，則會看到相似如下內容的內容：

"main": "dist/test-vue-component.ssr.js",
"browser": "dist/test-vue-component.esm.js",
"module": "dist/test-vue-component.esm.js",
"unpkg": "dist/test-vue-component.js",
"files": [
    "dist/*",
    "src/**/*.vue"
],

下面的部分files告訴npm發佈dist文件夾中的全部內容以及文件夾中的全部.vue文件src。您能夠根據須要進行更新，可是咱們將保留本教程的內容。

由於咱們沒有使用package.json文件進行任何更改，因此咱們準備發佈了。爲此，咱們只須要運行如下命令：

npm publish

就是這樣！恭喜你！您如今已經發布了Vue組件庫。您能夠轉到npmjs.com並在註冊表中找到它

在vue項目中使用

npm instal test-vue-component
import testVueComponent from 'test-vue-component'
components:{
testVueComponent
}

在codesandbox查看

這樣咱們就發佈了測試組件以及引入了測試組件
你學廢了嗎？

發佈自定義組件（明天再更，下班了..）