# pub-multily-react-test03

**Repository Path**: guozia007/pub-multily-react-test03

## Basic Information

- **Project Name**: pub-multily-react-test03
- **Description**: 1
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-21
- **Last Updated**: 2023-04-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

```html
react多组件发布
```
安装：
```js
npm i pub-multily-react-test03
```
或者带版本号安装:
```js
npm i pub-multily-react-test03@version
```
引入组件：
```js
// Tree Shaking默认支持按需加载，无需其他配置
import { Button, ShowImg } from 'pub-multily-react-test03';
```
全局引入样式：
```js
import 'pub-multily-react-test03/lib/index.css';
```
如果不需要全部样式，借助于`babel-plugin-import`插件实现样式的按需加载。

此时就不需要引入全局样式了。

插件地址：
```html
https://github.com/umijs/babel-plugin-import
```
安装：
```
npm i babel-plugin-import
```

如果你项目的`package.json`中有`babel`配置项，请把配置项移植到babel的配置文件中。

项目根目录下创建babel配置文件`.babelrc.js`，做如下配置：
```js
module.exports =  {
  "presets": [
    // ... 你原有的preset
  ],
  "plugins": [
    // ... 你原有的plugin

    // 如下是babel-plugin-import插件的配置
    [
      "import",
      {
        // 要实现按需加载的库名
        "libraryName": "pub-multily-react-test03",
        // 库的目录，默认是lib可自行更改
        "libraryDirectory": "lib",
        // 是否要把组件的目录名改成小写形式，即my-button，默认为true
        "camel2DashComponentName": false,
        // "style"是单个样式所在的相对路径，按需加载样式时会按照"style"的路径去找css样式文件
        // name是组件的目录名，如MyButton
        // "style": true，意思是路径为MyButton/style
        // "style": "css"，意思是路径为MyButton/style/css
        // 还可以自定义如下，意思是要加载的样式文件是MyButton/index.css
        "style": (name) => `${name}/index.css`
      },
      // 如果你的@babel版本低于7，这句配置不用写
      "pub-multily-react-test03"
    ]
  ]
}
```

配置好之后，请把全局引入的样式删除。