@render-ae86/ae86-component-build-plugin

ae86-component-build-plugin

Ae86 Component 使用的基础编译插件

介绍

基于ae86-webpack-builder封装的编译 react 组件的 build-plugin

用法

在根目录的中配置文件中（这里以 build.js 为例）添加如下代码即可：

export default {
  plugins: ["@render-ae86/ae86-component-build-plugin", options],
};

插件配置（options）

ae86-component-build-plugin 配置如下：

选项	作用	类型	默认值
metas	在 HTML 文档的 head 节点中插入自定义代码，例如：	Array<string>	['']
scripts	在 HTML 文档的 body 节点中插入自定义代码，例如：<script>console.log(1)</script>	Array<string>	['']
ConfigOptions	配置详情请查看@render-ae86/ae86-app-base-webpack-config

注意使用 ConfigOptions 的时候，不需要额外的属性定义。 正确的配置如下：

export default {
  plugins: [
    "@render-ae86/ae86-component-build-plugin",
    {
      // 比如配置处理样式的各种loader属性和cssInline
      cssInline: true,
      cssOptions: {
        // your config
      },
    },
  ],
};

错误的配置：

export default {
  plugins: [
    "@render-ae86/ae86-component-build-plugin",
    {
      // 这个是错误的
      ConfigOptions: {
        // 比如配置处理样式的各种loader属性和cssInline
        cssInline: true,
        cssOptions: {
          // your config
        },
      },
    },
  ],
};

功能介绍

ae86-component-build-plugin 提供了非常多开箱即用的功能，具体如下：

1. 插件内部提供 html 和 react 入口文件，减轻开发者的配置，专注于组件的开发即可。
2. 提供移动端和 pc 端的适配能力，针对样式中使用 rpx 作为 css 属性单位的情况，自动进行向 vm 单位的转化，开发者无需进行额外的适配工作。需要注意的是，插件内部转化的尺寸是按照 IPhone 6 来设计的，即基数为 750，1rpx = 0.5px = 1 物理像素。
3. 支持 css、和 css 预处理语法（less、scss、sass）和 css modules。
4. 使用插件构建出资源的目录为 dist，该目录下存放着 umd 规范下的 react 组件和对应的 ts 类型文件，以及对应的 css 文件。
5. 插件还会输出两个目录为 es 和 lib,分别对应 esm 和 cjs 规范下的 react 组件。

插件实现原理

为了使得开发者更加熟练使用该插件，简单介绍下插件的实现原理：

1. 使用@render-ae86/ae86-app-base-webpack-config得到基础 webpack 配置，然后根据得到的配置做了定制化的修改
2. 编写基于ae86-webpack-builder的插件类，享用到 ae86-webpack-builder 带来的编译能力和其他 API 方法。

更多细节欢迎阅读ae86-component-build-plugin的源码。