ice-lab / icepkg Goto Github PK

模板代码 https://github.com/ice-lab/material-templates/tree/master/packages/template-react-ts/template/component

背景

目前 rax 物料支持 web 预览，无法在线预览支付宝小程序的能力。借助 Herbox 的能力，可以实现在线预览小程序的能力。

方案设计

预览交互变更

当前为 H5

• 查看 - 预览 H5 地址
• 切换能力 - 可切换为 Herbox 演示
• 二维码 - 预览地址生成二维码

当前为 Herbox

• 查看 - Herbox 链接
• 切换能力 - 可切换为 H5 演示
• 二维码 - Herbox 生成二维码

API 变更

新增 raxHerboxTemplate.hbs

新增 raxHerboxTemplate.hbs 模板文件，通过 generateRaxEntry 函数生成 rax-herbox-demo.js 存放在 node_modules 下。

新增 registerTask

新增 registerTask 为 component-build-demo-${demo}，将 md 中的 jsx 代码编译为小程序 DSL（复用 getMiniappConfig 函数能力），并将构建产物打包至 build 的 mini-program-demos 下。

新增 Herbox 类

实现 Herbox 类，封装接入 Herbox 的方法。

declare class Herbox {
  	/*
    * 传入 meta 信息初始化实例
    */
    constructor(accountName: string, appId: string, masterKey: string);
  	
    /*
    * 发布 herbox 应用
    * ID 的命名规范为 "包名-${demo}"
    */
    pub(prod: boolean, id: string): boolean;
  
    /*
    * 设置配置数据
    */
  setConfig(): void;
  
    /*
    * 下线应用
    */
  offline(): void;
}

新增 .herboxrc.js

项目工程目录下可新增 .herboxrc.js 文件，该文件导出 herbox 配置信息，业务方自行申请 Basement 服务。若不存在该文件，默认关闭 herbox 能力。

module.exports = {
  basement: { // basement 属性必须
    accountName: '',
    appId: '',
    masterKey: '',
  },
};

• 修改模板 .gitignore，增减 .herboxrc.js

https://github.com/ice-lab/iceworks-cli/blob/b31a9240ff9d135c065851807655b5006aa9216c/packages/template-component-demo/src/Playground/CodeBox.jsx#L27

设置 inline-block就要求在编写demo的时候去设置宽度把盒子撑开，是不是保持block更合理一些。或者可以回复一下这里设置inline-block的考虑是什么

组件 demo 和 dist 构建支持 webpack-bundle-analyzer 的分析

方案

组件开发场景下支持大包模式，在 build.json 中开启

{
  "basicRepo": true,
  "plugin": ["build-plugin-component"]
}

源码目录结构：

├── src/                           # 组件源码
│   ├── button/                    # button 组件
│   │   ├── index.scss
│   │   └── index.js
│   ├── card/                      # card 组件
│   │   ├── index.scss
│   │   └── index.js 
│   └── index.js                   # 组件主入口，导出 button 和 card 组件
├── build.json
├── package.json
└── package.json

构建结果目录结构：

├── lib/                           # 组件 lib 目录
│   ├── button/                    # button 组件
│   │   ├── index.scss
│   │   ├── style.js               # button 相关样式，包含基础组件引入样式和 index.scss
│   │   └── index.js
│   ├── card/                      # card 组件
│   │   ├── index.scss
│   │   ├── style.js               # card 相关样式，包含基础组件引入样式和 index.scss
│   │   └── index.js 
│   ├── style.js                   # 组件全量 style，引入了 button/style.js 和 card/style.js
│   └── index.js                   # 组件主入口，导出 button 和 card 组件

大包在项目中使用是可以配合 build-plugin-modular-import 对组件内容进行按需加载

build-plugin-component构建时加载字体，用相对路径引用时打包报错

上面是相对地址方式加载不到，换成绝对地址能加载到，绝对地址是临时用的

Do you want to request a feature or report a bug?

feature

What is the current behavior?

build-plugin-component rax 如何配置 babel-plugin-import 按需加载，并且正确加载样式

"build-plugin-component": "^1.0.1",

Do you want to request a feature or report a bug?

What is the current behavior?

import { createElement } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

import './index.less';

const MyComponent = () => {
  return (
    <View className="test">
      <Text className="test-a">放松放松</Text>
    </View>
  );
};


export default MyComponent;

