@byonedot/plugin-webpack-react

@byonedot/plugin-webpack-react 是协助处理 suzume 使用问题的 webpack 插件。

特性

插件的功能如下：

1. 样式按需加载：为 babel-loader 添加 babel-plugin-import 实现样式的按需加载。如果原先就有针对 suzume-design/web-react 的 babel-plugin-import 将会被替换。
2. 主题引入：指定主题包名，插件会读取主题包的变量内容注入到 less-loader 的 modifyVars。
3. 移除组件库自带的字体包：指定 removeFontFace 为 true 可以去掉组件库自带的字体文件。
4. 图标替换：指定图标库的包名，插件会读取包内图标对组件库内用到的同名的图标进行替换。
5. 替换默认语言：组件库的默认导入的语言包是中文，这就决定了打包产物中一定会包含中文，如果不想要中文，就可以利用这个参数来将其替换为你需要的语言。
6. 获取按需加载的babel插件配置：按需加载的实现是通过往 babel 注入 babel-plugin-import 配置来实现，这些配置开放出来供大家取用，可通过 (new SuzumeWebpackPlugin()).pluginForImport().getBabelPlugins() 获取。

安装

通过 npm/yarn 安装这个工具：

# npm
$ npm install -D @byonedot/plugin-webpack-react

# yarn
$ yarn add @byonedot/plugin-webpack-react

用法

使用方式是在 webpack config 文件中加入以下内容：

const SuzumeWebpackPlugin = require('@byonedot/plugin-webpack-react');

// webpack config
{
  plugins: [
    new SuzumeWebpackPlugin(options)
  ]
}

options

插件支持以下参数：

|参数名|类型|默认值|描述| |:--:|:--:|:-----:|:----------| |include|{(String\|RegExp)[]}|['src']|bebel-plugin-import 作用的文件目录| |extensions|{String[]}|['js', 'jsx', 'ts', 'tsx']| bebel-plugin-import 作用的文件后缀 | |theme|{String}|-|主题包名| |iconBox|{String}|-|图标库包名| |modifyVars|{Object}|{}|less 变量| |style|{String\|Boolean}|true| 样式引入方式| |removeFontFace|{Boolean}|false| 去掉组件库自带的字体文件 | |defaultLanguage|{string}|-| 替换默认的语言，语言列表 | |webpackImplementation|{webpack}|-| 指定使用的 webpack 实例 | |varsInjectScope|{(String\|RegExp)[]}|-| less 变量（modifyVars 和主题包的变量）注入的范围 | |modifyBabelLoader|{Boolean}|true| 如果有 babel-loader 则添加 babel-plugin-import 插件，否则添加新的 loader |

样式引入方式

style: true 将引入 less 文件

import '@byonedot/web-react/Affix/style'

style: 'css' 将引入 css 文件

import '@byonedot/web-react/Affix/style/css'

style: false 不引入样式