zx-xx-lib 中文文档教程

发布于 2年前 浏览 15 更新于 2年前

remote-lib-tpl

基于hel-micro搭建的远程仓库模板库

如何参与

  • 改subApp src/configs/subApp.ts改为你的hel模块名
export const APP_GROUP_NAME = 'hlib-xxx'; /// 名字随意,和 package.json name 一样即可
  • 改package.json 将hameappGroupName改为hel模块名(名字随意,保持一样即可)
  "name": "hlib-xxx",
  "appGroupName": "hlib-xxx",
  • 改源代码 src/utils/myMod.ts
export function sayHelloToHel(from: string) {
  const yourRtxName = ''; // 可改写为你的名字
  return `hello hel, I am ${yourName}, I come from ${from}`;
}
  • 改单测文件 src/utils/__tests__/myMod.ts
describe('test myMod', () => {
  test('sayHelloToHel', () => {
    const yourRtxName = ''; // 此处改写为你的rtx名字
    const ret = `hello hel, I am ${yourRtxName}, I come from bj`;
    expect(sayHelloToHel('bj') === ret).toBeTruthy();
  });
});
  • 执行单测
npm run test
  • 发布源码和类型
npm run build
npm publish

FAQ

为何入口文件采取动态模块导入写法

如果采用静态导入写法

import { libReady } from 'hel-lib-proxy';
import { LIB_NAME } from './configs/subApp';

async function main() {
  const libProperties = await import('./entrance/libProperties');
  libReady(LIB_NAME, libProperties.default);
};

main().catch(console.error);
export default 'REMOTE MOD';

需要将 config/webpack.config.js里的 maxChunks的值 1 改为 4

    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 4,
    }),

如果不改动,构建会报错

Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Failed to compile.

chunk runtime-main [entry]
Cannot convert undefined or null to object

改动后构建产物如下

  6.57 KB  hel_dist/static/js/2.506e8c97.chunk.js
  1.14 KB  hel_dist/static/js/runtime-main.65c05a8a.js
  499 B    hel_dist/static/js/3.21d3206a.chunk.js
  390 B    hel_dist/static/js/main.15c0c746.chunk.js

改为动态导入写法后

async function main() {
  const { libReady } = await import('hel-lib-proxy');
  const { LIB_NAME } = await import('./configs/subApp');

  const libProperties = await import('./entrance/libProperties');
  libReady(LIB_NAME, libProperties.default);
};

main().catch(console.error);
export default 'HEL REMOTE MOD';

则支持 config/webpack.config.js里的 maxChunks的值设置为 1,此时构建产物如下

  4.72 KB             hel_dist/static/js/0.a104ee67.chunk.js
  2.74 KB (+2.36 KB)  hel_dist/static/js/main.070cd75c.chunk.js
  1.14 KB (-2 B)      hel_dist/static/js/runtime-main.a8e25f5a.js

相比比原来少一个 chunk,为了构建产物尽可能的少 chunk,选择了入口文件采取动态模块导入写法

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文