最近終于在公司把npm私有庫搭上了，路修好了，接下來就是造輪子了，然后切身體驗了一把，才發(fā)現(xiàn)，開發(fā)一個可以npm publish然后npm install 無任何問題的組件也并不是想象中那么簡單，之前還以為直接將項目中的組件復(fù)制過來就分分鐘搞定，簡直太甜
可以npm publish的組件當(dāng)然指的不是單純能夠執(zhí)行npm publish的組件，而是符合規(guī)范，能夠讓用戶無障礙進行安裝和使用的組件。當(dāng)然，不但要用戶能夠用的爽，而且要讓開發(fā)者寫代碼寫得爽。
作為開發(fā)者，開發(fā)的時候肯定需要一個運行組件的環(huán)境，能方便進行測試和編寫用例，而作為用戶，使用組件的時候肯定不希望有太多亂七八糟的東西被混雜在一起，而是希望組件僅僅作為一個零件，不必要有單獨運行的能力，盡可能的輕便，不會干擾到自身項目的運作，封裝良好，安裝之后就能用，不會太依賴環(huán)境。
所以，綜合上面的考量，我們需要一個既能運行組件的環(huán)境，也需要一個能輸出組件的環(huán)境。
搭建開發(fā)環(huán)境
怎么去搭建一個能夠讓開發(fā)者爽到的環(huán)境是開發(fā)一個組件最重要的一環(huán)，試問，你自己開發(fā)得都不爽，怎么讓用戶爽？
首先，我們的組件肯定要能運行啊，不然怎么測試，所以需要一個組件的運行環(huán)境，而且這個運行環(huán)境不能和組件的開發(fā)環(huán)境耦合在一起，不然發(fā)布的時候很難將組件單獨拆分出來，從而導(dǎo)致會將運行環(huán)境的部分代碼也給發(fā)布了。
其次，我們需要編寫demo，因為demo就是最好的文檔，怎么方便地編寫demo并展示，這也是個問題。
考慮到上面的幾點問題，我一開始嘗試用create-react-app進行環(huán)境搭建，但是并不順利。因為本身create-react-app就是為了搭建應(yīng)用開發(fā)環(huán)境所創(chuàng)建的腳手架工具，勉強用來編寫demo還行，但是并不具備組件的輸出能力，難道單獨配置一個組建輸出環(huán)境？也許能行，但是并不作為我的首選方案。
然后在翻閱create-react-app的文檔的時候，偶然看到了storybook的介紹
簡單來說，storybook就是專門用來為搭建組件開發(fā)環(huán)境而構(gòu)建的工具，可以非常方便地用來編寫組件用例，并且完全和組件環(huán)境分離。
驚了，這不是就是我想要的嗎！
一用之下，更是爽到，下面就簡單介紹怎么用storybook去幫助開發(fā)者開發(fā)一個react組件，當(dāng)然，我只使用了比較基礎(chǔ)的功能，更為詳細的配置和使用方法請參考storybook的官方文檔，貼個鏈接：https://storybook.js.org/basics/introduction/
storybook
我這里以創(chuàng)建一個Button組件為例，創(chuàng)建好文件夾，npm? init，然后創(chuàng)建.npmignore和.gitignore和src文件夾，具體過濾哪些視自己的項目情況而定，之后，重點來了，安裝react和react-dom，這里需要注意，因為storybook會讀取package.json中的依賴，所以如果要搭建react組件開發(fā)環(huán)境，一定要安裝這兩個包，對應(yīng)的，如果要開發(fā)vue組件，一定要安裝vue
npm install--save react react-dom
有了依賴，storybook就能識別你需要什么樣的組件開發(fā)環(huán)境了，所以接下來就可以開始安裝storybook
先安裝腳手架工具
npm i-g @storybook/cli
然后在項目下生成storybook的目錄和示例
getstorybook
運行此命令，會在項目根目錄下生成.storybook和stories兩個文件夾，同時會在package.json中生成兩個命令
好了，我們運行下npm run storybook，然后訪問http://localhost:6006/，然后可以看到這樣的頁面
對應(yīng)著項目根目錄下的stories/index.js，想必你也應(yīng)該明白了什么。
值得一提的是，storybook的webpack配置和create-react-app是非常相似的，已經(jīng)能滿足我們的大部分使用情況，當(dāng)然，你也可以覆蓋，只需要在項目根目錄下的.storybook下新建一份webpack.config.js就行了。
搭建組件輸出環(huán)境
你可能會問，為什么需要組件的輸出環(huán)境呢，我直接將package.json中的main指向src中的入口不行嗎？用戶直接將包引入然后和他的項目一起編譯不就行了。
這種做法太依賴用戶項目的webpack配置了，大多數(shù)情況下，我們使用webpack進行編譯的時候都會將node_modules的資源排除在外，否則會有極嚴(yán)重的編譯性能問題，所以，如果你發(fā)布的組件沒有編譯過，那么在沒有編譯node_modules包的用戶一旦使用你的組件百分百會報錯?；谶@種前提，我們的npm包必須要一份編譯完成的版本，因為我的組件使用了css，所以要用webpack，如果組件是純的js，省事的話用babel足矣。
那用webpack輸出一份組件需要怎樣的配置呢？
能夠被外部引用
不會將第三方的庫打包進來，而是以符合用戶項目環(huán)境的模塊加載規(guī)范進行第三方模塊的加載
默認(rèn)的webpack配置是不會將打包的bundle文件向外面拋出的，需要做特殊配置，具體怎么配置請參考webpack官方文檔，這里貼個鏈接：https://doc.webpack-china.org/guides/author-libraries
我貼一下我某個組件的webpack配置，供大家參考
https://github.com/soyal/react-component-template/blob/master/webpack.config.js
ok，組件的輸出環(huán)境也有了，之后只要運行webpack -p 就能輸出一份打包壓縮并且能被外部引用的組件了。
留個自己的搭好的模板地址:https://github.com/soyal/react-component-template
