yarn lowcode:dev 不支持热重载

[noscripter]

Describe the bug (required) / 详细描述 bug（必填）

yarn lowcode:dev不支持热重载。

---

To Reproduce (required) / 如何复现 bug？（必填，非常重要）

Steps to reproduce the behavior: / 详细复现步骤：

---

项目初始化

npm init @alilc/element bug-reproduce
cd bug-reproduce

包模式选择：react-组件库，其他使用默认值。

cd bug-reproduce
npm install
mkdir src/components/my-page
touch src/components/my-page/index.tsx
touch src/components/my-page/index.less

src/components/my-page/index.tsx文件的内容如下：

import './index.less';

import React, {
  createElement
} from 'react';

export interface MyPageProps {
  placeholder?: string;
};

function MyPage({
  ...MyPageProps
}) {
  const {
    placeholder
  } = MyPageProps;
  return (
    <div className="my-page">{placeholder}</div>
  );
}

export default  MyPage

运行yarn lowcode:dev命令。打开http://localhost:3333看不到my-page组件。

这个时候因为没有在src/index.tsx里导出MyPage组件，所以看不到也正常。那编辑src/index.ts文件，导出这个组件的相关内容：

src/index.tsx

export type { ColorfulButtonProps } from './components/colorful-button';
export { default as ColorfulButton } from './components/colorful-button';

export type { ColorfulInputProps } from './components/colorful-input';
export { default as ColorfulInput } from './components/colorful-input';

export type { MyPageProps } from './components/my-page';
export { default as MyPage } from './components/my-page';

const bizCssPrefix = 'bizpack';

export {
  bizCssPrefix
}

仍然看不到新增的MyPage组件。

👇下面是重点

先删除现在的lowcode内容：

rm -rvf lowcode

然后重新运行yarn lowcode:dev命令。

这个时候能看到MyPage组件了。

上面这是一种不支持热加载的情况。还有一种情况，比如我开始src/components/my-page/index.ts写成下面的样子：

import './index.less';

import React, {
  createElement
} from 'react';

export interface MyPageProps {
  placeholder?: string;
};

function MyPage({
  ...MyPageProps
}) {
  const {
    placeholder
  } = MyPageProps;
  return (
    <div className="my-page">{placeholder}</div>
  );
}

export default  MyPage

这个时候也是识别不出MyPage组件的。那我们加上类型标注（注意，不要终止yarn lowcode:dev命令，让它热加载）：

import './index.less';

import React, {
  createElement
} from 'react';

export interface MyPageProps {
  placeholder?: string;
};

const MyPage: React.FC<MyPageProps> = function MyPage({
  ...MyPageProps
}) {
  const {
    placeholder
  } = MyPageProps;
  return (
    <div className="my-page">{placeholder}</div>
  );
}

export default  MyPage

这个时候强行刷新http://localhsot:3333也是看不到MyPage组件的。但是，如果删除lowcode，重新运行yarn lowcode:dev，就能够看到新增的MyPage组件了。🤣🤣🤣

版本信息：

@alib/build-scripts 0.1.32

其他：

➜  bug-reproduce git:(main) ✗ npm ls
bug-reproduce@0.1.0 /Users/leo/projects/test/lowcode-tools-bug/bug-reproduce
├── @alib/build-scripts@0.1.32
├── @alifd/build-plugin-lowcode@0.4.7
├── @alifd/next@1.26.25
├── @alifd/theme-2@0.4.4
├── @types/react-dom@16.9.19
├── @types/react@16.14.46
├── @umijs/plugin-sass@1.1.1
├── build-plugin-component@1.12.1
├── build-plugin-fusion@0.1.23
├── cross-env@7.0.3
├── dumi-theme-default@1.1.24
├── dumi@1.1.53
├── f2elint@1.2.3
├── moment@2.29.4
├── prop-types@15.8.1
├── react-dom@16.14.0
└── react@16.14.0

[eternalsky]

meta 信息只有第一次初始化时才会自动生成，后续有 lowcode 目录就不会再去生成，避免对开发者自己的配置冲突。这不是不支持热重载，而是本来入料只会进行一次。后续的添加需要开发者自己来完成~