Лидер хочет унифицировать интерфейсную структуру, я добавил React/Vue/Node/applets

внешний фреймворк

Самым большим преимуществом работы в небольшой компании является то, что вы должны делать все, ПК/публичный аккаунт/мини-программа, фронтенд, бэкэнд, мидлэнд, реагировать, vue и пользовательский интерфейс – все на связи. для продуктов постоянно увеличивается, и чем больше и больше проектов выполняется, тем больше людей остается теми же. Для стандартизации интерфейса инженерные требования становятся все выше и выше.

aotoo-hubКак набор интерфейсных шаблонов общего назначения, он не имеет зависимостей стека технологий и ориентирован на совместную работу нескольких человек и проектирование. Он может помочь разработчикам быстро выпускать проекты, а любители метаний могут изучить его.

aotoo-hubЭто набор полностековых каркасов с интегрированным дизайном на стороне интерфейса/узла.Фронтенд скомпилирован с помощью webpack4, а на стороне узла для предоставления услуг используется koa2. Концентратор может работать независимо как интерфейсный инструмент компиляции или может быть развернут на стороне узла для развертывания онлайн-сервисов.

При самостоятельном беге, только как инструмент для компиляции внешнего интерфейса и вывода статических ресурсов. Хаб использует веб-пакет для компиляции ресурсов внешнего интерфейса. В режиме разработки webpack-dev-server обеспечивает поддержку горячего обновления. В производственной среде создается только сжатый код .

Среда выполнения Fusion, узел (koa2, koa-router) возьмет на себя webpack-dev-сервер для предоставления серверных услуг.В это время могут быть реализованы сервисы SSR, сервисы API, которые можно использовать для развертывания и предоставления онлайн-сервисов

некоторые особенности

  • Предоставляет простые инструменты командной строки
  • Среда компиляции поддерживает несколько проектов, разделяя ресурсы компиляции и node_module.
  • Поддержка предоставления среды компиляции для таких проектов, как программы React/Vue/Jq/native js/mini.
  • Стандартная интерфейсная структура каталогов на стороне узла
  • Поддержка динамических стилей (sass/stylus)
  • Поддержка нескольких сред, тестирование переключения командной строки, производственные и другие среды.
  • Сторона узла поддержки (koa2)

Скаффолдинг структуры исходного кода

hub工作空间
  ├── build
  ├── aotoo.config.js
  ├── index.js
  ├── package.json
  ├── postcss.config.js
  └── src
       # vue 项目演示
       └─ vueSample
             ├── configs # node环境配置文件,默认包含default.js
             ├── dist      # 静态资源输出目录
             ├── js        # 前端业务js目录(前端)
                 │── venders # 第三方库文件目录+自定义公共库(前端)
                 ...
             └── server    # node端的源码目录
                   │── pages  # node端的业务目录
                   └── plugins # 自定义插件目录
                   
       # react 项目演示
       └─ reactSample
             ├── configs # node环境配置文件,默认包含default.js
             ├── dist      # 静态资源输出目录
             ├── js        # 前端业务js目录(前端)
                 │── venders # 第三方库文件目录+自定义公共库(前端)
                 ...
             └── server    # node端的源码目录
                   │── pages  # node端的业务目录
                   └── plugins # 自定义插件目录
                   
       # 小程序项目演示
       └─ xcxSample 
             ...
             ...
             
       # 文档项目演示
       └─ mdSample 
             ...
             ...

GITHUB
больше инструкций

Некоторые идеи развития узловых лесов

Архитектура внешнего интерфейса проекта сложнее, чем архитектура внутреннего. Почему? Как правило, внутренняя архитектура (большинство малых и средних проектов) стабильна в одной среде, языке и проекте и может обновляться каждые несколько лет, в то время как передняя часть должна иметь дело с многотерминальным выводом, сложным проекты, несколько фреймворков, сложные компоненты и т. д. Очень активны, часто чувствуют себя неспособными учиться и хотят сдаться.

