Режим управления монорепозиторием в Vue3.0

Vue.js

предисловие

Некоторое время назад, 21 сентября, я участвовал в конференции, проходившей в Чэнду.第五届FEDAY, Самым впечатляющим поделился главный архитектор Egret Engine @王泽«Строительство инфраструктуры в развитии инфраструктуры», упомянул об использовании двигателя Egret следующего поколения дляmonorepoРежим для управления несколькими модулями и координации обновлений зависимостей между модулями.

Как раз к Национальному дню он был выпущен 5 октября.vue3.0Завершенный исходный код также используетсяmonorepoрежим управления, кажетсяmonorepoУ него есть свои уникальные преимущества, и я уже сталкивался с подобными проблемами в проекте, поэтому у меня есть глубокое понимание этого режима.Эта статья будет основана наvue3.0обсудить как пройтиmonorepoрежим для управления кодом.

Что такое монорепозиторий?

monorepoпредставляет собой сочетание несколькихpackageположить вrepoРежим управления кодом вpackageнесколькоrepoрежим.
В настоящее времяBabel, React, Angular, Ember, Meteor, JestМногие проекты с открытым исходным кодом, такие как этот, используют этот шаблон для управления кодом.

решенная проблема

  1. несколькоrepoСложно управлять, редактору нужно открывать несколько проектов;
  2. Когда модуль обновляется, другие модули, которые зависят от модифицированного модуля, необходимо обновить вручную, что легко пропустить;
  3. Обычные пакеты npm устанавливаются повторно, занимая много места на жестком диске, например инструменты для упаковки.webpackбудет установлен один раз для каждого проекта;
  4. Дружественный к новичкам, установка зависимостей всех модулей может быть выполнена одной командой, и весь модуль проекта не нужно искать на каждом складе;

проблемы

  1. всеpackageКод сосредоточен в одном проекте, а один проект относительно велик;
  2. всеpackageКод виден всем и не может управляться разрешениями;

Как реализовать монорепозиторий?

Текущая передовая практика в отрасли заключается в использованииyarn workspace + lernaреализовать.

yarn workspaceМожно реализовать добавление и совместное использование зависимостей нескольких модулей в проекте, а такжеlernaФункция более совершенна, можно не только управлять несколькими модулями, но и очищать модули.node_modules, публиковать модули в npm, автоматически обновлять зависимости версий между модулями и поддерживать такие функции, как полный выпуск и отдельный выпуск в соответствии с изменениями.

yarnОфициально рекомендуетсяyarnДля обработки установки зависимостей используйтеlernaдля обработки проблем обновления и выпуска зависимостей.

Следующие старты основаны наmonorepoшаблон для создания имитацииvue3.0проект

1. Установите yarn и lerna глобально

$ npm i -g yarn lerna

2. Инициализируйте проект

$ mkdir vue-next && cd vue-next 
$ lerna init

// 此时项目结构
vue-next
|-packages
|-lerna.json
|-package.json

3. Добавьте конфигурацию рабочей области пряжи

// vue-next/package.json
"private": true, // 项目根目录下的private必须设置成true，否则workspace不会被启用
"workspaces": [  // 指定需要管理的模块
    "packages/*"
],

4. Добавьте содержимое модуля

// 此时项目结构
vue-next
|-packages          // packages下的所有包结构类似，下面仅展示了compiler-core包的目录结构
    |-compiler-core     // 与平台无关的编译器
        |-__tests__         // 测试用例
        |-src               // 源文件
        |-index.js          // 根文件
        |-package.json      // 包配置
    |-compiler-dom      // 与浏览器相关的编译器
    |-reactivity        // 数据响应式系统
    |-runtime-core      // 与平台无关的runtime
    |-runtime-dom       // 与浏览器相关的runtime
    |-runtime-test      // 为了测试的轻量级runtime
    |-server-renderer   // 服务端渲染
    |-shared            // 内部帮助方法
    |-template-explorer // 预览模版转化成render函数的工具
    |-vue               // 用于构建完整的vue版本

|-lerna.json
|-package.json

5. Установите связанные зависимости

Как правило, в проекте используются только следующие три формы установки.

5.1 Установите зависимости для корневого проекта (обычно общедоступные инструменты разработки)
// yarn 使用 workspace 模式安装 npm 包时必须加 -W 参数
$ yarn add -W -D rollup typescript jest prettier ...
5.2 Установка внешних пакетов npm для пакетов
// @vue/compiler-core 是取 vue-next/packages/compiler-core/package.json 的 name 字段
$ yarn workspace @vue/compiler-core add acorn estree-walker source-map 
$ yarn workspace @vue/template-explorer add monaco-editor
5.3 Установите внутренние пакеты npm для пакетов
// @vue/compiler-core 是取 vue-next/packages/compiler-core/package.json 的 name 字段
$ yarn workspace @vue/compiler-dom add @vue/compiler-core@3.0.0-alpha.1  // 一定要指定正确的版本号，不然会到npm查找包
$ yarn workspace @vue/runtime-core add @vue/reactivity@3.0.0-alpha.1 
$ yarn workspace @vue/runtime-dom add @vue/runtime-core@3.0.0-alpha.1 
$ yarn workspace @vue/runtime-test add @vue/runtime-core@3.0.0-alpha.1 
$ yarn workspace vue add @vue/compiler-dom@3.0.0-alpha.1 @vue/runtime-dom@3.0.0-alpha.1 // 可同时安装多个

