俗話說(shuō)：“麻雀雖小，五臟俱全”，搭建一個(gè)組件庫(kù)，知之非難，行之不易，涉及到的技術(shù)方方面面，猶如海面風(fēng)平浪靜，實(shí)則暗礁險(xiǎn)灘，處處驚險(xiǎn)?

目前團(tuán)隊(duì)內(nèi)已經(jīng)有較為成熟的 Vue 技術(shù)棧的 NutUI 組件庫(kù)[1]和 React 技術(shù)棧的 yep-react 組件庫(kù)[2]。然而這些組件庫(kù)大都從零開始搭建，包括 Webpack 的繁雜配置，Markdown 文件轉(zhuǎn) Vue 文件功能的開發(fā)，單元測(cè)試功能的開發(fā)、按需加載的 Babel 插件開發(fā)等等，完成整個(gè)組件庫(kù)項(xiàng)目實(shí)屬不易，也是一個(gè)浩大的工程。如果我們想快速搭建一個(gè)組件庫(kù)，大可不必如此耗費(fèi)精力，可以借助業(yè)內(nèi)專業(yè)的相關(guān)庫(kù)，經(jīng)過(guò)拼裝調(diào)試，快速實(shí)現(xiàn)一個(gè)組件庫(kù)。本篇文章就來(lái)給大家介紹一下使用 create-react-app 腳手架、docz 文檔生成器、node-sass、結(jié)合 Netlify 部署項(xiàng)目的整個(gè)開發(fā)組件庫(kù)的流程，本著包教包會(huì)，不會(huì)沒(méi)有退費(fèi)的原則，來(lái)一場(chǎng)手摸手式教學(xué)，話不多說(shuō)，讓我們進(jìn)入正題。

首先看一下組件庫(kù)的最終效果：

本文將從以下步驟介紹如何搭建一個(gè) React 組件庫(kù)：

構(gòu)建本地開發(fā)環(huán)境

開發(fā)一個(gè)組件庫(kù)的首要步驟就是調(diào)試本地 React 環(huán)境，我們直接使用 React 官方腳手架 create-react-app，可以省去從底層配置 Webpack+TypeScript+React 的摧殘：

1、使用 create-react-app 初始化腳手架，并且安裝 TypeScript

npx create-react-app myapp--typescript

注意使用 node 為較高版本 >10.15.0

2、配置 eslint 進(jìn)行格式化

由于安裝最新的 create-react-app 結(jié)合 VScode 編輯器即可支持 eslit，但是需要在項(xiàng)目根目錄中要添加 .env 這個(gè)配置文件，設(shè)置 EXTEND_ESLINT=true 這樣才會(huì)啟用 eslint 檢測(cè)，注意要 重啟 vscode

3、組件庫(kù)系統(tǒng)文件結(jié)構(gòu)

新建 styles 文件夾，包含了基本樣式文件，結(jié)構(gòu)如下：

|-styles| |-variables.scss // 各種變量以及可配置設(shè)置| |-mixins.scss // 全局 mixins| |-index.scss // 引入全部的 scss 文件，向外拋出樣式入口|-components| |-Button| |-button.scss // 組件的單獨(dú)樣式| |-button.mdx // 組件的文檔| |-button.tsx // 組件的核心代碼| |-button.test.tsx // 組件的單元測(cè)試文件| |-index.tsx // 組件對(duì)外入口

4、安裝 node-sass 處理器

安裝 node-sass 用來(lái)編譯 SCSS 樣式文件：npm i node-sass-D

這樣最基本的 react 開發(fā)環(huán)境就完成了，可以開心的開發(fā)組件了。

組件庫(kù)打包編譯

本地調(diào)試完組件庫(kù)之后，需要打包壓縮編譯代碼，供其他用戶使用，這里我們用的 TypeScript 編寫的代碼，所以使用 Typescript 來(lái)編譯項(xiàng)目：首先在每個(gè)組件中新建 index.tsx 文件：

import Button from './button'export?default?Button?

修改 index.tsx 文件，導(dǎo)入導(dǎo)出各個(gè)模塊

export { default as Button } from './components/Button'

