接入 hel 碰到的问题（1）

首先是组件开发的场景

1. 新增了组件，这个时候需要添加导出的组件类型。也就是改动了子项目的src/entrance文件夹中的代码。那么可以在当前文章搜索 toExport 和 libTypes关键字，有需要做的前置步骤。
2. 组件已经新增好了，然后需要联调。也就是说你改动的是src/components这里面的代码。那么 npm run start 启动子项目就好了。在当前文章搜索 custom: 和 "port": "3103" 关键字可以看到对应配置。

组件单个导出，支持类似 import { Button } from 'hel-antd'; 直接解构的语法

export const { Text, Hello, Link } = lib;

⚠️这样导入不行。虽然说功能能用，但是缺少动态更新能力（也就是说如果你子项目更改了，主项目只能重新 npm start 才能看到更新）

import Text from'@beilo/wx-components/lib/components/text'
import Hello from'@beilo/wx-components/lib/components/hello'

总结下：

1. 在 src/components/index.ts 这里的 toExport 对象中导出你的组件,

import Text, { Link } from "./text";
import Hello from "./hello";

const toExport = {
  Text,
  Hello,
  Link,
};

export default toExport;

2. 接着在src/entrance/libTypes.ts中声明要导出的对象

import type { LibProperties } from "./libProperties";
import { exposeLib } from "hel-lib-proxy";
import { LIB_NAME } from "configs/subApp";

export const lib = exposeLib<LibProperties>(LIB_NAME);

// 重点！！！！ 单个导出，支持类似 import { Button } from 'hel-antd'; 直接解构的语法
export const { Text, Hello, Link } = lib;

export type Lib = LibProperties;

export default lib;

3. 修改项目底下的package.json。让set_home_page中的端口和start的端口一致。这样主工程就不用一直切换端口了。
4. 继续修改package.json。说下我修改了哪些点。做了这一步，上面那个就可以不用管了
   1. 新增 config.port 和$npm_package_config_port变量，这样就可以统一端口了。免得忘记了哪里改过哪里没改。
   2. build_cust在最前面新增了npm run build，因为如果你改动到了src/entrance中的内容，又不执行 build，那么其实相当于没有改动。
   3. 最后面新增了preview，这个主要是为了模拟真实包的情况。也是作者推荐的两种联调方式之一。www.bilibili.com/video/BV1Dd…

 "config": { // 这里是新增的配置
    "port": "3103"
  },
  "scripts": { // 这 3 条我都做了改动
    "start": "cross-env PORT=$npm_package_config_port node scripts/start.js",
    "build_cust": "npm run set_home_page \"npm run build && npm run build_dist && npm run build_meta\"",
    "set_home_page": "cross-env-shell HEL_APP_HOME_PAGE=http://127.0.0.1:$npm_package_config_port",
    "preview": "npm run build_cust && http-server ./hel_dist --cors --port $npm_package_config_port",
  },

5. 主项目使用。这里有几个点要注意
   1. bindReactRuntime({ React, ReactDOM, ReactIs }) 这一段要加，不然报错ReferenceError: React is not defined
   2. 这里的3103就是上面 package.json 中 config 设置的端口号
   3. 版本号要高于"hel-micro": "4.9"。不然会有链接里的问题github.com/Tencent/hel…

import { preFetchLib, bindReactRuntime } from 'hel-micro'
import React from 'react'
import ReactDOM from 'react-dom'
import ReactIs from 'react-is'

bindReactRuntime({ React, ReactDOM, ReactIs })
;(async function () {
  try {
    await preFetchLib('@beilo/wx-components', {
      custom: {
        host: 'http://localhost:3103',
        enable: true,
      },
    })

    await import('./loadApp')
  } catch (error) {
    console.error('加载应用时发生错误:', error)
    // 在这里添加错误处理逻辑，例如显示错误消息给用户
  }
})()

碰到的问题：
要多安装的库：

1. 主工程：react-is，
2. 子工程：http-server，rollup（这个不安装 build 会失败）