【keel】1. 搭建自己的框架 – 选型

1、包管理器

. pnpm

  • 优点
    • 最节省磁盘空间,通过硬链接技术共享依赖。
    • 安装速度非常快,尤其适用于多项目环境。
    • 更严格的依赖管理,减少了版本冲突的可能性。
    • 对 monorepo 支持非常好。
  • 缺点
    • 相对较新的工具,社区支持和文档可能不如 npm 和 Yarn 完善。
    • 需要适应新的依赖管理机制。

其他特点其实影响不大,但是考虑到扩展性:

pnpm 会根据项目需求,严格管理各个子项目的依赖,不会像 npmYarn 那样默认扁平化 node_modules,这避免了潜在的依赖冲突。即使某个包的多个版本出现在不同子项目中,它们会被正确隔离,确保各个项目能独立运行。影响:对 monorepo 来说,pnpm 的这种依赖隔离策略能防止子项目间的依赖干扰,从而提升整体的稳定性。

最终还是选择了pnpm,这种使用软硬连接的方式可能导致直接复制node_module的测试方式失效,但是这个是可以接受的。

2、前端构建工具

Webpack 适用场景:

  1. 大型企业项目:需要复杂的打包和优化流程,可能包含自定义的构建规则、大量依赖库。
  2. 需要兼容旧版浏览器:Webpack 对于老旧浏览器的兼容性非常好,适合那些需要兼容 IE 等旧浏览器的项目。
  3. 复杂项目结构:多页面应用(MPA)、复杂的构建流程、复杂的依赖图等,Webpack 的灵活性和强大的插件系统可以满足要求。
  4. 高度自定义的项目:如果需要深度定制构建流程和功能,Webpack 提供了非常丰富的工具和插件支持。

Vite 适用场景:

  1. 现代前端框架项目:Vite 专为 VueReact 等现代前端框架而设计,特别适合现代 JavaScript 和 ES6 模块项目。
  2. 快速原型开发:Vite 启动速度快,配置简单,非常适合快速开发和中小型项目,开发体验更好。
  3. 不依赖旧版浏览器:Vite 更适合面向现代浏览器的项目,不需要考虑太多对旧版浏览器的兼容性。
  4. 单页面应用(SPA)或微前端:Vite 支持现代的模块化开发,适合单页面应用和微前端架构的开发。
  5. 需要跨平台的开发:Vite 在 monorepo 场景中表现出色,适合多项目、多平台开发。

这里很难决断,未来的开发无法确定是否会向更加复杂的方向发展,但是考虑到目前遇到的多数情况下,项目很少有发展到超大规模的时候,更多的是多个中小型项目的组合,最后再综合开发中大部分是在现代浏览器开下的框架开发,所以这里还是决定使用vite,毕竟在开发阶段有无法比拟的效率优势。

3、选用什么前端开发框架呢?

  • 从包管理器和构建器的选择上可以看出我的选择场景是中小型项目的开发框架,那么当然是选择vue来贯彻这一个理念
  • 使用渐进式的框架有助于根据业务调整框架的功能
  • 使用学习曲线平缓的框架有助于开发人员快速进入开发
  • 国内还是vue使用者比较多,当然在大厂react因为丰富的生态和更胜一筹的效率是常见的选择,但是我的平台是为了快速开发搭建自己的项目,所以暂时不考虑react

4、选用什么样式预编译器呢?

less是个敏捷快速的预编译器,和我们的目标系统很匹配,下面是将less加入vite

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // 允许 Less 中的 JS 表达式
      },
    },
  },
});

5、git地址:

https://github.com/huangssssx/keel

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部