Bruce Cli

bruce-cliЯвляетсяReact/VueАвтоматизация приложений для создания строительных лесов, его преимущество в нулевой конфигурации «из коробки» очень подходит для студентов начального уровня, младших-средних и передовых студентов проектов быстрой разработки.Его также можно использовать при созданииbrucerc.jsфайл, чтобы переопределить его конфигурацию по умолчанию, вам нужно сосредоточиться только на написании бизнес-кода, не обращая внимания на написание кода сборки, что делает структуру проекта более лаконичной. Нажмите, чтобы узнать подробностиздесь, не забудьте проверить документацию при его использовании и поставить звезду, если вам это нравится

bruce-cli

🎥 Фон

С ростом развития интерфейсных технологий, от нескольких простых файлов в прошлом до кучи файлов, в проект внедряются различные расширения и инструменты, что делает проект больше и сложнее в управлении, а интерфейсный проект также стал иметь тенденцию быть спроектированным и интегрированным. Постоянно меняющиеся интерфейсные технологии делают бизнес-логику и эффекты взаимодействия внешнего кода все более и более сложными, и проект будет постоянно поддерживаться и повторяться, что усложняет управление разработчиками. Модульная разработка и различные фреймворки делят проект на несколько небольших модулей, что усложняет финальный релиз, нет единого стандарта, что делает странной структуру фронтенда проекта. Обычно проекты разрабатываются командами, и каждому сложно иметь одинаковые привычки написания кода и стиль написания логики. работа вращается вокругЭффективность разработкиа такжеХодовые характеристикиИнженерная проблема . Таким образом, автоматическое построение интерфейсных проектов становится все более и более важным при разработке всего проекта.

🔗Зависимость

Этот проект основан наWebpack4.x.xБыстрые, не требующие настройки готовые сборщики веб-приложений для разработки (Каждое обновление будет содержать последние зависимости), интегрируя различные общие инструменты (Handlebars,Postcss,Sass,Less,Babel,TypeScript,Stylelint,Eslint,Tslintи т. д.) расширенная функциональность сборки для создания и управленияReact/VueПроектное применение стека технологий

📦Установить

npm i -g bruce-cli

установка не удалась

переключатьзеркало нпмДля зеркала Таобао:npm config set registry https://registry.npm.taobao.org/
переключатьСасс зеркалоДля зеркала Таобао:npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
Повторно выполните команду установки:npm i -g bruce-cli

💻 Используйте

~	Заказ	Сокращенное название
Построить проект	bruce build	`bruce b`
первоначальный проект	bruce init	`bruce i`
переключить язык	bruce locale	`bruce l`
Создание компонентов	bruce new	`bruce n`
удалить зависимости	bruce remove	`bruce r`

☎️Язык

zh-chs:Упрощенный китайскийПо умолчанию
zh-cht:традиционный китайский
en: Английский

💡 Особенности

Командная функция

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

Встроенная функция

⚙️Конфигурация

alias: Ярлык импорта модуля, пожалуйста, обратитесь к деталям конфигурацииwebpack-resolve-alias
browserList: список конфигурации целевого браузера, пожалуйста, обратитесь к деталям конфигурацииbrowserslist
errorCb(err): Функция обратного вызова сборки, вы можете настроить другие операции
- err: сообщение об ошибке
eslintIgnores: Eslint игнорирует список путей, см. подробности конфигурации.eslint-ignores
eslintRules: Список правил проверки Eslint, см. подробности конфигурации.eslint-rulesа такжеrules
frame:Среда разработки(defaultУказывает на общее применение,reactпредставляет приложение React,vueпредставляет приложение Vue)
includeModules: компилировать список разрешенных модулей (node_modules/xxx), значение по умолчанию неверноnode_modulesкомпилировать
openPath: Отображать URL-адрес после открытия браузера в среде разработки.
proxy: Прокси-сервер интерфейса, пожалуйста, обратитесь к деталям конфигурацииwebpack-dev-server-proxy
style: формат стиля (scss、less)
stylelintIgnores: Stylelint игнорирует список путей, см. подробности конфигурации.stylelint-ignores
stylelintRules: Список правил проверки Stylelint, см. сведения о конфигурации.stylelint-rulesа такжеrules
successCb(mode, dir): Создайте успешную функцию обратного вызова, вы можете настроить операцию загрузки файла или другие операции.
- mode: среда выполнения (testпредставляет тестовую среду,prodпредставляет производственную среду)
- dir: выходной путь
uploadOpts(mode): функция загрузки конфигурации (должна возвращатьObject, и содержит следующие поля), пожалуйста, обратитесь к деталям конфигурацииscp2
- параметр обратного вызова
  - mode: среда выполнения (testпредставляет тестовую среду,prodпредставляет производственную среду)
