再谈前端项目的组件化

hufeng 发布于2019-08-23 18:14 / 2108人阅读

摘要：再谈前端项目的组件化之前详细聊过的前端项目的组件化，可以参考组件化与私有仓库，今天来更进一步的说说前端项目的组件化。

再谈前端项目的组件化

之前详细聊过的前端项目的组件化，可以参考组件化与私有 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. 之前的组件化方式存在的问题

更新组件比较麻烦，特别是对于一些与业务耦合比较深的组件，频繁更新会比较头疼

组件太多的时候，管理起来就感觉比较累，因为每个组件都是一个多带带的项目，都有一套独立的构建环境

对于有些代码量小的组件，做一个多带带的项目，实在有点大才小用

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)

GPU云服务器云服务器前端组件前端组件维护通用前端组件前端组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104877.html

再谈前后端分离

摘要：前段时间我针对手头上的项目前端配置进行了反思以及总结并且写了两篇文章传统后端渲染的项目前端配置配置之前后端不分离很显然这些配置能满足一时的需求但是也有不足今天继续总结这里应该不涉及到具体后端语言只对前端配置进行描述毕竟配置工程师逃静态资源管前段时间我针对手头上的项目前端配置进行了反思以及总结并且写了两篇文章: webpack传统后端渲染的项目前端配置, webpack配置之前后端不分...

Jeff 2019-08-22 11:14 评论0 收藏0
再谈Vue的生命周期----结合Vue源码

摘要：中的生命周期函数也可以称之为生命周期钩子函数，在特定的时期，调用特定的函数。吊起钩子函数调起钩子函数问题为什么是一个数组卸载组件，会触发一个这行代码之后发生了什么背后实现原理。简介关于Vue的生命周期函数，目前网上有许多介绍文章，但也都只是分析了表象。这篇文档，将结合Vue源码分析，为什么会有这样的表象。 Vue中的生命周期函数也可以称之为生命周期钩子（hook）函数，在特定的时期...

KavenFan 2019-08-23 12:16 评论0 收藏0
构建前端项目

摘要：解决思路服务器端渲染服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。分离为什么需要前后端分离、web服务器与static服务器分离: 前端与后端耦合 (需求) 自动化、工程化的构建前端的代码 (基础条件) 模块化、组件化，项目共享代码 (...

mindwind 2019-08-23 13:51 评论0 收藏0
CI Weekly #6 | 再谈 Docker / CI / CD 实践经验

摘要：阿里云效平台基于理念的私有平台实践本文将系统的从个方面，分享互娱运维团队对于运维平台实践经验及未来展望，希望对大家有一些参考意义。 CI Weekly 围绕『软件工程效率提升』进行一系列技术内容分享，包括国内外持续集成、持续交付，持续部署、自动化测试、 DevOps 等实践教程、工具与资源，以及一些工程师文化相关的程序员 Tips 。同步于 flow.ci Blog、微信公众号、官...

justCoding 2019-06-28 17:49 评论0 收藏0