1 | ## hel-tpl-remote-react-comps-ts
|
2 | 最简单的远程react组件模板(ts)
|
3 | codesandbox: https://codesandbox.io/s/demo-load-remote-react-comp-2bnpl0?file=/src/App.js
|
4 |
|
5 | ### 发布 npm
|
6 | 发布远程组件到npm
|
7 | ```bash
|
8 | npm run build
|
9 | npm publish
|
10 | ```
|
11 |
|
12 | ### 本地联调
|
13 | 辅助模块使用方的custom配置,基于当前模块的已构建产物进行联调
|
14 | ```bash
|
15 | npm run build_cust
|
16 | cd hel_dist
|
17 | # 如未安装 http-server,执行 npm i http-server -g 即可
|
18 | # 指导端口可执行 http-server --cors -p 8081
|
19 | http-server --cors
|
20 | ```
|
21 |
|
22 | ### chunk 设置
|
23 | 经过测试对比验证,对应带样式文件的组件项目,设置为4是最佳的,刚好拆分为 runtime-main.js main.js chunk.js chunk.css
|
24 | 且 chunk.css 可以直接注入到 index.html 里供 hel-micro 控制是否需要加载
|
25 |
|
26 | // 同时也避免报错:
|
27 | // chunk runtime-main [entry]
|
28 | // Cannot convert undefined or null to object
|
29 | ```js
|
30 | new webpack.optimize.LimitChunkCountPlugin({
|
31 | // 必须大于或等于 1,
|
32 | maxChunks: 4,
|
33 | }),
|
34 | ```
|
35 |
|
36 | ### shouldInlineRuntimeChunk
|
37 | 设置为false,不产生产物map文件
|
38 |
|
39 |
|
40 | ### 单文件css
|
41 | 控制 `splitChunks.cacheGroups.css` 为
|
42 | ```ts
|
43 | const cacheGroupsCss = {
|
44 | name: "css",
|
45 | test: /\.css$/,
|
46 | minChunks: 1,
|
47 | enforce: true,
|
48 | }
|
49 | ```
|
50 | 有利于做 hel-micro 上层适配库做 shadow 处理
|
51 | 见:https://juejin.cn/post/6992887038093557796
|
52 |
|
53 |
|
54 | ### css 插入规则
|
55 | 当 `src/index.ts` 导入函数全部写为 `import()`函数方式时,构建生成的index.html里不包含有css文件link,
|
56 | css文件link是由runtime.main.js动态拼接到header里的,这不是我们期望的结果,因为我们想让上层适配库(例如`hel-micro-react`)
|
57 | 有机会可控制css加载时机,从而方便做shaw-dom隔离
|
58 |
|
59 | 而写为头部静态导入时,就包含了css文件link了。
|
60 |
|
61 |
|
62 | ### cjs包
|
63 | 以下package.json里的script命令暂时移出,这里涉及到如何使用webpack打包组件库的知识点,欢迎同事贡献
|
64 | > 待后续hel-micro支持非浏览器环境能解析远程模块就不需要了,无该命名不影响远程模块的提供和使用,仅影响使用方执行测试是,jest需要自己打桩,如果提供了直接使用`hel_bundle/xxx.js`文件作文打桩对象会方便一些
|
65 | ```bash
|
66 | "build_bundle": "tsc & cross-env BUNDLE=true node ./scripts/replaceToRelativePath.js & cross-env BUNDLE=true node scripts/build.js",
|
67 | "build_npm": "npm run build_proxy && npm run build_bundle",
|
68 | ```
|