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. 使用

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说明没有副作用，

["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配置

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

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

1. 需要配置babel-loader的

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

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

方法1：需要配置

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：

 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语法无法转译

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 |         };

解决方法：

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

npm link xxx-ui之后报错

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/],