在根目錄新建 tsconfig.build.json，對(duì) .tsx 文件進(jìn)行編譯：

{ "compilerOptions": { "outDir": "dist",// 生成目錄 "module": "esnext",// 格式 "target": "es5",// 版本 "declaration": true,// 為每一個(gè) ts 文件生成 .d.ts 文件 "jsx": "react", "moduleResolution":"Node",// 規(guī)定尋找引入文件的路徑為 node 標(biāo)準(zhǔn) "allowSyntheticDefaultImports": true, }, "include": [// 要編譯哪些文件 "src" ], "exclude": [// 排除不需要編譯的文件 "src/**/*.test.tsx", "src/**/*.stories.tsx", "src/setupTests.ts", ]}

對(duì)于樣式文件，使用 node-sass 編譯 SCSS，抽取所有 SCSS 文件生成 CSS 文件：

"script":{?????"build-css":?"node-sass?./src/styles/index.scss?./dist/index.css", }

并且修改 build 命令：

"script":{ "clean": "rimraf ./dist",// 跨平臺(tái)的兼容 "build": "npm run clean && npm run build-ts && npm run build-css",}

這樣，執(zhí)行 npm run build 之后，就可以生成對(duì)應(yīng)的組件 JS 和 CSS 文件，為后面使用者按需加載和部署到 npm 上提供準(zhǔn)備。

本地調(diào)試組件庫(kù)

本地完成組件庫(kù)的開發(fā)之后，在發(fā)布到 npm 前，需要先在本地調(diào)試，避免帶著問(wèn)題上傳到 npm 上。這時(shí)就需要使用 npm link 出馬了。

什么是 npm link？

在本地開發(fā) npm 模塊的時(shí)候，我們可以使用 npm link 命令，將 npm 模塊鏈接到對(duì)應(yīng)的運(yùn)行項(xiàng)目中去，方便地對(duì)模塊進(jìn)行調(diào)試和測(cè)試。

使用方法

假設(shè)組件庫(kù)是 reactui 文件夾，要在本地的 demo 項(xiàng)目中使用組件。則在組件庫(kù)中(要被 link 的地方)執(zhí)行 npm link，則生成從本機(jī)的 node_modules/reactui 到 組件庫(kù)的路徑/reactui 中的映射關(guān)系。然后在要使用組件庫(kù)的文件夾 demo 中執(zhí)行 npm link reactui 則生成以下對(duì)應(yīng)鏈條：

在要使用組件的文件夾 demo 中 -[映射到]—> 本機(jī)的 node_modules/reactui —[映射到]-> 開發(fā)組件庫(kù) reactui 的文件夾 /reactui

需要修改組件庫(kù)的 package.json 文件來(lái)設(shè)置入口：

{ "name": "reactui", "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts",}

然后在要使用組件的 demo 項(xiàng)目的依賴中添加：

"dependencies":{ "reactui":"0.0.1"}

注意，此時(shí)并不用安裝依賴，之所以寫上該依賴，是為了方便在項(xiàng)目中使用的時(shí)候可以有代碼提示功能。然后在 demo 項(xiàng)目中使用：

import { Button } from 'reactui'

在 index.tsx 中引入 CSS 文件

import 'reactui/build/index.css'

正當(dāng)以為大功告成的時(shí)候，下面這個(gè)報(bào)錯(cuò)猶如一盆冷水從天而降：

經(jīng)過(guò)各種問(wèn)題排查，在 react 官方網(wǎng)站[3] 上查到以下說(shuō)法：

🔴 Do not call Hooks in class components. 🔴 Do not call in event handlers. 🔴 Do not call Hooks inside functions passed to useMemo, useReducer, or useEffect.

說(shuō)的很明白：

原因 1: React 和 React DOM 的版本不一樣的問(wèn)題 原因 2: 可能打破了 Hooks 的規(guī)則 原因 3: 在同一個(gè)項(xiàng)目中使用了多個(gè)版本的 React

官網(wǎng)很貼心，給出了解決方法：

This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib. This should make the library use the application’s React copy.

核心思想在組件庫(kù)中使用 npm link 方式，引到 demo 項(xiàng)目中的 react；所以在組件庫(kù)中執(zhí)行：npm link../demo/node_modules/react

具體步驟如下：

1. 在代碼庫(kù) reactui 中執(zhí)行 npm link

2. 在代碼庫(kù) reactui 中執(zhí)行 npm link../../demo/node_modules/react

3. 在項(xiàng)目 demo 中執(zhí)行 npm link reactui

如此可以解決上面 react 沖突問(wèn)題；于是可以在本地一邊快樂(lè)的調(diào)試組件庫(kù)，一邊快樂(lè)的在使用組件的項(xiàng)目中看到最終效果了。

組件庫(kù)發(fā)布到 npm

該過(guò)程一定要注意使用的是 npm 源！！[非常重要]

首先確定自己是否已經(jīng)登錄了 npm：

npm adduser// 填入用戶名；密碼；emailnpm whoami // 查看當(dāng)前登錄名

修改組件庫(kù)的 package.json ，注意 files 配置；以及 dependencies 文件的化簡(jiǎn): react 依賴原本是要放在 dependencies 中的，但是可能會(huì)和用戶安裝的 react 版本沖突，所以放在了 devDependencies 中，但是這樣話用戶如果沒(méi)有安裝 react 則無(wú)法使用組件庫(kù)，所以要在 peerDependencies 中定義前置依賴 peerDependencies，告訴用戶 react 和 react-dom 是必要的前置依賴:

"main": "dist/index.js","module": "dist/index.js","types": "dist/index.d.ts","files": [ // 把哪些文件上傳到 npm "dist"],"dependencies": { // 執(zhí)行 npm i 的時(shí)候會(huì)安裝這些依賴到 node_modules 中 "axios": "^0.19.1",// 發(fā)送請(qǐng)求 "classnames": "^2.2.6",// "react-transition-group": "^4.3.0"},"peerDependencies": { // 重要！！，提醒使用者，組件庫(kù)的核心依賴，必須先安裝這些依賴才能使用 "react": ">=16.8.0", // 在 16.8 之后 才引入了 hooks "react-dom": ">=16.8.0"}

好了，整個(gè)組件庫(kù)經(jīng)過(guò)上述過(guò)程，基本上各個(gè)功能已經(jīng)有了，提及一句：由于組件庫(kù)使用的是 create-react-app 腳手架，最新的版本已經(jīng)集成了單元測(cè)試功能。還有配置 husky 等規(guī)范代碼提交，在這里不在做贅述，讀者可以自行配置。

生成說(shuō)明文檔

目前生成說(shuō)明文檔較好的工具有 storybook[4]、docz[5] 等工具，兩者都是很優(yōu)秀的文檔生成工具，但是尺有所短，寸有所長(zhǎng)，經(jīng)過(guò)認(rèn)真調(diào)研比較，最終選擇了 docz。

1、確定選型

1)storybook 的常用編譯文檔規(guī)范相對(duì) docz 而言，略有繁瑣

storybook 的編譯文檔規(guī)范如下所示：

//省略 import 引入的代碼storiesOf('Buttons', module).addDecorator(storyFn => 'center' }}>{storyFn()}).add('with text', () => ('clicked')}>Hello Button111),{notes:{markdown} // 將會(huì)渲染 markdown 內(nèi)容})

對(duì)比 docz 的開發(fā)文檔：

# Button 組件使用方式如下所示：import { Playground, Props } from 'docz';import Button from './index.tsx';## 按鈕組件 "100">我是按鈕** 基本屬性 **| 屬性名稱 | 說(shuō)明 | 默認(rèn)值 ||--|--|--||btnType | 按鈕類型 |--|

眾所周知，Markdown 是一種輕量級(jí)標(biāo)記語(yǔ)言，它允許人們使用易讀易寫的純文本格式編寫文檔。團(tuán)隊(duì)成員在開發(fā)文檔時(shí)，熟練使用 markdown 語(yǔ)法，開發(fā) docz 文檔的 mdx 文件，結(jié)合了 Markdown 和 React 語(yǔ)法，相比 storybook 要使用很多的 API 來(lái)編寫文檔的方式，無(wú)疑減少了很多的學(xué)習(xí) storybook 語(yǔ)法的成本。

2)docz 生成的文檔樣式更加符合個(gè)人審美

storybook 生成的文檔樣式，帶有 storybook 的痕跡更為嚴(yán)重一些， 其生成文檔界面如下所示：

docz 生成的文檔圖如下所示：

由上圖對(duì)比可以看出，docz 生成的界面更加簡(jiǎn)介，較為常規(guī)。綜上，結(jié)合默認(rèn)文檔開發(fā)習(xí)慣和界面風(fēng)格，我選擇了docz，當(dāng)然仁者見仁、智者見智，讀者也可以使用同為優(yōu)秀的 storybook 嘗試，這都不是事兒?

2、使用 docz 開發(fā)

確定了 docz 進(jìn)行開發(fā)后，根據(jù)官網(wǎng)介紹，在 create-react-app 生成的組件庫(kù)中進(jìn)行了安裝配置：

npm install docz

安裝成功后，就會(huì)向 package.json 文件中添加如下配置

{ "scripts": { "docz:dev": "docz dev", "docz:build": "docz build", "docz:serve": "docz build && docz serve" }}

這時(shí)還需要在項(xiàng)目的根目錄下新建 doczrc.js 文件，對(duì) docz 進(jìn)行配置：

export default { files: ['./src/components/**/*.mdx','./src/*.mdx'], dest: 'docsite', // 打包 docz 文檔到哪個(gè)文件夾下 title: '組件庫(kù)左上角標(biāo)題', // 設(shè)置文檔的標(biāo)題 typescript: true, // 支持 typescript 語(yǔ)法 themesDir: 'theme', // 主題樣式放在哪個(gè)文件夾下，后面會(huì)講 menu: ['快速上手', '業(yè)務(wù)組件'] // 生成文檔的左側(cè)菜單分類}

其中 files 規(guī)定了 docz 去對(duì)哪些文件進(jìn)行編譯生成文檔，如果不做限制，會(huì)搜索項(xiàng)目中所有的 md、mdx 為后綴的文件生成文檔，因此我在該文件中做了范圍限制，避免一些 README.md 文件也被生成到文檔中。

此外還需要注意到兩點(diǎn)：

1、 menu:['快速上手','業(yè)務(wù)組件'] 對(duì)應(yīng)著組件庫(kù)左側(cè)的菜單欄分類，比如在 mdx 文檔中在最上面設(shè)置組件所屬的菜單 menu:業(yè)務(wù)組件, 則 Button 組件屬于 "業(yè)務(wù)組件" 的分類：

---name: Buttonroute: /buttonmenu: 業(yè)務(wù)組件---

在 src 中新建歡迎頁(yè)，路由為跟路徑，所屬菜單為“快速上手”。

---name: 快速上手route: /---

執(zhí)行 npm run docz:dev，就可以打開

介紹到這里，估計(jì)有小伙伴會(huì)有疑問(wèn)了，這樣生成的網(wǎng)站千篇一律，能否隨心所欲的自定義網(wǎng)站的樣式和功能呢？當(dāng)初我也有這種疑問(wèn)，經(jīng)過(guò)多次嘗試，皇天不負(fù)苦心人，終于摸索出如下方法：

1、修改 docz 文檔本身的樣式

根據(jù) docz 官方文檔中增加 logo 的方法[6]，可以通過(guò)自定義組件覆蓋原有組件的形式：

Example: If you're using our gatsby-theme-docz which has a Header component located at src/components/Header/index.js you can override the component by creating src/gatsby-theme-docz/components/Header/index.js. Cool right?

所以根據(jù) docz 源代碼主題部分代碼：https://github.com/doczjs/docz/tree/master/core/gatsby-theme-docz/src，找到對(duì)應(yīng)的文檔組件的代碼結(jié)構(gòu)，在組件庫(kù)項(xiàng)目根目錄新建同名稱的文件夾：

|-theme| |-gatsby-theme-docz| |-components| |-Header| |-index.js // 在這里修改自定義的文檔組件| |-styles.js // 在這里修改生成的樣式文件

這樣在執(zhí)行 npm run docz:dev 的時(shí)候，就會(huì)把自定義的代碼覆蓋原有樣式，實(shí)現(xiàn)文檔的多樣化。

2、修改 markdown 文檔樣式

事情到這里就結(jié)束了嗎？不！我們的目標(biāo)不僅如此，因?yàn)槲野l(fā)現(xiàn)自動(dòng)生成的 markdown 格式，并不符合我的審美，比如生成的表格文字居左對(duì)齊，并且整個(gè)表格樣式單一，但是這里屬于 markdown 樣式的范疇，修改上述文檔組件中并不包括這里的代碼，那么如何修改 markdown 生成文檔的樣式呢？

經(jīng)過(guò)我靈機(jī)一動(dòng)又一動(dòng)，發(fā)現(xiàn)既然在上面修改文檔組件樣式的時(shí)候，重寫了 component/Header/styles.js 文件，是否可以在該文件中引入自定義的樣式呢？文件結(jié)構(gòu)如下：

|-theme| |-gatsby-theme-docz| |-components| |-Header| |-index.js // 在這里修改自定義的文檔組件| |-styles.js // 在這里修改生成的樣式文件| |-base.css // 這里修改 markdown 生成文檔的樣式

這樣修改后的表格樣式如下：

接下來(lái)各位小主可以根據(jù)自己的審美或者視覺設(shè)計(jì)的要求自定義文檔的樣式了。

部署文檔到服務(wù)器

生成的組件庫(kù)文檔只在本地顯示是沒(méi)有意義的，所以需要部署到服務(wù)器上，于是第一時(shí)間想到的是放在 github 進(jìn)行托管，打開 github 中的 setting 設(shè)置選項(xiàng)，GitHub Pages 設(shè)置配置的分支：

這時(shí)默認(rèn)打開的首頁(yè)路徑為：

https://plusui.github.io/plusReact/

但實(shí)際上頁(yè)面有效的訪問(wèn)地址是帶有文件夾 docsite 路徑的：

https://plusui.github.io/plusReact/docsite/button/index.html

此外，頁(yè)面引入的其他資源路徑，都是絕對(duì)路徑，如下圖資源路徑所示：

所以直接把打包后的資源放在 github 上是無(wú)法訪問(wèn)各種資源的。這時(shí)我們只好把網(wǎng)站部署到云服務(wù)器上了，考慮到服務(wù)器配置的繁瑣，這里給大家提供一個(gè)簡(jiǎn)便的部署網(wǎng)站：Netlify[7]

Netlify 是一個(gè)提供靜態(tài)網(wǎng)站托管的服務(wù)，提供 CI 服務(wù)，能夠?qū)⑼泄?GitHub，GitLab 等網(wǎng)站上的 Jekyll，Hexo，Hugo 等靜態(tài)網(wǎng)站。

部署項(xiàng)目的過(guò)程也很簡(jiǎn)單，傻瓜式的點(diǎn)擊選擇 github 網(wǎng)站中代碼路徑，以及配置文件夾跟路徑，如下圖所示：

然后就可以點(diǎn)擊生成的網(wǎng)站 url，訪問(wèn)到部署的網(wǎng)站了：

而且很方便的是，一旦完成部署之后，之后再次向代碼庫(kù)中提交代碼，Netlify 會(huì)自動(dòng)更新網(wǎng)站。此外，如果想自定義 url，那么就只能去申請(qǐng)域名了，在自己的云服務(wù)器上，解析域名即可。下面簡(jiǎn)單說(shuō)一下配置步驟：

1)首先在 Netlify 網(wǎng)站上，選擇組件庫(kù)對(duì)應(yīng)的 Domain settings 下 Custom domains，增加自己的域名：