- возвращаемый объект
  - host: IP-адрес сервера
  - password: пароль (не совместим сprivateKeyсосуществовать)
  - path: целевой путь к файлу
  - privateKey: секретный ключ (не может сочетаться сpasswordсосуществовать)
  - username:учетная запись
useTs: Интеграция TypeScript

распределение по умолчанию

module.exports = {
    alias: {},
    browserList: [
        "last 20 Chrome versions",
        "last 20 Firefox versions",
        "last 20 Opera versions",
        "Explorer >= 10",
        "Safari >= 8",
        "Android >= 5",
        "iOS >= 8"
    ],
    errorCb: null,
    eslintIgnores: [],
    eslintRules: {
        // eslint规则配置
        // 查看bruce-cli模块下的temp/configs/eslintrc-{default/react/vue}.json
    },
    frame: "default",
    includeModules: [],
    openPath: "",
    proxy: {},
    style: "scss",
    stylelintIgnores: [],
    stylelintRules: {
        // stylelint规则配置
        // 查看bruce-cli模块下的temp/configs/stylelintrc-{default/react/vue}.json
    },
    successCb: null,
    uploadOpts: null,
    useTs: false
};

Конфигурация наложения

В настоящее время доступно только.jsФайл написан в виде , вы можете обратиться к следующей конфигурации, чтобы написать
Поскольку в этом проекте используетсяCommonJS规范для разработки, поэтому вы должны использоватьmodule.exports = { ... };Экспортируйте следующие свойства конфигурации
Чтобы настроить операцию загрузки, вы должны указатьuploadOptsУстановить какnullили удалите это поле и используйтеsuccessCbчтобы определить операцию загрузки

module.exports = {
    alias: {
        swiper: "swiper/dist/js/swiper.js"
    },
    browserList: [
        "> 0.5%",
        "last 2 versions"
    ],
    errorCb(err) {
        console.log("错误信息", err);
    }
    eslintIgnores: [
        "src/components/*"
    ],
    eslintRules: {
        "space-before-function-paren": ["error", "always"]
    },
    frame: "react",
    includeModules: [
        "lodash",
        "trample"
    ],
    openPath: "?abc=123",
    proxy: [{
        changeOrigin: true,
        context: [
            "/login",
            "/list",
            "/detail"
        ],
        secure: false,
        target: "https://www.baidu.com"
    }],
    style: "less",
    stylelintIgnores: [
        "src/assets/css/*"
    ],
    stylelintRules: {
        "color-hex-case": "upper"
    },
    successCb(mode, dir) {
        console.log("运行环境", mode);
        console.log("输出路径", dir);
    },
    uploadOpts(mode) {
        return {
            host: "your server ip",
            password: "your server password",
            path: "/root/www",
            username: "root"
        };
    },
    useTs: true
};

📋 Подробности

CLI связанные

Язык интерфейса по умолчанию简体中文, переключить繁体中文или英文Запросbruce lсделать переключатель
В настоящее время оборудован толькоReactа такжеVueконфигурация сборки, не используйте для сборкиAngularили другиеMVVMпроект
Текущее приложение может быть толькоReactПодать заявку илиVueприложение для использованияbruce nЗаказ
конфигурационный файлbrucerc.jsСобственностьnull,[],{}При использовании значения по умолчанию встроенной конфигурации
Обязательно следуйте подсказкам об ошибках сборки для исправления, не изменяйте произвольно исходный код сборки и конфигурацию сборки, это может привести к сбою процесса сборки проекта.
После нескольких сборок может произойти сбой чтения кэша из-за длительного использования долгой оптимизации кэша, и при перестроении может появиться сообщение об ошибке.bruce rудалятьnode_modulesи переустановите зависимости

связанные с IDE

Рекомендуемое использованиеVSCodeДля разработки проекта следующая конфигурация также основана наVSCodeпровести
Если включеноStylelint,Eslint,Tslint, необходимо установить в IDEПлагин Stylelint,Плагин Eslint,Плагин TslintЧтобы сотрудничать с проверкой кода этого проекта, чтобы выделить предупреждения и ошибки
если нужноStylelintПодсветку синтаксиса и автоматическое исправление синтаксических ошибок при сохранении можно найти в首选项>设置Средние настройки (см. документацию плагина, в настоящее время недействительна)
если нужноEslintПодсветку синтаксиса и автоматическое исправление синтаксических ошибок при сохранении можно найти в首选项>设置Средние настройки (см. документацию плагина)
если нужноTslintПодсветку синтаксиса и автоматическое исправление синтаксических ошибок при сохранении можно найти в首选项>设置Средние настройки (см. документацию плагина)

