pub-multily-react-test03 v0.0.7

react多组件发布

安装：

npm i pub-multily-react-test03

或者带版本号安装:

npm i pub-multily-react-test03@version

引入组件：

// Tree Shaking默认支持按需加载，无需其他配置
import { Button, ShowImg } from 'pub-multily-react-test03';

全局引入样式：

import 'pub-multily-react-test03/lib/index.css';

如果不需要全部样式，借助于babel-plugin-import插件实现样式的按需加载。

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

插件地址：

https://github.com/umijs/babel-plugin-import

安装：

npm i babel-plugin-import

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

项目根目录下创建babel配置文件.babelrc.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"
    ]
  ]
}

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