Как важный интерфейсный инструмент, строительные леса должны иметь унифицированную и стандартизированную идею. Хорошая структура может сделать разработку, тестирование, эксплуатацию и техническое обслуживание очень интересными. Нам нужны каркасы, которые могут ограничивать и стандартизировать структуру инженерных проектов, иметь унифицированную среду компиляции, отделяться от проектов, облегчать совместную работу нескольких человек, могут разрабатываться на основе

Отвязан от проекта

Зачем нужно отделять архитектуру от проекта?Представьте, что когда в компании n проектов, архитекторы обновляют и поддерживают разные проекты и каркасы разных фреймворков, вызывая риск нестабильности проекта и в то же время увеличивая количество архитекторов, разработчиков, затраты времени и связи для тестировщиков, эксплуатационного и обслуживающего персонала, а также эксплуатационного персонала.

Независимость от стека технологий

В компании есть много типов проектов, которые являются легкими и требуют быстрой итерации и запуска.Как правило, мы используем более сложные проекты Vue, которые выполняются несколькими людьми. Как правило, мы используем React, небольшие программы также являются популярным направлением фронтенда, и есть старые проекты на основе jq, поэтому скаффолдинг должен поддерживать компиляцию различных фронтенд-фреймворков.

Это несложно, это достигается добавлением конфигурации, необходимой для различных фреймворков, в webpack.В настоящее время хаб поддерживает React, Vue, Angular, Jquery, апплет и другие технологические стеки.

Поддержка нескольких проектов

Архитектура отделена от проекта, так что один проект может быть скомпилирован и запущен независимо, а также запущен одновременно. Все проекты совместно используют среду компиляции рабочей области концентратора и node_module общей рабочей области. У проекта есть собственная директория dist, и при запуске назначается уникальный служебный порт. Как показано ниже

工作空间
  ├── build
  └── src
       └─ vueSample
             └─ dist
       └─ reactSample
       	     └─ dist
       └─ mdSample
             └─ dist
       └─ xcxSample
             └─ dist

инструмент командной строки

Командная строка должна быть лаконичной и эффективной.Она может реализовывать инициализацию среды, инициализацию проекта, режим разработки, режим производства, переключение среды, параметры передачи и поддержку узла и развертывания pm2.

aotoo dev  # 编译开发环境文件,并打开webpack-dev-server服务

aotoo dev --config test  # 编译测试环境文件,并打开webpack-dev-server服务

aotoo build # 编译生产环境文件

node index.js  # 启动项目,可用于docker

pm2 start index.js # 使用pm2部署项目

конфигурация

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

В следующем примере показан конкретный элемент конфигурации хаб-проекта.

{
  // 项目名称
  name: 'mdSample', 

  // 指定项目版本
  version: 1.0.8,  

  // 是否启动项目,默认false
  // 启动时,可简化命令行输入项目名称
  startup: true,    

  // 是否启动node server,默认false,由webpack-dev-server提供服务
  // 如在组件开发过程中,关闭node服务,提升性能和效率
  server: false, 

  // 省略前端编译,默认false,需要设置server=true
  // 只启动node端,开发模式提升效率,生产模式可直接部署
  onlynode: false, 

  // 项目源码目录
  src: path.join(ROOT, 'src/mdSample'),  

  // 指定项目端口,不指定则分配随机端口
  port: 8400,

  options: {

    // 项目灰度环境,如测试,预发布,生产等
    // 建议使用命令行 --config test,选择环境配置
    // scenes: 'default' 
  }
},

Управление версиями

环境与项目隔离

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

工作空间  # ==> 设置环境git,忽略src/*
  ├── build
  └── src 
       └─ vueSample # ==> 设置项目git

Включив инструменты командной строки для поддержки выполнения в каталоге исходного кода проекта, разработчики могут использовать vscode, чтобы начать разработку, не отвлекаясь, просто открыв каталог vueSample.

# 在hub工作空间目录下  
aotoo dev vueSample # 运行开发环境