.test {
  background-color: red;

  .test-a {
    color: yellow;
  }
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?
支持 less 嵌套写法

React 组件目前的 dist/ 没有实际使用，里面存在很多不规范的地方，比如文件命名、依赖等问题，需要整体治理下

目前如果需要输出 umd 文件，需要配置 library，期望可以默认输出

library  默认使用 package.json 中的 name

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?

Do you want to request a feature or report a bug?
bug
What is the current behavior?

Portal 预览窗口未设置flex宽度被挤压

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?

API 说明一般会放在在 README 中，而展示上希望优先显示组件 DEMO 和示例代码

rax 物料项目中的模板执行 "screenshot": "screenshot -l -u /build/web/index.html -s root -t 1000" 截图失败

http-server 跑起来后 chunk资源加载不回来，页面无法正常渲染，导致截图失败。必须要在build/web目录起服务，chunk资源才能正常加载。

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?
当 demo 编辑完，protal 页立即更新

rax 组件开发时，demo 文件的增删不会触发重新编译，期望能够实时监听 demo 目录下的变动

我想知道，飞冰官网这边的展示，是不是用gitbook实现物料那边的展示的
🎮 --。--

iceworks init --options={name: 'xxx', title: 'yyy', category: 'aaa'}

来自企业智能和 bizcharts 团队的需求

Do you want to request a feature or report a bug?

bug

What is the current behavior?

[email protected]

rax 构建 demo 解析模板字符串有问题，如图

What is the expected behavior?

正常构建

业务组件开发时， tsconfig 中设置 paths，实际构建结果不生效。

方案

• 配合 babel-plugin-module-resolver 实现组件构建的 alias：https://www.npmjs.com/package/babel-plugin-module-resolver
• 文档：https://www.broculos.net/2017/10/using-absolute-paths-with-typescript.html

Do you want to request a feature or report a bug?

bug

What is the current behavior?

升级 build-plugin-component 后无法使用 fusion 基础变量

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：0.1.30
• Node verson：13.12.0
• Platform：mac

What is the expected behavior?

需要能够使用 fusion 变量

demo 目录下的 basic.md 为空的时候，可以不展示红框中的内容

背景

为了解决组件的样式加载问题，同时为了隔离脚本和样式，目前业务组件自身样式以及依赖基础组件的样式我们会单独构建一个 style.js 的文件：

require('@alifd/next/lib/form/style');
require('@alifd/next/lib/button/style');
require('@icedesign/balloon-confirm/lib/style');
require('./index.scss');

并且默认将基础组件按需进行加载。
上述逻辑对于在项目层面对基础依赖进行 externals 处理时会变得比较困难。因此希望能通过简化构建逻辑，由项目工程决定业务组件中样式的加载以及按需逻辑。

方案

业务组件构建不再按需进行分析和 style.js 文件的生成，在项目中进行依赖时，webpack 插件自动加载的 style.js 文件变更为 index.[css|sass|less] 文件。

问题

目前 ice 项目工程 babel 编译默认忽略 node_modules，业务组件如果想开启按需加载 babel-plugin-import 等 babel 编译能力，需要对 node_modules 下目录进行编译，一定程度上影响编译速度

背景

Rax 原先都是内联样式，因此大家写组件时 className 命名都很随意，而现在 Rax 项目默认都是关闭内联的，这样项目里引入多个组件后很容易导致样式冲突。

Actions

• 组件开发支持 CSS Modules，构建出的 lib/es 还是 .module.css，交给项目统一处理，构建出的 dist 是编译后的 css
• Rax 小程序编译时目前不支持 CSS Modules（能否先优雅降级？）
• Rax 业务组件模板默认走 CSS Modules

相关 PR：raxjs/rax-app#432

背景

组件包中同时包含了多个插件模块，且每个模块中会使用antd或antd-mobile等ui库

src
-- plugins
---- A.js
---- B.js
-- index.js

可直接使用当前依赖包按需引入

import A from 'x/lib/plugins/A';
import B from 'x/lib/plugins/B';
import X from 'x';

X.add(A);
X.add(B);

问题

目前的情况，输出lib和es结果时，babel-plugin-import配置style为false，在后续解析依赖统一生成到style.js
因此，上述场景下，由于X并没有直接引入A、B，A、B模块antd相关的样式会丢失

方案

希望可以提供style配置项自由控制，style: true且不生成style.js

简述

执行icesworks add block命令时，让填写block name，不管输入什么区块名字都报名字已存在

问题描述

按照 飞冰 文档-快速开发物料的步骤进行开发

1. $ npm install iceworks -g

2. $ iceworks -V
=> 3.2.0

3. $ iceworks init
填写信息

4. 在根目录下执行：
$ iceworks add block
block name EastEggLogin(试了无数名字)
=> this block name(@eastCentury/east-egg-login) has already exist. please retry

错误信息

this block name(@eastCentury/east-egg-login) has already exist. please retry

来自：@1YOYO

Do you want to request a feature or report a bug?
md解析完。控制台支持输出index.js的产物

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?

Do you want to request a feature or report a bug?
feature
What is the current behavior?
目前ice提供的脚手架只支持一个包一个业务组件，但是有些场景希望将组件放在一个大包里面，例如Fusion和Antd，因此希望ice脚手架能够支持大包组件库场景(每个组件的readme和demo独立在当前组件的文件夹内)

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?

现象

使用 build-plugin-compoent + build-plugin-fusion 时，externals @alifd/next 无效。

组件代码：

import React from 'react';
import { Rating } from '@alifd/next';

export default function Comp() {
  return (
    <div>
      <Rating defaultValue={3.2} onChange={val => console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />
    </div>
  );
}

构建结果：

我看 build-plugin-compoent 是有默认的 externals : { "@alifd/next" : ... } 的。

应该是由于 build-plugin-fusion 里引入了 babel-plugin-import 的原因？

import { Rating } from '@alifd/next';

// =>

import Rating from '@alifd/next/lib/rating';

所以 externals 没匹配上？

期望

期望组件可以把整个 @alifd/next external 出去，使用挂载在 window 上的 Next。当然，理论上我可以这样：

import Rating from '@alifd/next/lib/rating';

{
  "externals": {
    "@alifd/next/lib/rating": "root Next.rating"
  }
}

但是组件多了就比较麻烦。

所以想问一下，在需要使用 build-plugin-fusion 并且按需加载的情况下有没有什么解决方案。

build-plugin-component 内置的 @alifd/next 貌似也必要了。

结合社区 Snowpack、Vite、es-dev-server 等 esm in browser 方案，构建出符合标准的 esm 文件

一些组件 demo 依赖 第三方样式或者脚本需要支持对应链接的引入
目前方案通过在 build-plugin-load-assets 的方案 对组件umd 开发构建结果会产生影响，需要一个更加简单的方式添加资源

Do you want to request a feature or report a bug?

bug

What is the current behavior?

rax 组件开发在 markdown 中添加 css 内容后，样式注入在入口（portal 页面）

What is the expected behavior?

样式注入到具体的 demo 页面中

目前使用iceworks生成物料库及component的模板代码生成，基于build-scripts做工程构建。多数场景物料库是一个多组件的场景（多npm包），其中不乏多包依赖的问题。目前的这个工程套件没有支持lerna，在做包管理比较低效，希望增加lerna多包管理能力。

需求来自 @hipoyang

使用命令iceworks add 添加区块的时候，期望下载区块代码的时候，同时安装相应依赖。一般区块开发的时候是会在package.json中定义依赖的，期望能自动安装这些依赖。不然自己还要手动去安装，手动安装步骤会比较繁琐。

需求来自 @enboga

习惯上，直观感受是执行创建项目会以输入项目名称，生成目录。建议这种出错能够错误提示，不要抛异常。因为新用户并不清楚这个工具的约定

来自 @hipoyang

已有rax2react babel插件，需要构建器承载该babel插件，最终实现以rax 为dsl构建出react产物并支持dev

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

• Iceworks CLI version：
• Node verson：
• Platform：

What is the expected behavior?

• 物料源模板 (scaffolds) 信息删除 name 字段，增加项目类型(ts or js) 字段

不改变源码的结构，只改变 demo 结构

小包模式（已支持）

目录结构：

demo/
    a.md
    b.md
    ...
README.md

文档预览：

大包模式（未支持）

目录结构：

demo/
    ComponentA/
        README.md  (可选)
        a.md
        b.md
    ComponentB/
        README.md
        a.md
        b.md
README.md

文档预览：

React / Rax 组件构建核心差异

React 组件开发定制逻辑：

• 分析基础依赖，按需打包，对应配置项 basicComponents
• 组件构建默认生成 style.js
• 使用 @babel/preset-typescript 编译 ts 文件（tsconfig.json 无效）
• 定制 demo 样式和解析逻辑

Rax 组件开发定制逻辑：

• 支持 miniapp / wechat-miniprogram 小程序内容生成
• weex 相关 bundle 输出
• forceInline 内联样式处理
• ssr 构建逻辑
• 通过 gulp 调用 ts 进行编译
• 插件支持 demo

插件合并待处理问题

• react 组件构建配置依赖 build-scripts-config，rax 依赖 rax-babel-config / rax-compile-config，不同 targets 下会有不同基础 webpack 配置
• react demo 会有大量默认样式及定制 md 书写规范；rax 默认启动 demo 目录下内容（md/js），通过插件支持额外 demo 样式
• 组件相关配置统一，比如默认 rax 特有 targets，react 特有 basicComponents；区分构建类型
• ts 编译逻辑统一
• externals 规则各自维护

目前 Rax 组件工程的 loader rule name 没有和项目工程统一，业务自身的 build scripts 插件无法同时给项目和组件使用

去除非标准的格式，如 ````jsx

支持一键跳转 codepen 或 codesandbox

• abc.json 不覆盖
• package.json 的字段特殊处理

Do you want to request a feature or report a bug?

feature

What is the current behavior?

无.

What is the expected behavior?

• 大包组件：小组件列表+小组件内部 TOC
• 编辑器：支持 demo 在线编辑预览

比如：https://opendocs.alipay.com/mini/component/text

看到相关的 issue：

• #14
• #22

这里统一提一下

build-script打包时dist目录未拷贝静态文件，期望拷贝静态文件到dist目录