связанный с файлом

Проект может существовать только в JS или TS, а файл скрипта в проекте JS может быть только.jsили.jsx, файл скрипта под проект TS может быть только.tsили.tsx
Если тип приложения — SPA, файл записи должен бытьsrc/index.(js|ts|jsx|tsx)
Если тип приложения — MPA, файл ввода должен бытьsrc/pages/pageName/index.(js|ts|jsx|tsx)
когдаsrc/pagesкаталог существует и содержит вложенные папки, он автоматически распознается какMPA项目
использоватьCSS精灵图, значки должны быть размещены равномерноsrc/assets/icon, а формат файлаpng
выставить глобальные переменныеRUN_ENVИспользуется для получения текущей операционной среды, при использованииEslintилиTslintВ случае синтаксической ошибки добавьте ее послеeslint-disable-lineилиtslint:disable-lineТолько что
- dev: Среда разработки
- test:тестовая среда
- prod:Производственная среда
ярлык импорта файлов
- #:Корневая директория
- @:srcсодержание

Связанные с прокладкой

@babel/polyfillсуществует7.4.0позже устарела, поэтому прокладка, используемая в этом проекте,core-jsа такжеregenerator-runtime
Если нет особой совместимости, не нужно добавлять вверху файла записиimport "core-js/stable";а такжеimport "regenerator-runtime/runtime";, программа сборки автоматическиbrowserslistДобавить разделители
Для совместимости с браузерами более ранних версий требуется ручная установкаcore-js(core-jsВерсия должна бытьv3)а такжеregenerator-runtime, добавьте вверху файла записиimport "core-js/stable";а такжеimport "regenerator-runtime/runtime";

связанные с ES6

воплощать в жизньbruce bПри сборке проекта, если это первая сборка, будет предложено построитьpackage.jsonВнизdependenciesзависимости (Dll构建), цель состоит в том, чтобы ускорить последующую разработкуHMRБудут созданы только измененные файлы, а остальные файлы не будут создаваться постепенно.
Если зависимость использует импорт по требованию ESM, выполнитеbruce bНе выбирайте эту зависимость при сборке проектаDll构建, И вbrucerc.jsизincludeModulesДобавьте эту зависимость в сборку, и блоки кода, на которые нет ссылок или которые не выполняются, будут удалены при сборке.

связанные с ТС

При использовании TS файл конфигурации будет автоматически сгенерирован в корневом каталоге проекта.tsconfig.json
Чтобы изменить конфигурацию TS, просто изменитеtsconfig.json
Чтобы изменить конфигурацию Tslint, создайте файл конфигурации в корневом каталоге проекта.tslint.json, запись конфигурации вручную может переопределить конфигурацию Tslint по умолчанию.

Связанный с проектом по умолчанию (bruce iВыберите при первоначальном проектеdefault)

Доступны встроенныеhandlebarsшаблон
Входной файл должен бытьsrc/index.jsилиsrc/pages/pageName/index.js
Исходный тип приложения - SPA (инициализация в форме MPA не предусмотрена).Если вы хотите преобразовать в MPA, необходимо перераспределить путь к файлу в соответствии с формой входного файла, заданной базовым проектом.
Может использоваться для разработки собственных проектов JS, проектов Jquery, проектов Zepto и т. д.
общественные функции должны быть размещеныsrc/templates/helpersкаталог, используемый в шаблоне{{> fileName}}Цитировать
Общие шаблоны должны быть размещеныsrc/templates/partialsкаталог, используемый в шаблоне{{fileName param}}Цитировать
Использование и примеры общедоступных функций и общедоступных шаблонов см.handlebars-loader

⚖️Сравнение

Общие проекты сборки на Github предоставляют много кода сборки. Код сборки и бизнес-код полностью связаны друг с другом, что приводит к увеличению затрат на обслуживание и обновление. Повторное открытие проекта по-прежнему будет сталкиваться с этими проблемами.