# 在项目vueSample目录下
cd src/vueSample
aotoo dev vueSample # 在项目源码目录中也可以启动开发环境

项目版本
Версия проекта основана на версии файла конфигурации, и все статические ресурсы проекта будут скомпилированы вdist/${version}Каталог, будет несколько каталогов в нескольких версиях, что удобно для отката, резервного копирования и других операций страховки, как показано ниже

├─ dist          # 输出目录(前端)
    │─ 1.0.1     # 版本目录,依据配置中的version字段
    └─ 1.0.8
        └─ dev # 开发目录
            │── js/index.js
            │── html/index.html
             ...

несколько сред

Среда test1, среда test2, среда test3..., скаффолдинг указывает текущую конфигурацию среды выполнения проекта с помощью параметров командной строки, или вы можете настроить файл конфигурации для переключения.

Многие компании сейчас используют облачный центр конфигурации, такой как apollo, который очень неудобен для разработчиков.Есть два варианта, которые следует рассмотреть: первый – использовать командную строку для передачи различных параметров, чтобы проект вызывал облачную конфигурацию или локальную конфигурацию; инициализируется, создайте метод в файле конфигурации для автоматического получения облачной конфигурации.

aotoo dev --config test1

Каталог проекта спецификации

Разумно разработанные, стандартизированные и гибкие шаблоны очень полезны для рациональности структуры проекта, потому что все мы строим каталоги на основе шаблонов и производим ресурсы, а любые ресурсы в конечном итоге используются в шаблонах.

模板的静态资源

<html>
 <head>
  <link href="common.css" />
  <link href="[filename].css" />
 </head>
 <body>
 <div id="root"><%- root %></id>
  <script src="vendors.js" />
  <script src="common.js" />
  <script src="[filename].js" />
 </body
</html>
  • common.js — отдельный общедоступный JS-код, извлекаемый и внедряемый веб-пакетом при компиляции.
  • Библиотека сторонних фреймворков vendors.js и общая библиотека, соответствующие каталогу js/vendors
  • common.css Общий CSS, соответствующий файлу css/common.[css|scss|styl]
  • [имя файла].js Business JS, соответствующий бизнес-каталогу/имени файла, например user.js
  • [имя файла].css Бизнес CSS, соответствующий бизнес-каталогу/имени файла, например user.css
  • hub использует ejs для разбора шаблонов, node или webpack-dev-server анализирует шаблоны

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

 project
    ├── html
         └── index.html
    ├── css
         └── index.css
    └── js
         └── index.js

В хаб-проекте в большинстве случаев можно опустить каталог html и каталог css (дополнительных требований нет), а структуру каталогов можно упростить следующим образом

 project
    └── js
         └── index.js

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

仿小程序目录结构
Структура каталогов хаб-проекта также может быть установлена ​​как апплет или Vue, как показано в следующем примере.

 project
    └── js
         └── user 
              ├── index.js  # 输出业务JS => user.js
              ├── index.css # 输出业务CSS => user.css
              └── index.html # 输出业务模板 => user.html

запись о вебпаке

Я только что упомянул, что шаблоны очень важны, но я решил генерировать записи веб-пакета на основе индексов JS, Здесь есть предположение, что каждая страница шаблона должна содержать бизнес-JS.

Запись, созданная на основе JS-индекса, имеет естественную близость к webpack, и соответствующий шаблон может быть автоматически сгенерирован с помощью webpack-html-плагинов.

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

reactSample
Структура каталогов демо-проекта reactSample Hub очень проста, состав выглядит следующим образом

reactSample
     ├── configs/default.js # 环境配置,实际上也是编译时生成的
     └── js/index/index.js

Файлы ресурсов, необходимые для проекта, автоматически генерируются во время компиляции, стили внедряются JS во время выполнения, службы узлов предоставляются в производственной среде, а службы сервера разработки предоставляются в среде разработки. Сервер предоставляет такие услуги, как рендеринг шаблонов, зеркальная маршрутизация и зеркальный API. И это всего лишь командаnode index.jsНичего страшного

