撰寫自己的 react package component

May 29, 2016

webpack

關於 webpack 的資料已經非常多了,這裡不再闡述,如果你沒使用過 webpack 的話,我之前翻譯一篇 Tuturoial,非常適合新手入門,讓你對 webpack 會有更多的了解。

連結:Webpack Tutorial Chinese Traditional

最近因為某些因素,需要自己寫一些獨立的 react 的 component,於是研究了如何撰寫一個簡單的 package 並放到 npm 上面,如果想直接看原始碼的可以直接到以下連結:

react-npm-boilerplate

簡單描述一下,這個 boilerplate src 資料夾內的 index.js,只簡單輸出了一個 <h1>Hello World</h1>,當你透過 npm install 這個 package 之後,簡單把它 include 後就可以使用了,我在 README 上有寫到簡單的使用方式。

所以,我該如何 make 自己的 package 呢?

就以這個 react-npm-boilerplate 來做解釋好了。

首先,你需要

  • 撰寫你需要 export 的 component
  • 設定 webpack 設定檔案
  • 設定相關 npm script

如同上面所提到,我在 src 內撰寫了一個 index.js,裡面的內容就只是簡單的 export 這個 component,你可以根據自己的需求,在裡面撰寫相關的邏輯,例如接收 props 啊之類的。

備註:在這個部份 webpack config 這個部份不是必要的,或許你也可以參考這篇文章建立的方式。

webpack.production.js 這個設定檔中,plugins 的部份如果不了解可以參考 WebpackTutorial - Plugins,在這個設定檔的部份,我比較想要討論的是 output 關於 librarylibraryTarget

先看看官方文件的說明:

  • library:指定你的 library 名稱。
  • libraryTarget:指定輸出方式:AMD、CommonJS、UMD。
  • externals:外部的 dependcies 不需要 bundle。

延伸閱讀What Is AMD, CommonJS, and UMD?

在這個範例中 libraray 所設定的是:reactNpmBoilerplate,所以我可以在別的 component 簡單透過類似像 const test = require('reactNpmBoilerplate') 來使用,而 librartyTarget 使用 umd 的原因是:UMDAMDCommonJS兩者間通用。 UMD 的全名為 Universal Module Definition,原理是會根據載入方式是 exports(Node.js)或 define(AMD)。

設定 script 的方式可以根據個人需求來做設定,說一下兩個比較重要的:

  • build:lib - 透過 babel 來 complier srcindex.js,並輸出到 lib 資料夾。
  • build:umd:min - 透過 webpack 來 bundle,最後的結果會在 dist 的資料夾,後面的 --config webpack.production.js 是指定我所要用的 webpack 設定檔,而這個 budle 後的檔案可以透過 include 的方式來使用它,如上面所提到的。

延伸閱讀:WebpackTutorial - 你的 webpack 設定檔案

package.json 記得設定 main 以及 files 的部份,如果忘記設定,publish 到 npm 後下載安裝會找不到檔案吶!