Merge pull request deepraining#53 from senntyou/dev

extend/19

Author: deepraining

README.md

@@ -52,6 +52,7 @@
 16. [\[2019-02-19\] 前端项目如何管理](./extend/16.md)
 17. [\[2019-03-12\] 自己常用的前端项目脚手架模板](./extend/17.md)
 18. [\[2019-05-29\] 细说 Vue 组件的服务器端渲染](./extend/18.md)
+19. [\[2019-05-29\] 再谈前端项目的组件化](./extend/19.md)
 
 ## javascript
 

extend/19.md

@@ -0,0 +1,112 @@
+# 再谈前端项目的组件化
+
+之前详细聊过的前端项目的组件化，可以参考 [组件化](../architecture/6.md) 与 [私有 npm 仓库](../architecture/7.md)，今天来更进一步的说说前端项目的组件化。
+
+## 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](https://github.com/senntyou/blogs)
+
+作者：[深予之 (@senntyou)](https://github.com/senntyou)
+
+版权声明：自由转载-非商用-非衍生-保持署名（[创意共享3.0许可证](https://creativecommons.org/licenses/by-nc-nd/3.0/deed.zh)）