Этот проект совершенно особенный, он действительно реализует полное разделение строительного кода и бизнес-кода, иNPM模块Форма блокирует строительный код и взаимодействует с бизнес-кодом только через файл конфигурации, поэтому разработчики могут развязать руки и написать только бизнес-код.

Ниже приводится сравнение традиционной схемы строительства и этой схемы строительства:

традиционная конструкция
Этот план сборки

традиционная конструкция

на основеGulp/WebpackпостроенReact/Vue项目, код проекта разбит накод сборкиа такжеБизнес-код, каталог проекта и конфигурация файла являются более традиционными решениями для создания проектов с участием нескольких человек. После удаления бизнес-кода из всего проекта остается много файлов для сборки кода, конфигурация разбросана, сложно управлять централизованно, ее нельзя использовать из коробки, универсальность относительно низкая. , для управления ему необходимо полагаться на модули зависимостей, которые существуют в этом проекте. Для добавления, удаления и изменения функции сборки и начала работы с новыми коллегами может потребоваться больше времени, чтобы найти код и ознакомиться с логикой сборки.

传统构建方案目录

Этот план сборки

на основе этого проектаReact/Vue项目, только кодБизнес-код, код сборки объединен вNPM模块И установите его в глобальной среде, вызовите это решение с помощью команд, чтобы управлять проектами, которые необходимо разработать, и осуществите полное разделение кода сборки и бизнес-кода. При разработке не нужно обращать внимание на то, как написать код сборки и какие инструменты использовать для расширения функции сборки, нужно сосредоточиться только на написании бизнес-кода, во всем проекте только бизнес-код. , Вы можете изменить конфигурацию сборки по умолчанию через файл конфигурации, что значительно сокращает подготовительную работу на ранней стадии проекта.простота,независимость,Эффективность,ремонтопригодность. Он экономит время на ранней стадии создания проекта и может использоваться сразу после установки, что позволяет разработчикам сосредоточиться на написании бизнес-кода.

本构建方案目录

Сравнение схем

~	традиционная конструкция	Этот план сборки
файл сборки	`build文件夹`,`config文件夹` `.browserslistrc` `.postcssrc`,`babelrc` `.stylelintignore`,`.stylelintrc` `.eslintignore`,`.eslintrc`	без
деловые документы	`src文件夹`	`src文件夹`
конфигурационный файл	Много, нужно писать отдельно	`brucerc.js`
базовый файл	`package.json`,`readme.md`	`package.json`,`readme.md`
Зависимые модули	Стек Webpack/Gulp (`构建`) Стек технологий React/Vue (`业务`)	Стек технологий React/Vue (`业务`)
время установки	помедленнее Установите зависимости сборки и бизнес-кода Его необходимо установить один раз для каждой разработки	Быстрее Устанавливайте только зависимые модули бизнес-кода Установите его глобально
подготовка к разработке	Напишите код сборки для Webpack/Gulp и нескольких инструментов.	из коробки
глобальное использование	Не можем	Могу
Повторное использование сборки	Создавайте новые папки, копируйте и вставляйте код сборки, изменяйте файлы конфигурации и т. д.	Выполнить начальный проект командной строки и построить проект
сборка для новичков	Необходимо понимать логику кода сборки и файлы конфигурации	выполнить командную строку
Позднее расширение	Добавляйте, удаляйте и изменяйте функцию сборки в исходном коде сборки.	через конфигурационный файл`brucerc.js`Добавить, удалить и изменить функцию сборки
Управление конфигурацией	Разбросаны по разным профилям сборки Файлы конфигурации различных инструментов должны быть изменены	Базовая конфигурация для интегрированной сборки через конфигурационный файл`brucerc.js`покрывать

🔨 Пример

Ниже приведен полный процесс разработки проекта:

Посмотреть справку:bruce -h
Посмотреть версию:bruce -v
Переключить язык:bruce l
Войдите в папку:cd projectList
Первоначальный проект:bruce i
Перейдите в корневой каталог проекта:cd myProject
Соберите проект:bruce b
Создайте компонент (вам нужно запустить еще один, когда вы находитесь в разработкеcmdоконное исполнение):bruce n
Опубликуйте проект (вам нужно запустить еще один, когда он находится в разработке)cmdоконное исполнение):bruce b
Удалите зависимости (сбои сборки или другие непредвиденные ситуации):bruce r

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

Персональным официальным сайтом автора является использованиеbruce-cliбыть построенным, какbruce-cli, для заинтересованных студентов, пожалуйста, нажмитеПерсональный сайт JowayYoungпроверьте детали.

📝Сделать

