再谈前端项目的组件化

再谈前端项目的组件化

之前详细聊过的前端项目的组件化,可以参考 组件化私有 npm 仓库,今天来更进一步的说说前端项目的组件化。

1. 之前的组件化

目录结构:

-project1     # 项目1
-project2     # 项目2
-component1   # 组件1
-component2   # 组件2

project1package.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许可证


前端小站
web, 前端, javascript, nodejs, electron, babel, webpack, rollup, react, vue ...

达则兼济天下,穷则独善其身。

12.7k 声望
6.5k 粉丝
0 条评论
推荐阅读
Spring 源码解析十五:SpringCloud 的基础组件
Spring 源码解析十五:SpringCloud 的基础组件SpringCloud 并不是只有一个项目,而是很多项目构成的生态体系总称,如spring-cloud-netflix: 对 https://github.com/netflix 开源组件的集成spring-cloud-gateway: ...

深雨2阅读 2.6k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图

达则兼济天下,穷则独善其身。

12.7k 声望
6.5k 粉丝
宣传栏