Многостраничные и одностраничные

Конечной целью, конечно, является реализация гибридного режима MPA-SPA, то есть многостраничного режима, для H5 требуется SPA, а для ПК — MPA+SPA. MPA очень прост.Все страницы, выводимые узлом, являются независимыми страницами, пока есть шаблоны, это естественный режим MPA.

hub工作空间
  ├── mdSample
       ├─ dir1 # => page1.html
       ├─ dir2 # => page2.html
       └─ dir3 # => page3.html

Хаб также может легко обеспечить режим MPA-SPA для реагирования и vue, который является буфером, который поставляется с каркасом хаба.

Средний слой узла

Введение стороны узла может решить проблему

  • перекрестный домен
  • Автономное развертывание
  • пользовательский API
  • фиктивный сервис
  • seo

маршрутизация

镜像路由
Маршрутизация узла, созданная записью веб-пакета, называется зеркальной маршрутизацией.Зеркальная маршрутизация может предоставлять услуги рендеринга страниц и услуги интерфейса данных API.

Схематическая структура зеркальной маршрутизации

reactSample
     └── js
	      └── user/index.js # 前端
	 └── server
	      └── pages/user/index.js # node端

# 访问镜像路由  http://www.abc.com/user
# 请求API数据路由  ajax.post('/user', {...}).then(res)  
# node端controler文件  server/pages/user/index.js  

Мы знаем, что koa2 — это типичная серверная модель MVC, представление соответствует шаблону, а модель — уровню данных (управляемому бизнесом, большинство из которых — данные ajax). Привяжите транк записи к koa-router, чтобы сформировать отношение зеркальной маршрутизации с внешним интерфейсом (однозначное соответствие), и выведите его файл контроллера для обработки GET/POST/PUT/DELETE и других транзакций.

自定义路由
Некоторые маршруты не имеют ничего общего со страницей, например загрузка, а интерфейс API относится к этому типу специального маршрута, поэтому нам также необходимо вручную создавать собственные маршруты через плагины.

плагин

Плагины используются для создания пользовательских маршрутов и создания функциональных модулей. Пользовательские маршруты описаны выше.

Типичным применением функционального модуля является запрос к базе данных. Уровень контроллера обычно должен инициировать запрос к базе данных, а подключаемый модуль привязывает функциональный модуль к контексту koa. Обратите внимание, что этот процесс является процессом предварительной обработки, а работа уровня контроллера является процессом выполнения, поэтому, пока уровень контроллера в этом нуждается, модуль обработки данных может быть получен из контекста koa для инициирования запросов к базе данных.

поддержка апплета

Для проектов апплетов нам нужно контролировать вывод webpack, не позволять ему делать лишние вещи, а окончательный код вывода обрабатывается инструментом разработки апплетов WeChat.

Выведите исходный код апплета в соответствии с одноранговой связью 1:1 и используйте веб-пакет только для решения некоторых незначительных проблем апплета, таких как уценка, динамические стили, html и т. д. (Вывод не будет генерировать избыточный код веб-пакета), поддержка горячего обновления

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

Совместимость со старыми проектами

Я тоже фронтенд-старичок.Годы фронтенд-резки цифры смутно перед вами.Больная точка фронтенда и бэкенда интегрированного режима разработки (шаблон рендеринга java) в том, что вам нужно чтобы настроить среду Java. Вам нужно знать каждый идентификатор в шаблоне. Сложная структура хорошо понятна.

Когда скаффолдинг скомпилирован, все ресурсы собираются и организуются в файле ресурсов (mapfile.json), включая JS/HTML/CSS/IMAGE и другую информацию. Дайте mapfile.json большому парню Java, дайте каталог файлов статических ресурсов (dist) старшему брату по эксплуатации и обслуживанию и попросите большого парня написать скрипт для автоматического сопоставления статических ресурсов.

Встроенный демонстрационный проект

Проект включает в себя 4 набора демонстрационных проектов DEMO (файловая система REACT/VUE/Mini Program/MD), каждый из которых является самостоятельным проектом и может осуществлять обмен ресурсами через терминал узла. Удобно и быстро начать работу с каждой средой.

