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

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

Latest version **2.5.0** (published 2023-12-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install @render-ae86/ae86-component-build-plugin
pnpm add @render-ae86/ae86-component-build-plugin
yarn add @render-ae86/ae86-component-build-plugin
bun add @render-ae86/ae86-component-build-plugin
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.5.0 |
| Published | 2023-12-03 |
| First published | 2023-11-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 18.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cubber |

## Links

- npm: https://www.npmjs.com/package/@render-ae86/ae86-component-build-plugin
- Repository: https://gitee.com/render-ae86/ae86-component-build-plugin
- npm.io page: https://npm.io/package/@render-ae86/ae86-component-build-plugin

## Dependencies (11)

- [glob](https://npm.io/package/glob.md) ^10.0.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.1.1
- [style-loader](https://npm.io/package/style-loader.md) ^3.3.3
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^12.0.1
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.3
- [esm-gen-webpack-plugin](https://npm.io/package/esm-gen-webpack-plugin.md) ^3.0.0
- [postcss-px-to-viewport](https://npm.io/package/postcss-px-to-viewport.md) ^1.1.1
- [@render-ae86/ae86-utils](https://npm.io/package/@render-ae86/ae86-utils.md) ^1.5.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.7.5
- [type-gen-webpack-plugin](https://npm.io/package/type-gen-webpack-plugin.md) ^1.0.4
- [@render-ae86/ae86-app-base-webpack-config](https://npm.io/package/@render-ae86/ae86-app-base-webpack-config.md) ^2.2.0

## Recent versions

- 2.5.0 (latest) — 2023-12-03
- 2.4.0 — 2023-12-02
- 2.3.0 — 2023-12-02
- 2.2.0 — 2023-12-02
- 2.0.0-beta.1 — 2023-11-25
- 1.1.0 — 2023-11-03
- 1.0.0 — 2023-11-02

## README

# ae86-component-build-plugin

Ae86 Component 使用的基础编译插件

## 介绍

基于[ae86-webpack-builder](https://www.npmjs.com/package/@render-ae86/ae86-webpack-builder)封装的编译 react 组件的 build-plugin

## 用法

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

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

## 插件配置（options）

ae86-component-build-plugin 配置如下：
| 选项 | 作用 | 类型 | 默认值 |
| --- | --- | --- | --- |
| metas | 在 HTML 文档的 head 节点中插入自定义代码，例如：<meta charset="UTF-8"> | Array\<string\> | [''] |
| scripts | 在 HTML 文档的 body 节点中插入自定义代码，例如：<script>console.log(1)</script> | Array\<string\> | [''] |
| [ConfigOptions](https://www.npmjs.com/package/@render-ae86/ae86-app-base-webpack-config) | 配置详情请查看[@render-ae86/ae86-app-base-webpack-config](https://www.npmjs.com/package/@render-ae86/ae86-app-base-webpack-config) | | |

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

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

错误的配置：

```javascript
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](https://www.npmjs.com/package/@render-ae86/ae86-app-base-webpack-config)得到基础 webpack 配置，然后根据得到的配置做了定制化的修改
2. 编写基于[ae86-webpack-builder](https://www.npmjs.com/package/@render-ae86/ae86-webpack-builder)的插件类，享用到 ae86-webpack-builder 带来的编译能力和其他 API 方法。

更多细节欢迎阅读[ae86-component-build-plugin](https://gitee.com/render-ae86/ae86-component-build-plugin.git)的源码。

---
_Source: https://npm.io/package/@render-ae86/ae86-component-build-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._