1. 主页
  2. 文档
  3. 参考
  4. 标注母语名称

标注母语名称

此文档介绍如何标注母语名称。

以蚂蚁设计(antd@4.3.5,https://ant.design/index-cn)为例,介绍如何标注母语名称。

准备工作

  1. 增加模块的母语名称。
    https://git.jtu.net.cn/xuexi/_jtu/blob/master/paths_alias.json中增加模块母语名称“蚂蚁设计”。
{
  "蚂蚁设计": "antd",
}
  1. 创建母语名称模块。模块名称请参考“母语名称模块命名规则”。
    创建 @jtlan/antd https://git.jtu.net.cn/xuexi/jtlan/tree/master/antd

https://git.jtu.net.cn/xuexi/jtlan/blob/master/antd/package.json

{
  "name": "@jtlan/antd",
  "version": "0.0.2",
  "oVersion": "4.3.5",
  "description": "君土: An enterprise-class UI design language and React components implementation",
  "author": "Zhou Dengxiang",
  "license": "SEE LICENSE IN LICENSE.txt",
  "dependencies": {
    "antd": "4.3.5"
  },
  "publishConfig": {
    "access": "public"
  }
}

标注母语名称

  1. 把antd@4.3.5 中需要标注接口声明文件按照路径复制到新键的母语名称模块路径中。
antd$ tree
.
├── LICENSE
├── README.md
├── lib
│   ├── card
│   │   └── index.d.ts
│   ├── checkbox
│   │   └── Checkbox.d.ts
│   ├── index.d.ts
│   ├── input
│   │   └── Input.d.ts
│   ├── list
│   │   └── index.d.ts
│   ├── modal
│   │   ├── Modal.d.ts
│   │   ├── confirm.d.ts
│   │   └── index.d.ts
│   ├── page-header
│   │   └── index.d.ts
│   └── timeline
│       └── Timeline.d.ts
└── package.json
  1. 在母语名称模块@jtlan/antd的接口声明文件中标注母语名称。
// index.d.ts
export { default as Card/*;片*/ } from './card';
export { default as Checkbox/*;选框*/ } from './checkbox';
export { CheckboxProps/*;选框属*/, CheckboxChangeEvent/*;选框变事*/ } from './checkbox';
export { default as Input/*;输入*/ } from './input';
export { default as List/*;列*/ } from './list';
export { default as Modal/*;对话框*/} from './modal';
export { default as PageHeader/*;页头*/ } from './page-header';
export { default as Timeline/*;时间轴*/ } from './timeline';
// lib/modal/confirm.d.ts
export interface ModalStaticFunctions {
    confirm/*;确认*/: ModalFunc;
}
// lib/modal/index.d.ts
declare type Modal/*;对话框*/ = typeof OriginModal & ModalStaticFunctions & {
    destroyAll: () => void;
};
declare const Modal/*;对话框*/: Modal;
export default Modal/*;对话框*/;
// lib/modal/Modal.d.ts
export interface ModalFuncProps {
    title/*;标题*/?: React.ReactNode;
    onOk/*;当好*/?: (...args: any[]) => any;
    onCancel/*;当取消*/?: (...args: any[]) => any;
    okText/*;好文*/?: React.ReactNode;
    cancelText/*;取消文*/?: React.ReactNode;
}

使用母语名称

  1. 修改package.json,把母语名称模块@jtlan/antd添加到依赖中。
//https://git.jtu.net.cn/xuexi/tupian/blob/master/package.json
  "dependencies": {
    "@jtlan/antd": "0.0.1"
  }
  1. 安装依赖模块到node_modules
nmp install

就可以在代码中使用标注的母语名称来使用接口。君土编译系统就会使用母语名称模块中的接口声明文件代替原始模块中的接口声明文件。

https://git.jtu.net.cn/xuexi/tupian/blob/master/代码/入口.程

引 { 页头, 时间轴, 对话框 } 自 '蚂蚁设计';

  回 (
    <框>
      <页头
        标题="君土相册"
        副题="可爱的相册"
      />
      <对话框
        标题={图片?.描述}
        可见={图片 != 空}
        居中={真}
        底部={空}
        当取消={() => 置图片(空)}
      >
        <大图 源={图片?.地址} />
      </对话框>
      <图片轴>
        {显示文件列表.映((文件) => {
          回 (<时间轴.项 键={文件.编号}>
            <框>
              <框>{文件.描述}</框>
              <小图 源={文件.略图地址} 当点={() => 显示图片框(文件.访问地址, 文件.描述)} />
            </框>
          </时间轴.项>);
        })}
      </图片轴>
    </框>
  );

母语名称模块命名规则

母语名称模块位于范围(scop)jtlan中(@jtlan)。

  • 对于没有位于某范围(scop)中的模块,以相同的模块名称在@jtlan下创建模块。例如:antd的母语名称模块为@jtlan/antd。
模块名称母语模块名称
antd@jtlan/antd
apollo-boost@jtlan/apollo-boost
apollo-cache@jtlan/apollo-cache
graphql-tag@jtlan/graphql-tag
  • 对于位于某范围(scop)中的模块,在@jtlan下的模块名称为 “_范围名称_” + 模块名称。例如:@ant-design/icons的母语名称模块为@jtlan/_ant-design_icons。
模块名称母语模块名称
@ant-design/icons@jtlan/_ant-design_icons
@apollo/react-common@jtlan/_apollo_react-common
@types/express@jtlan/_types_express
@types/node@jtlan/_types_node