workspace、使用本地包以及使用dumi自定义组件

1. workspaces
   ​​​workspaces 文档​​​

• • 
    
• 创建文件： 根目录下的package.json文件中，​​workspaces​​ 配置对应的子项目路径。
• 使用： 在根目录下执行​​yarn add cross-env​​​ 操作，就能够在 “workspace-a”、 "workspace-b"子项目中直接使用​​cross-env​​插件了（子项目不需要安装插件，根目录在安装的时候会生成node_modules的bin文件）。
  • 
    

2. 使用本地包

创建项目文件：

npm init -y
mkdir module-a && cd module-a && npm init -y

文件目录如图所示，自定义包文件名称为：​​module-a​​。

• • 
    
• 
  

自定义包中增加方法：

安装自定义包： 根目录下执行​​npm install module-a​​,
可以看到package.json 文件中, dependencies 增加​​"module-n": "file:module-a"​​，其中module-n 为module-a目录下自定义包的名称

• 
  

当前npm测试版本为6.14.8，在​​module-n​​ 包中直接修改的文件内容会自动link 到根目录下的node_modules中

• • 
    
• 使用自定义包中的方法：
• 
  • 
    

3. 使用 dumi 和 father-build 创建组件库

参考链接：​​如何使用 dumi 和 father-build 创建组件库​​

​​dumi基础使用-文档​​

• 创建项目

mkdir mydumi && cd mydumi
yarn create @umijs/dumi-lib

dumi 采用约定式路由，直接创建文件Button

index.md 为组件文档
index.tsx 为组件源码

index.tsx:

import React, { FC } from 'react';

interface ButtonProps {
  onClick?: React.MouseEventHandler<HTMLElement>;
  disabled?: boolean;
}
const Button: FC<ButtonProps> = ({ children, onClick, disabled }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {children}
    </button>
  );
};

export default Button;

index.md: 自定义组件使用

还需要在​​src/index.ts​​ 文件中，导出定义： ​​export { default as Button } from './Button';​​

​​npm run start​​运行，显示效果如图所示，就创建了一个我们自己的​​Button​​组件：