Демонстрационная версия Vue

vueSample, пустой проект на основе vue2.0, включая простую демонстрацию проекта vue-router

Демонстрационный проект vue не находится на vue3.0, потому что библиотека вокруг vue3.0 не стабильна на момент разработки. Я планирую дать ей поработать некоторое время. Вы также можете представить ее самостоятельно.больше инструкций

РЕАКТ демо ДЕМО

reactSample, пустой проект, содержащий простую демонстрацию REACT16.

Демонстрация мини-программы DEMO

xcxSample, является собственной разработкой апплета WeChat и поддерживает облачную разработку.Этот проект включает в себя нашу разработанную библиотеку апплета, библиотеку queryUI и связанные компоненты.Очистка соответствующих ссылок представляет собой полный официальный образец кода апплета.больше инструкций

  • Поддержка динамического стиля
  • Поддержка различных плагинов для webpack
  • Родной апплет WeChat
  • Динамическое построение шаблонов
  • template less
  • Поддержка хуков
  • Встроенная поддержка форматированного текста MARKDOWN.
  • Встроенная поддержка форматированного текста HTML.
  • Построен из библиотеки aotoo

файловая система МД

Здесь я сосредоточусь на системе документов, которая представляет собой полную демонстрацию хаб-среды, включая компиляцию переднего плана, маршрутизацию, зеркальную маршрутизацию на стороне NODE, плагины, приложения MPA/SPA, использование командной строки и т. д.больше инструкций

  • система полного стека
  • На первой странице столбца отображается рендеринг на стороне сервера (SSR) с помощью node.js, а также мультиплексирование и рендеринг на стороне браузера (CSR и SPA).
  • Пункт столбца — страница переключения многостраничного приложения (MPA), пункт меню — маршрут переключения одностраничного приложения (SPA)
  • Пользовательские изоморфные методы, Fether/requireMarkdown и т. д., построение аксиом на стороне Fetcher, построение на стороне узла
  • Front-end роутинг апплета имитации, код можно резать по роуту при построении, js файл можно подгружать по запросу, поддерживается SSR
  • Имитация жизненного цикла апплета, чтобы код страницы и код компонента имели более четкое функциональное разделение
  • меньше шаблонов, пишите как можно меньше шаблонов и передайте логику шаблонов JS (основная функция библиотеки aotoo)
  • поддержка уценки
  • Поддерживает SEO, автоматически разрешает HTML и данные, отображаемые сервером на стороне браузера, и плавно переходит
  • Доступны мультисценарии, тестирование и производство.
  • конструкция библиотеки aotoo (библиотека инкапсуляции реакции, jquery компонента реакции) (иллюстрировать)

Структура каталогов

aotoo-hubСтруктура каталогов после установки

hub工作空间
  ├── build
  ├── aotoo.config.js
  ├── index.js
  ├── package.json
  ├── postcss.config.js
  └── src
       # vue 项目演示
       └─ vueSample
             ├── configs # node环境配置文件,默认包含default.js
             ├── dist      # 静态资源输出目录
             ├── js        # 前端业务js目录(前端)
                 │── venders # 第三方库文件目录+自定义公共库(前端)
                 ...
             └── server    # node端的源码目录
                   │── pages  # node端的业务目录
                   └── plugins # 自定义插件目录
                   
       # react 项目演示
       └─ reactSample
             ├── configs # node环境配置文件,默认包含default.js
             ├── dist      # 静态资源输出目录
             ├── js        # 前端业务js目录(前端)
                 │── venders # 第三方库文件目录+自定义公共库(前端)
                 ...
             └── server    # node端的源码目录
                   │── pages  # node端的业务目录
                   └── plugins # 自定义插件目录
                   
       # 小程序项目演示
       └─ xcxSample 
             ...
             ...
             
       # 文档项目演示
       └─ mdSample 
             ...
             ...

иллюстрировать

