rsflow-component v1.1.11

react多组件发布

安装：

npm i rsflow-component

引入组件：

// Tree Shaking默认支持按需加载，无需其他配置
import { Button, ShowImg } from "rsflow-component";

全局引入样式：

import "rsflow-component/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",
    ],
  ],
};

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