再談前端項目的組件化

再談前端項目的組件化

之前詳細聊過的前端項目的組件化，可以參考 組件化 與 私有 npm 倉庫，今天來更進一步的說說前端項目的組件化。

1. 之前的組件化

目錄結構：

-project1     # 項目1
-project2     # 項目2
-component1   # 組件1
-component2   # 組件2

project1 的 package.json：

{
  "dependencies": {
    "@yourCompany/component1": "^0.0.1",
    "@yourCompany/component2": "^0.0.1"
  }
}

在代碼中使用：

import component1 from '@yourCompany/component1';

2. 之前的組件化方式存在的問題

1. 更新組件比較麻煩，特別是對於一些與業務耦合比較深的組件，頻繁更新會比較頭疼
2. 組件太多的時候，管理起來就感覺比較累，因爲每個組件都是一個單獨的項目，都有一套獨立的構建環境
3. 對於有些代碼量小的組件，做一個單獨的項目，實在有點大才小用

3. 另外的項目組件化方式

針對上面講到的問題，另一種方式可以很好的解決：

目錄結構：

-project1     # 項目1
-project2     # 項目2
-components   # 組件集合項目

components 組件集合項目的目錄結構：

- src/             # 源代碼目錄
  - component1     # 組件1
  - component2     # 組件2
  - component3     # 組件3
  - ...

- package.json
- README.md
- CHANGELOG.md
- .eslintrc.js
- .stylelintrc.js
- .prettierrc.js
- ...

把 components 目錄軟鏈接 project1 目錄下：

（注意： project1 的 .gitignore 需加上 /components）

# 以下是 linux 命令，windows 類似
cd project1
ln -s ../components ./

project1 項目的目錄結構：

- src/             # 源代碼目錄
- components/      # 組件項目目錄（軟鏈接）

- package.json
- README.md
- CHANGELOG.md
- .eslintrc.js
- .stylelintrc.js
- .prettierrc.js
- ...

在代碼中使用：

import component1 from 'relative/path/to/components/src/component1';

4. 兩種方式的選擇

上面的兩種方式各有各的優勢，可以配合一起使用。

大的、不常更新的組件可以使用 npm 包的方式，小的、常更新的可以使用軟鏈接項目的方式。

後續

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版權聲明：自由轉載-非商用-非衍生-保持署名（創意共享3.0許可證）