前端代码自动化

优质

小牛编辑

145浏览

2023-12-01

概述

毫末科技的前端代码自动化的技术栈为：

制作前端组件：imgcook
前端组件文档：storybook
前端组件仓库：bit（bit.dev）
前端组件快速引入项目：xmind2code(毫末自研) + ice

组件编写规范见：

毫末xmind2code封装uniapp组件规范

其他相关技术

开源xLayers 
商业Supernova 

教程

imgcook

请见官方文档

毫末内部使用，请遵循以下说明：

(已完成)开发uniapp组件，采用dsl(dslId=183)：毫末uniapp小程序组件开发规范
(已完成)开发uniapp页面，采用dsl(dslId=241)：毫末uniapp小程序页面开发规范
(待完成)开发Web Vue组件，采用dsl(dslId=243)：毫末Vue组件开发规范
(待完成)开发Web Vue页面，采用dsl(dslId=242)：毫末Vue页面开发规范
(待完成)开发React组件，采用dsl(dslId=244)：毫末React页面开发规范
(待完成)开发React页面，采用dsl(dslId=245)：毫末React页面开发规范
(待完成)开发React Native组件，采用dsl(dslId=247)：毫末React Native页面开发规范
(待完成)开发React Native页面，采用dsl(dslId=246)：毫末React Native页面开发规范
(待完成)开发Flutter组件，采用dsl(dslId=249)：毫末Flutter页面开发规范
(待完成)开发Flutter页面，采用dsl(dslId=248)：毫末Flutter页面开发规范
(待完成)开发Android原生组件，采用dsl(dslId=)：
(待完成)开发Android原生页面，采用dsl(dslId=)：
(待完成)开发iOS原生组件，采用dsl(dslId=)：
(待完成)开发iOS原生页面，采用dsl(dslId=)：

storybook

请见：StoryBook官方文档

公司的以下模板工程中已经配置好StoryBook。发布的StoryBook见：http://storybook.haomo-tech.com

(已完成)uniapp模板
(待完成)Jeecg模板
(待完成)Pigx模板
(待完成)React模板
(待完成)React Native模板

bit

请见：bit官方文档

毫末的bit仓库路径为：ssh://bit@bit.haomo-tech.com:22322:/opt/bit

使用示例：

mkdir test-project
cd test-project
bit init
bit remote add ssh://bit@bit.haomo-tech.com:22322:/opt/bit/scope

# Track组件
bit add src/utils/my-util.js --id utils/my-utils

# 给组件命名版本
bit tag utils/my-utils 1.0.0

# 发布组件
bit export uniapp

# 使用组件
bit import uniapp utils/my-utils --path <project/component/path>

# 删除本地组件
bit remove uniapp/utils/my-utils

# 查看远程collection中的组件
bit list uniapp

xmind2code

请见：毫末Xmind2Code

ice

请见：ice官方文档

毫末的物料仓库如下：

参考

imgcook cli文档