# react-ui

## 介绍

react的UI组件库

## 软件架构

软件架构说明

### 安装教程

1. npm install

#### 使用说明

1. npm link react-ui

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

#### 样式管理合并

1. 安装 **npm install classnames**

2. 使用

```js
var classNames = require('classnames');
classNames('foo', 'bar'); // => 'foo bar'
```

#### 公司打造属于自己的npm仓库

1. 从使用维度上划分【**UI库**，**工具库**】
2. 脚手架

#### 组件库的一些思考和总结

1. 组件库从不同的维度进行划分 【**业务型组件** **功能性组件**】
2. 从使用场景上划分，项目中使用，提供给第三方使用，项目中一般直接引入使用，提供给第三方使用，一般可以提供多种模块化规范的包
3. 组件库可以帮提高组件的复用率，显著提升开发效率，可以降本增效
4. 组件库可以代码统一管理，提高代码质量
5. 组件库文档清晰，方便实用

#### 包发布流程

1. npm adduser
2. npm publish

#### 说明

发布包的时候会过滤一些包，可以配置.npmignore文件
如果您有.npmignore文件，则npm将使用.npmignore文件。 npm将完全忽略.gitignore文件 。 (许多开发人员错误地认为npm将同时使用.npmignore和.gitignore文件。不要犯同样的错误！)

### package.json 中的一些配置

1. sideEffects 配置false说明没有副作用，

```js
["dist/*",
  "es/**/style/*",
  "lib/**/style/*",
  "*.less"]
```

表示这些代码下有副作用，在tree-shaking时不会移除
2.  files 项目中包含的文件名
3.  module ES Module默认的入口文件，优先查看该字段，买有查看main
4.  main CommonJs 模块入口
5.  typings TS的入口文件

### 组件库命令

1. PascalCase  大写字母开头驼峰命名
2. kebab-case 短横线命令

### 按需引入

问题：插件babel-plugin-import引入自己的 按需引入时会把PascalCase自动转为kebab-case，需要修改配置
webpack配置

```js
  {
    plugins:[
      [
        "import",
        {
          // 导入一个插件
          libraryName: "willow-react-ui", // 暴露的库名
          libraryDirectory: "es",
          style: "css", // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
          camel2DashComponentName: false,
        },
        "willow-react-ui",
      ]
  ]}
```

#### 在myApp项目中使用时，直接通过npm link，然后在myApp项目中，直接用component下的代码

1. 需要配置babel-loader的

```js
include: [/willow-react-ui.components/,
          /react-ui.components/]
```

注意包名和文件夹名称不一致，需要同时include
2. npm link 之后再项目中，会存在两个react ***https://github.com/facebook/react/issues/13991***

方法1：需要配置

```js
modules: [
        process.env.npm && path.resolve("node_modules"),
        "node_modules",
        paths.appNodeModules,
      ]
        .concat(modules.additionalModulePaths)
        .filter(Boolean),
```

注意这个启动时需要设置下环境变量**cross-env npm=1 WDS_SOCKET_PORT=80 node scripts/start.js**
方法2：删除包中依赖的react和react-dom
方法2：

```js
 alias: {
      react: path.resolve('./node_modules/react')
    }
```

#### peerDependencies的作用（只会在npm 包中指定）

peerDependencies 里的包，会被别的包在使用当前包时用到，npm2会强制安装peerDependencies里的包，npm3会提示为安装让其手动安装
*** npm i --legacy-peer-deps** 可以绕过peerDependencies安装依赖
忽略依赖包里的react和react-dom

### 打包报错

1. as any的ts语法无法转译

```js
PluginError [SyntaxError]: D:\Desktop\antd\willow-ui\components\LazyImage\index.tsx: Unexpected token, expected "," (48:16)

    46 |     } else {
    47 |       if (!!imgRef && !!src) {
  > 48 |         (imgRef as any).loadSrc = () => {
       |                 ^
    49 |           setImgSrc(src);
    50 |           intersectionObserver?.unobserve(imgRef);
    51 |         };
```

解决方法：

```js
npm install --save-dev @babel/preset-typescript
{
  "presets": ["@babel/preset-typescript"]
}
```

### npm link xxx-ui之后报错

```js
You may need an additional loader to handle the result of these loaders.
| import React from 'react';


```
解决方法:配置babel-loader，include: [paths.appSrc, /willow-utils.es/, /willow-ui.es/],