Фронтенд-инжиниринг: строительные леса + библиотека материалов для быстрого создания новых проектов

внешний интерфейс

ноль, предисловие

У Meituan есть Lego, у JD.com есть Babel, у Ali есть Feibing, все крупные производители пытаются использовать инструменты автоматизации для сокращения трудозатрат После прочтения этой статьи подумайте о создании набора автоматизированных инструментов разработки для своей команды!

1. Предпосылки

Компания, в которой работает автор, не является крупным заводом, и я обнаружил некоторые болевые точки.

1. Front-end R&D следует за бизнесом, разные отделы имеют разные стеки технологий, и сложно поддерживать одну и ту же позицию (react | vue | seek.js),

2. Спецификации не унифицированы, межведомственный проект открытый, а редактор красное море стандартный Airbnb google.

3. Компоненты переиспользовать сложно, процесс дикий, разработка неэффективная, в основном сидит в проекте, ищет код, ctrl+c, ctrl+v, а потом вносит рандомные изменения.

2. Идеи развития

Используйте базовые шаблоны + материалы (компоненты) для быстрой генерации проектов, а затем снова их разрабатывайте

Когда я писал реактивный проект, автор использовал плагин generateReactComponents vscode, который был очень удобен. Подумайте, можно ли его написать как полный набор связанных бизнес-компонентов для эффективного повторного использования и быстрой генерации проектов? На это ушло около 3 месяцев свободное время, чтобы сделать текущий инструмент, joao-cli, может достичь следующих эффектов (внутренняя версия записанной компании, команда версии с открытым исходным кодом joao)

Нажмите, чтобы увидеть официальный сайт joao cli

joao в основном используется для проектов Vue.Если ваш проект реализован на основе React, рекомендуется использовать fusion.design, официально поддерживаемый Alibaba, а платформа Alibaba открыла библиотеку материалов и слой пользовательского интерфейса.

Общая идея комплектации леса + библиотека материалов такова:

1. Сначала создайте пустой проект

Библиотека компонентов пользовательского интерфейса, eslint и собственная библиотека инструментов бизнес-направления, библиотека шрифтов и т. д., которые используются отделом установки, могут быть тесно связаны с бизнесом.

Здесь автор берет в качестве примера пустой проект на github, нажмите на меня для просмотра

2. Создайте библиотеку материалов

Создайте еще одно хранилище, и разработчики смогут участвовать, исправлять спецификации и поддерживать общие компоненты. Вы можете просмотреть примеры в папке материалов корневого каталога проекта автора на github.

Вот библиотека материалов, коннотация официального кода сайта + код библиотеки материалов(Не многие материалы предназначены только для справки)

3. Улучшить инструменты для вытягивания шаблона, снятия материала и установки.

Это то, что делает joao-cli Вы можете попробовать использовать узел, чтобы написать свой собственный, и использовать команду + клон git, чтобы завершить код, вытащить и стереть .git

Извлеките материал библиотеки материалов, будь то компоненты или модули, используйте fs узла для чтения файла.Затем вставьте его в указанное место нового проекта и замените частные свойства некоторыми заполнителями.Автор ссылается на generateReactComponent vscode здесь. , с __className__ в качестве заполнителя по умолчанию, заменяя имена модулей.

Наконец, используйте git coreconfig.sparse-checkcout для завершения обновления указанного каталога библиотеки материалов.

Из-за большого количества содержания узлов я не буду их здесь повторять.Выкопайте здесь яму, я закончу учение Жоао-Кли в будущем, код на самом деле очень простой, даже можно сказать низкий, и его нетрудно увидеть непосредственно.

В-третьих, несколько инструкций для joao-cli.

    // 安装joao-cli
    npm install joao-cli -g
    
    // 初始化项目
    joao init
    
    // 当前物料查看
    joao check
    
    // 物料库更新(从github物料库拉取)
    joao update
    
    // 组件安装 components 在项目根目录使用
    joao add -c 名称A 名称B  ...
    
    // 模块安装 (页面级内容) 在项目根目录使用
    joao add -p 随便起个页面名

Поиграйте сами и, возможно, поймете, что происходит.

4. Сравнительный анализ с Alifeibing и Meituan Lego.

Прежде всего, после написания этого инструмента, автор отправился изучать готовый проект большой фабрики,

Идея Meituan Lego кажется инженерной вместе с бэкэндом., отличная идея, а сейчас у Наггетов тоже много разбора интерфейсно-ориентированного программирования, так что не буду вдаваться в подробности.

Али Фейбинг хочет быть большим и полным, такого рода инструмент, грубо говоря, заключается в повторном использовании кода, и он не имеет ничего общего со стеком технологий. Feibing сделал небольшие программные материалы и vue-материалы, и все они сделаны сообществом. Больше людей — больше мощность, и они также используют электроны для написания приложений, можно сказать, что я действительно хочу быть больше своим сердцем.Парный бизнес должен полагаться на себя, Fei Bing достаточно, чтобы играть сам по себе, а компании среднего размера должны заниматься своими делами.

Ali fusion.design исполнил мечту автора,Библиотека материалов открывает слой UI и автоматически генерирует код интерфейса.Это действительно здорово.К сожалению,команда автора проекта вся официальная поддержка vue,fusion и react.

Выше все комментарии из сна этого диаоси, я не несу никакой ответственности в течении дня.~(@^_^@)~

Пять, хорошие и плохие стороны этого развития

1.Повышение ремонтопригодности проектаЕдиный шаблон означает единый стек технологий, единую спецификацию.

2.Повышение доступности компонентовЕдиная библиотека материалов означает разницу между поддержкой n наборов кодов и поддержкой 1 набора

3.Повышение эффективности разработки, Попрощайтесь с липкой трудовой карьерой копирования элементов и копирования пустых элементов.

вред

Автор не продвигал его на моей собственной фабрике... Я могу быть крутым только тогда, когда работаю один... В настоящее время я думаю, что самым большим недостатком является высокая стоимость письменных принадлежностей.

Шесть, разбитые мысли

Когда я становлюсь старше, мое желание делиться ослабевает. Рекламировать мою последнюю статью -->Участвуйте в платформе машинного обучения, такой как Ali PAI

Наконец, спасибо за чтение.

официальный сайт Жоао Кли