撰寫自己的 react package component

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 關於 library 和 libraryTarget。

先看看官方文件的說明：

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

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

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

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

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

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

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