如何發布自己的 React Component 套件到 npm 上

什麼是 npm ?

npm 是 Node.js 的套件管理工具,也是資源豐富的線上套件庫,透過 npm下載現成的套件就是前端工程師的日常,只需要向 npm 下指令,它就會自動下載套件到我們指定專案中的 node_modules 資料夾下,馬上就可以使用,替開發者省下了大量的時間。不過在這個社群得之於人者太多是不需要謝天的,因為自己發布套件回饋社群其實一點都不難,而且說不定哪天就不小心做出了甚麼統一江湖各大門派的超強套件。

這篇文章就讓我們來實做一個簡單又實用的小套件,然後把它發布到 npm 上吧。

建立專案

首先我們要下載 npm ,它是隨著 Node.js 的安裝包一起下載的,所以就去 Node.js 的官方網站下載。

安裝好之後打開 terminal 輸入:

npm -v

如果有出現版本資訊就是安裝成功了。

接下來建立一個新資料夾,然後初始化這個資料夾。

mkdir react-scroll-up-button cd react-scroll-up-buttonnpm init

在根目錄下新增一個 src 資料夾和一個 lib 資料夾,待會我們會在 src 資料夾下寫 React component,然後經過我們設定後,編譯出來的 js 檔會在 lib 資料夾下自動生成。

設定 package.json

npm init 會產出一個 package.json 檔,因為是要發布出去的套件,所以平常不太需要編輯的 package.json 要多花點心思,當然也可以下 npm init -y ,反正都是需要再編輯,沒什麼差別。下面是我發布完成時 package.json 的樣子,可以先把欄位寫出來,之後再回來補上必要資訊。

  • name 就是發布後這個套件的名字,需要注意的是不能和已經發布的套件名字重複,建議在取名時先上 npm 官網檢查有沒有同名的套件存在。
  • version 是套件的版本,會自動生成版本號,之後每次更新 code 都要記得手動更新版本號。
  • description 會成為套件在 npm 官網上的副標題,越精準的描述越容易讓人搜索到。
  • main 是別人使用你套件時的程式進入點,所以路徑千萬要寫對!
  • repository 是放置程式碼的地方,放在 github 上就填入 github repository 的網址。
  • keywords 是套件在 npm 官網上的標籤,和 description 一樣也是方便讓人找到。
  • bugs 是讓未來使用者有問題時可以反應的地方。
  • scripts 是讓我們配置執行專案的腳本,這個專案我們將要使用的工具是 webpack ,將這個腳本命名為 build ,以後每次執行專案就下指令 npm run build 就好了。

然後來下載我們的主角 React ,還有需要用到的工具 webpack, babel 和 Material UI。

npm install webpack webpack-cli 

npm install react

npm install babel-loader @babel/core

npm install @babel/preset-env @babel/preset-react
npm install @babel/preset-stage-0npm install @material-ui/core

建立 webpack.config.js

接下來要完成 webpack 的設定檔,新增一個 webpack.config.js 檔,這個步驟很重要,因為我們要告訴 webpack 專案的進入點、輸出格式和處理不同檔案的規則等等重要資訊,任何一個地方打錯都有可能導致我們發布出去的套件無法正常使用。

  • entry 就是我們要寫 React component 的地方。
  • output 下的 path 是指向編譯後 js 檔自動生成的路徑,所以是 lib 資料夾。 filename 則是輸出 js 檔 的名字。
  • rules 是設定遇到不同種類的檔案該用什麼工具去編譯,像是 js 結尾的檔案就用 babel 編譯, css 結尾的檔案就用 css-loader 來編譯。
  • resolve 是當我們的套件和引入套件的專案中有名字相同的套件時,不會因為版本不同產生衝突。像是 react 和 react-dom 就是每個專案幾乎都會出現,所以就無腦直接複製貼上吧 XD

設定完這些基本上就可以應付大部分的狀況了!

建立 .babelrc

babel 是幫我們編譯 jsx 的工具,瀏覽器無法讀取對我們來說簡單易懂的 es6 和 jsx 語法,babel 把它們編譯成瀏覽器可以讀懂的 javascript 。新增一個 .babelrc 檔,presets 就是預設要配置的套件,也就是我們剛剛用 npm 下載的 babel 套件。

.npmignore, .gitignore 和 Readme.md

新增.npmignore 和 .gitignore ,用來過濾掉不需要發布出去的檔案。

新增Readme.md,介紹自己發布的套件,在 github 和 npm 官網上都會出現,盡量寫得越詳細越好,畢竟大部分人還是會傾向下載有完整資訊的套件,如果做出了很棒的東西卻因為提供的資訊不夠而沒有被看見豈不是很可惜。

實作React component

一切就緒之後就來實作React component吧。我要做一個簡單的功能 Scroll Up Button ,就是在瀏覽網頁時會出現一個按鈕,按下去可以隨時回到頁面的頂部。

要讓大家方便一點就讓這個套件有幾個可以任意給定值的 props ,引入這個套件就可以依自己的需求做調整。以下就是這個套件的三個 props。

  • behavior :預設值是 "auto",頁面會直接回到頂部,沒有時間差,可以給定的值是"smooth",頁面回到頂部的速度稍慢,比較滑順。
  • IconSize :預設值是"60px",可以給定任何大小的值,決定按鈕的大小。
  • appearCoordinate :預設值是1200,可以給定任何大小的值,這個值對應到的是螢幕的 Y 軸高度,超過這個高度按鈕才會出現。

直接上 code 吧~

想做其他功能的套件當然也行,反正這篇文章的重點是發布到 npm 上。

在本地端試用套件

寫完之後馬上執行:

npm run build

一切正常,不過在發布前我們要來檢查從別的專案引入這個套件的結果如何,輸入:

npm pack

執行 npm pack 後會出現一個 .tgz 檔案,然後就打開一個新專案,下載這個 .tgz 檔案下來再 import 進我們的專案中。下載的路徑就是這個 .tgz 檔案在我電腦上的路徑。

npm install /Users/wangweian/Desktop/xxxxxxxxxxx.tgz

發布到 npm

成功的在其他專案引入並使用我們的React component後,確認一切正常就可以來發布了!

首先要有 npm 的帳號,沒有的話就去辦一個。

www.npmjs.com

第一次在本地端登入的話,輸入:

npm adduser

已經登入過的話,輸入:

npm login

登入後就隨時可以發布了,發布前記得檢查版本,一切都沒問題的話,輸入:

npm publish

大功告成!等個半分鐘後就可以上 npm 官網看套件是不是已經出現,之後如果有更新套件的話,改完 code 打包好一樣輸入:

npm publish

要注意的是每次更新也都要改版本,否則會發布失敗。

最後來實際引入這個套件,看看我的 Scroll Up Button 長甚麼樣子吧~

恭喜你看完這篇又臭又長的文章,希望你也能馬上發布自己的套件唷~

Front-End Developer/Travel Guide Book Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store