aotoo.config.js

Файл конфигурации проекта, включая версию проекта, тип проекта, исходный каталог проекта и другие конфигурации.

apps: [
    {
      name: 'reactSample', // 项目名称
      version: '1.0.1',   // 项目版本,每个项目有自己的版本
      startup: true,      // 是否默认启动
      server: false,      // 是否提供node端服务,默认为`dev-server`提供服务
      type: 'web',        // 项目类型, 'mp'为小程序
      src: path.join(ROOT, 'src/reactSample'), // 源码目录
      micro: false,       // 是否微服务模式(开发中,未完善)
      options: {          // 项目扩展参数
        scenes: 'default',// 默认项目环境,将生成环境配置文件 
        cloud: false,     // 小程序项目是否启动云端
      },
      port: 8500          // 项目端口
    },
    
    {
      name: 'vueSample',
      ...
    },
    
    {
      name: 'xcxSample',
      ...
    }
  ],
}

каталог конфигов

В этом каталоге хранится конфигурация среды, и компилятор сгенерирует соответствующую конфигурацию в соответствии с параметрами среды, заданными в командной строке, такими как тестовая среда (test=>test.js).

aotoo dev --config test

дист-каталог

В этом каталоге хранятся скомпилированные файлы внешнего интерфейса, включая каталог версии, каталог разработки и производственный каталог.

├─ dist          # 输出目录(前端)
    │─ 1.0.1     # 版本目录,依据配置中的version字段
    └─ 1.0.8
        └─ dev # 开发目录
            │── js/index.js
            │── html/index.html
             ...
            └── mapfile.json # 静态资源镜像文件

        └─ pro # 生产目录
            │── js/index_[hash].js # 生产文件会带上hash
             ...
            └── mapfile.json # 静态资源镜像文件

каталог js

В этом каталоге хранится внешний исходный код JS, общедоступный исходный код JS и исходный код JS для бизнеса.

├─ js         
    │─ vendors # 公共JS
    └─ index # 前端业务目录
    	 │─ index.js  # 业务 => dist/.../index.js
         │─ index.scss # 样式 => dist/.../index.css
         └─ index.html # 模板 => dist/.../index.html
         
    └─ shop # 前端业务目录
    	 │─ index.js  # 业务 => dist/.../shop.js
         │─ index.scss # 样式 => dist/.../shop.css
         └─ index.html # 模板 => dist/.../shop.html

编译思路
Компилятор просматривает бизнес-файл JS и генерирует вспомогательные ресурсы (html/css/node).

dll打包(vendors目录)
Здесь упаковка dll относится к упаковкеvendors.jsа такжеcommon.js, следует отметить, что поставщики представляют собой набор независимых процессов упаковки веб-пакетов, которые не входят в тот же процесс, что и бизнес-упаковка JS, и будут генерироватьdist/.../vendors.jsдокумент,common.jsРазделить код из бизнес-JS (разделение веб-пакета). вvendors.jsФайл не поддерживает горячее обновление

业务打包
Бизнес-упаковка использует файлы JS в качестве записи веб-пакета и одновременно генерирует связанные с ним статические ресурсы через модуль загрузчика, например каталог магазина в приведенном выше примере.

каталог js/vendors

В этом каталоге хранится общий код или библиотеки фреймворков, например, вvendors/index.jsВведите react или vue, следует отметить, что содержимое этого каталога будет применено кnode端(Если служба сервера включена), поэтому обязательно обратите внимание на совместимость обоих концов

каталог сервера

Когда вы установите для параметра сервера значение true в конфигурации, компилятор автоматически сгенерирует каталог сервера и назначит внутреннюю службу дляwebpack-dev-serverОбратиться к сервису, предоставляемому узлом

镜像路由server/pages
Когда вы установите для параметра сервера значение true в конфигурации, компилятор пройдет через запись (бизнес-JS) и отразит файл контроллера на своей стороне узла, как показано в приведенном выше примере магазина.

server
  └─ pages
      └─ shop
          └─ index.js