2)然后打開云服務(wù)器中的域名解析中的解析設(shè)置，將該域名指向 Netlify：

3)最后打開設(shè)置的網(wǎng)址，就可以訪問(wèn)到組件庫(kù)了：

組件按需加載

好了，經(jīng)過(guò)上面的流程，可以在 demo 項(xiàng)目中使用組件庫(kù)了，但是在 demo 項(xiàng)目中，執(zhí)行 npm run build ，就會(huì)發(fā)現(xiàn)生成的靜態(tài)資源中即使只使用了一個(gè)組件，也會(huì)把 reactui 組件庫(kù)中所有的組件打包進(jìn)來(lái)。

所以如何進(jìn)行按需加載呢？

按需加載首先映入腦海的是使用 babel-plugin-import 插件, 該插件可以在 Babel 配置中針對(duì)組件庫(kù)進(jìn)行按需加載.

用戶需要安裝 babel-plugin-impor 插件，然后在 plugins 中加入配置：

"plugins": [ [ "import", { "libraryName": "reactui", // 轉(zhuǎn)換組件庫(kù)的名字 "libraryDirectory": "dist/components", // 轉(zhuǎn)換的路徑 "camel2DashComponentName":false, // 設(shè)置為 false 來(lái)阻止組件名稱的轉(zhuǎn)換 "style":true } ]]

這樣在 demo 項(xiàng)目中使用如下方式：

import { Button } from 'reactui';

就會(huì)在 babel 中編譯成：

import { Button } from 'reactui/dist/components/Button';require('reactui/dist/components/Button/style');

但是這樣還有些弊端：

1、 用戶在使用組件庫(kù)的時(shí)候還需要安裝 babel-plugin-import， 并做相關(guān) plugins 配置；

2、 開發(fā)組件庫(kù)的時(shí)候組件對(duì)應(yīng)的樣式文件還需要放在 style 文件夾下；

那有沒(méi)有更為簡(jiǎn)單的方法呢？在 ant-design 中尋找答案，發(fā)現(xiàn)這樣一句話 “antd 的 JS 代碼默認(rèn)支持基于 ES modules 的 tree shaking”。對(duì)呀！還可以使用 webpack 的新技術(shù)“tree shaking”。

什么是 tree shaking？ AST 對(duì) JS 代碼進(jìn)行語(yǔ)法分析后得出的語(yǔ)法樹 (Abstract Syntax Tree)。AST 語(yǔ)法樹可以把一段 JS 代碼的每一個(gè)語(yǔ)句都轉(zhuǎn)化為樹中的一個(gè)節(jié)點(diǎn)。DCE Dead Code Elimination，在保持代碼運(yùn)行結(jié)果不變的前提下，去除無(wú)用的代碼。

webpack 4x 中已經(jīng)使用了 tree shaking 技術(shù)，我們只需要在 package.json 文件中配置參數(shù) "sideEffects":false，來(lái)告訴 webpack 打包的時(shí)候可以大膽的去掉沒(méi)有用到的模塊即可。這時(shí)用戶在 demo 項(xiàng)目中使用組件庫(kù)的時(shí)候不需要做任何處理，就可以按需引用 JS 資源了。不知道大家在看到這里時(shí)，是否發(fā)現(xiàn)這樣配置還是有問(wèn)題的：即 sideEffects 配置成 false 是有問(wèn)題的。因?yàn)榘凑丈鲜雠渲?#xff0c;就會(huì)發(fā)現(xiàn)組件的樣式不見了！！

經(jīng)過(guò)排查，原因是引入 CSS 樣式的代碼：import'./button.scss'，可以看到相當(dāng)于只是引入了樣式，并不像其他 JS 模塊后面做了調(diào)用，在 tree shaking 的時(shí)候，會(huì)把 css 樣式去掉。所以在配置 sideEffects 就要把 CSS 文件排除掉：

"sideEffects": [ "*.scss"]

通過(guò)上述 tree shaking 的方法，可以實(shí)現(xiàn)組件庫(kù)的按需加載功能，打包的文件去除了沒(méi)有用到的組件代碼，同時(shí)省去了用戶的配置。

樣式按需加載

通常來(lái)說(shuō)，組件庫(kù)的 JS 是按需加載的，但是樣式文件一般只輸出一個(gè)文件，即把組件庫(kù)中的所有文件打包編譯成一個(gè) index.css 文件，用戶在項(xiàng)目中引入即可；但是如果就是想做按需加載組件的樣式文件，該如何去做呢？

這里我提供一種思路，由于 .tsx 文件是由 TS 編譯器打包編譯的，并沒(méi)有處理 SCSS，所以我使用了 node-sass 來(lái)編譯 SCSS 文件，如果需要按需加載 SCSS 文件，則每個(gè)組件的 index.tsx 文件中就需要引入對(duì)應(yīng)的 SCSS 文件：

import Button from './button';import './button.scss';export default Button;

生成的 SCSS 文件也需要打包到每個(gè)組件中，而不是生成到一個(gè)文件中。

所以使用了 node-sass 中的 sass.render 函數(shù)，抽取每個(gè)文件中的樣式文件，并打包編譯到對(duì)應(yīng)的文件中，代碼如下所示：

//省略 import 引入,核心代碼如下function createCss(name){ const lowerName = name.toLowerCase(); sass.render({ // 調(diào)用 node-sass 函數(shù)方法，編譯指定的 scss 文件到指定的路徑下 file: currPath(`../src/components/${name}/${lowerName}.scss`), outputStyle: 'compressed', // 進(jìn)行壓縮 sourceMap: true, },(err,result)=>{ if(err){ console.log(err); } const stylePath = `../dist/components/${name}/`; fs.writeFile(currPath(stylePath+`/${lowerName}.scss`), result.css, function(err){ if(err){ console.log(err); } }); });}

這樣就在生成的 dist 文件中的每個(gè)組件中增加了 SCSS 文件，用戶通過(guò)“按需加載小節(jié)”中的方法在引入組件的時(shí)候，會(huì)調(diào)用對(duì)應(yīng)的 index 文件，在 index.js 文件中就會(huì)調(diào)用對(duì)應(yīng)的 SCSS 文件，從而也實(shí)現(xiàn)了樣式文件的按需加載。

但是這樣還有一個(gè)問(wèn)題，就是在開發(fā)組件庫(kù)的時(shí)候每個(gè)組件中的 index.tsx 文件中引入的是 SCSS 文件 import'./button.scss'; ，所以 node-sass 編譯后的文件需要是 SCSS 后綴的文件(雖然已經(jīng)是 CSS 格式)，如果生成的是 CSS 文件，則用戶在使用組件的時(shí)候就會(huì)因找不到 SCSS 文件而報(bào)錯(cuò)，也就是用戶在使用組件的時(shí)候，也需要安裝 node-sass 插件。不知大家有沒(méi)有更好的辦法，在組件庫(kù)開發(fā)的時(shí)候使用的是 SCSS 文件，編譯后生成的是 CSS 后綴的文件，在用戶使用組件的中調(diào)用的也是 CSS 文件呢？歡迎在文末留言討論?

結(jié)語(yǔ)

以上就是整個(gè)搭建組件庫(kù)的過(guò)程，從一開始決定使用現(xiàn)有的 create-react-app 腳手架和 docz 來(lái)構(gòu)成核心功能，到文檔的網(wǎng)站部署和 npm 資源的發(fā)布，最初感覺應(yīng)該能夠快速完成整個(gè)組件庫(kù)的搭建，實(shí)際上如果要想改動(dòng)這些現(xiàn)有的庫(kù)來(lái)實(shí)現(xiàn)自己想要的效果，還是經(jīng)歷了一些探索，不過(guò)整個(gè)摸索過(guò)程也是一種收獲和樂(lè)趣所在，愿走過(guò)路過(guò)的小伙伴能有所收獲?

參考文章

[1] NutUI 組件庫(kù): http://nutui.jd.com/#/index

[2] yep-react 組件庫(kù): http://yep-react.jd.com

[3] react 官方網(wǎng)站: https://reactjs.org/warnings/invalid-hook-call-warning.html

[4] storybook: https://storybook.js.org/

[5] docz: https://www.docz.site/

[6] docz 官方文檔: https://www.docz.site/docs/gatsby-theme

[7] Netlify: https://app.netlify.com/teams/zhenyulei/sites

[8]基于 Storybook 5 打造組件庫(kù)開發(fā)與文檔站建設(shè)小結(jié): http://jelly.jd.com/article/5f06fe8505541b015b6a708a

總結(jié)

以上是生活随笔為你收集整理的react打包后图片丢失_如何快速构建React组件库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。