react-ui

介绍

react的UI组件库

软件架构

软件架构说明

$3

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文件。不要犯同样的错误！)



$3



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的入口文件



$3



1. PascalCase  大写字母开头驼峰命名

2. kebab-case 短横线命令



$3



问题：插件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



$3



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"]

}

$3

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

react-ui

介绍

react的UI组件库

软件架构

软件架构说明

$3

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文件。不要犯同样的错误！)



$3



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的入口文件



$3



1. PascalCase  大写字母开头驼峰命名

2. kebab-case 短横线命令



$3



问题：插件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



$3



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"]

}

$3

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