Файл контроллера по умолчанию предоставляет сервисы рендеринга, сервисы интерфейса GET, POST.

node端插件server/plugins
Этот каталог необходимо создать вручную.Плагин поддерживает пользовательскую маршрутизацию и пользовательские функциональные модули.

инструмент командной строки

aotoo-cliЭто библиотека инструментов разработки командной строки aotoo-hub.Установка и компиляция должны выполняться через этот инструмент.больше инструкций

системная среда

  • mac osx
  • linux
  • не поддерживаетсяwindows, но подсистема linux win10 может
  • node >= 12

INSTALL

npm install -g aotoo-cli
aotoo -V # 检查是否安装成功

USAGE

Установите новое пространство концентратора

init <dir>

# 新建xxx项目
$ aotoo init xxx

Создать новый веб-проект

create <dir>

Автоматически создавать веб-проекты, такие как pc/h5/официальная учетная запись, и запускать проект.

# 新建项目
$ cd xxx
$ aotoo create projectName

Каталог проекта будет создан в каталоге xxx/src.projectName, следуйте инструкциям, чтобы ввестиY, нажмите Enter, чтобы продолжить
После завершения установки изменитеaotoo.config.js, дополняющее описание товара

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

create <dir>

Подходит для создания проектов апплетов

# 新建项目
$ cd xxx
$ aotoo create minip_name

Каталог проекта будет создан в каталоге xxx/src.minip_name, подскажите пожалуйста введитеnПосле завершения установки откройтеaotoo.config.js, дополнить описание проекта, перезапустить проект

Начните свой собственный проект

После завершения установки в каталоге src хаба находятся 4 демонстрационных проекта, которые можно запустить отдельно следующими командами

Начать проект документации

# 文档项目属于默认项目,可以直接启动
$ aotoo dev

Начать проект Vue

$ aotoo dev vueSample

Начать проект РЕАКТ

$ aotoo dev reactSample

Запустите проект апплета

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

$ aotoo dev xcxSample

Режим работы

dev [name]

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

# 启动aotoo.config中apps中的启动项目
$ aotoo dev

# 启动指定项目
$ aotoo dev project_name

dev-clean [name]

Скомпилируйте в режиме разработки, очистите файлы common/vendors и другие файлы dll, создайте заново и запустите службу.

$ aotoo dev-clean

# 启动指定项目,并清除该项目common的缓存
$ aotoo dev-clean project_name

dev-build [name]

Скомпилировать в режиме разработки, очистить файлы common/vendors и другие dll, перегенерировать, не запускать службы

$ aotoo dev-build

# 编译指定项目
$ aotoo dev-build project_name

производственный режим

build [name]

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

$ aotoo build

# 编译指定项目
$ aotoo build project_name

build-clean [name]

Рабочий режим, очистить файлы common/vendors и другие dll и перегенерировать, не запускать службы

$ aotoo build-clean

# 编译指定项目
$ aotoo build-clean project_name

развертывать

Перед развертыванием его необходимо скомпилировать в рабочем режиме.

aotoo build-clean project_name

start [name]

В рабочем режиме запустите службу узла

$ aotoo start

# 编译指定项目
$ aotoo start project_name

начало узла

# 编译项目,生产模式
$ node index.js

# 启动测试环境
$ node index.js --config test

# 进入源码server目录启动  
$ cd src/project_name/server
$ node index.js

pm2 начало

# 编译项目,生产模式
$ aotoo build-clean project_name

# 启动测试环境
$ pm2 start index.js -- --config test

EXTEND PARAM Расширенный параметр

--config <name>

Укажите файл конфигурации среды для использования на стороне узла.

# 开发模式,启动测试环境
aotoo dev --config test

# 生产模式,启动测试环境  
aotoo build --config test

--name <name>

Запустить указанный проект, этот параметр может запускать несколько проектов одновременно

# 同时启动 xxx 及 yyy的项目
$ aotoo dev --name vueDemo --name reactDemo

GITHUB
больше инструкций