На данный момент основная конструкция проекта завершена (техническое содержание, такое как упаковка, пропущено, эта статья в основном знакомитmonorepoсвязаны), кажется, в основномyarnработающий,lernaНе пригодится, чтобы представить следующееlernaГде вы можете расширить возможностиvue3.0.

Знакомство с лерной

A tool for managing JavaScript projects with multiple packages.

Один используется для управления несколькими в проекте jspackageИнструмент.

В основном, чтобы помочь разработчикам управлять более эффективно и легкоpackageсам, зависит, публикует.

1. Инициализировать проект

// 生成基本项目结构和 lerna 配置
$ lerna init

2. Установите зависимости

Если вам нужно переустановить зависимости, не забудьте удалить корневой путь проекта.node_modulesвыполнено доgitСовершить сохранение, потому чтоmonorepoРежим заключается в реализации внутренних ссылок на пакеты в виде программных ссылок, непосредственном удалении всегоnode_modulesзаодно поставлю всеpackageУдаленные файлы трудно восстановить!

Рекомендуется никогда не удалять весьnode_modulesоперация, вы можете ввестиnode_modulesВыбрав все, снимите галочку с внутреннегоpackageМягкая ссылка, а затем удалить.

// 给所有 package 安装依赖，在对于的目录生成 node_modules，并在 node_modules 中为内部package生成软链接
$ lerna bootstrap
// 默认会使用 npm 安装，但是本项目使用 yarn，可以指定使用 yarn
$ lerna bootstrap --npm-client=yarn     // 或者在 lerna.json 配置 {"npmClient": "yarn"}
// 上述安装方式如果不同package之间安装了同一个npm包，会造成重复安装，增加安装时间和项目体积
// 可以利用 node_modules 向上查找的特性，将所有依赖安装到项目根路径的 node_modules 中，lerna 加上 --hosit即可
$ lerna bootstrap --hosit
// 使用lerna bootstrap --npm-client=yarn --hoist
// 会有冲突，报错--hoist is not supported with --npm-client=yarn, use yarn workspaces instead
------------------------------------------------
$ yarn // 推荐！！ 用 yarn workspace 特性替代 lerna bootstrap

3. Удалите лишние node_modules в пакете.

// 在 6.2 安装依赖时，部分npm包会给当前的package目录安装 node_modules
// 同时根路径中的 node_modules 也会安装项目
$ lerna clean

4. Посмотреть все пакеты

// package.json 中设置了 "private": true 的 package 不会展示
$ lerna ls

5. Просмотр измененного пакета

// package.json 中设置了 "private": true 的 package 不会展示
// 在 Independent mode 下只有改动过的 package 才会被发布
// vue3.0 采用的是 Fixed/Locked mode (default)，每次都会发布所有 package，package 版本跟随项目的版本走
$ lerna changed

6. Отправить в git и опубликовать в npm (важно)

// 根据当前的 lerna 模式（Fixed/Locked mode (default) 或者 Independent mode）来进行整包发布或者有改动的 package 单独发布
// 每次发布会自动更新相关package的版本号，并且会更新引用该package的其他package依赖
$ lerna publish

демонстрационная ссылка на монорепозиторий

Суммировать

В этой статье описываетсяmonorepoРеализация режима управления, черезyarn workspaceа такжеlernaОба объединяются для достиженияrepoЭффективно и удобно управлять несколькимиpackageцель.

может не развиться в нашей повседневной работе白鹭引擎,vueПотребности таких масштабных фреймворков, но это не значит, что мы не можем использовать этот режим.Ниже я резюмирую несколько подходящихmonorepoСценарий режима администратора:

  1. Крупномасштабная структура, поддерживаемая несколькими независимыми базовыми модулями, разработанными самостоятельно;
  2. Back-end проекты, несколько back-end систем, объединенных стеком технологий, каждая система как независимаяpackageОтдельная разработка, оптимизация времени разработки и упаковки, в то время как общие компоненты и методы js могут использоваться в качествеpackage;
  3. библиотека компонентов пользовательского интерфейса, каждый компонент независимо реализует загрузку по запросу, например, библиотека мобильных компонентов Ele.me.mint-ui;
  4. sdk, унифицированное управление разными кодами каналов, подключенными к одному и тому же sdk;
  5. ...

использованная литература

Строительство инфраструктуры в рамках разработки
Руководство по исходному коду Vue 3
Рабочий процесс Monorepo на основе рабочего пространства lerna и yarn

Категории