Исправлена ошибка проверки CSS вне файла vue в рамках проекта Vue.
Увеличьте использование Tslint для проверки файла vue в проекте Vue.

由于Tslint的性能问题，后续所有Tslint功能改由Eslint代替(这是一个大工程，估计得花2周时间重构现有的Lint配置)

📆Журнал

0.4.0

ограничениеbruce-cliДолжен бытьNode v12Используйте выше
Исправлятьcore-jsОпределение версии, если вам нужно импортироватьcore-jsВ качестве Polyfill вы должны использоватьcore-js v3
Увеличиватьtinyimg-webpack-plugin, для сжатия изображений
Настройка отображаемого текста интерактивной панели терминала

0.3.0

Шаблон проекта React для использования вместо негоReack Hooksформа
УдалитьpublicPathProdа такжеpublicPathTestДва параметра, путь ссылки на файл пакета единообразно использует абсолютный путь

🔖Авторское право

Данный проект разрабатывался автором в одиночку.После более чем 2-х летнего осаждения в процессе было проведено большое количество тестов проекта и приложений.На данный момент существует более 40 онлайн-проектов,что достаточно для поддержки реализуемости и стабильности этого проекта.

В связи с нашим ограниченным опытом разработки проектов и техническими накоплениями, мы не можем гарантировать отсутствие ошибок в данном проекте.Если вы обнаружите ошибки или возникнут вопросы при последующем использовании этого проекта, вы можетеIssuesВыдвигайте свои ценные предложения, и автор немедленно ответит и исправит соответствующие ошибки.

⏳ Постскриптум

Этот проект происходит из моего кода сборки в проекте Angular в марте 2017 года, с самого начала.Webpack2Повторяется до сегодняшнего дняWebpack4, сказатьWebpack5Выйдет через некоторое время.

Изначально моя идея заключалась в том, чтобы написать шаблон кода сборки и сохранить его на Github, а затем вытащить код сборки через скрипт. Тем не менее, строительный код и бизнес-код по-прежнему хранятся в папке одновременно, что не просто в управлении, а файлов много и они сложные. В следующий раз, когда вы начнете новый проект, вам нужно скопировать код сборки, а иногда и обновить функцию сборки.Чтобы сохранить единство функции сборки, вам нужно изменить код сборки в нескольких проектах одновременно. В таком случае, почему бы не извлечь эти общие коды сборки и не превратить их в модуль NPM, чтобы его можно было установить и запустить глобально одновременно, как здорово!

В мае 2017 года я начал обновлять этот проект и превратил его в модуль NPM, но он был применен к проекту, за который я отвечаю. Потому что это не было применено к другим проектам, поэтому я не осмеливаюсь открыть исходный код. После почти 1 года применения в более чем 20 проектах, больших и малых, функция этого проекта наконец-то стабилизировалась, поэтому я также решилbruce-cliОткрытый исходный код. на все проходыbruce-cliСозданный проект может использовать все функции сборки из коробки, такие как отсутствие особых требований или даже нулевая конфигурация для запуска проекта.

Развитие этого проекта прошло через многое, и было много ям, вырытых и заполненных, что очень тяжело и утомительно. Какое-то время я часто задерживался допоздна, чтобы сделать его лучше. Тем не менее, я также многого добился: я получил много новых знаний и навыков, и я использовал все общие знания Node, которые также заложили прочную основу для моей последующей разработки приложений Node. Если вы заплатите, вы получите Я все еще верю в это предложение, потому что я действительно сильно улучшился. По состоянию на 2020 год он успешно используется в более чем 40 проектах, за которые я отвечаю, а также некоторые коллеги и друзья и некоторые небольшие компании также используют этот проект.

Этот проект основан наNode12+разработан для совместимостиNode10+, поэтому используяbabelИсходный код скомпилирован для создания текущей онлайн-версии кода.После того, как будут завершены и применены дополнительные тесты проекта, исходный код будет открыт для всех, чтобы учиться и совершенствоваться вместе.

Если ты чувствуешьbruce-cliчтобы помочь вам, доступны по адресуIssueначальство提出你的宝贵建议, автор внимательно прочитает и объединит ваши предложения. подобноbruce-cliпожалуйста, дайте одинStar,илиForkэтот проект для себяGithubи настроить функции в соответствии с вашими потребностями.

Обратите внимание на публичный аккаунтIQ前端, внешний общедоступный аккаунт, ориентированный на навыки разработки CSS / JS, вас ждут другие галантереи переднего плана