@plugin-light/project-config-pixui/README.md

开箱即用的项目配置，适用于 pixui 项目

# PixUI 项目基础配置

<p align="center">
  <img src="https://img.shields.io/npm/dw/@plugin-light/project-config-pixui">
  <img src="https://img.shields.io/npm/unpacked-size/@plugin-light/project-config-pixui">
  <img src="https://img.shields.io/npm/v/@plugin-light/project-config-pixui">
  <img src="https://img.shields.io/npm/l/@plugin-light/project-config-pixui">
  <img src="https://img.shields.io/github/last-commit/novlan1/plugin-light">
  <img src="https://img.shields.io/github/created-at/novlan1/plugin-light">
</p>

PixUI 项目的 `webpack` 配置。

## 1. 作者

**novlan1**

## 2. 如何使用

安装

```bash
pnpm add @plugin-light/project-config-pixui -D
```

在 `.pixiderc/webpack.js` 中添加如下设置：

```js
const { getPixuiWebpackConfig } = require('@plugin-light/project-config-pixui');

module.exports = getPixuiWebpackConfig({
  appSettingDir: __dirname,
});
```

## 3. 类型及默认参数

### 3.1. 参数

`getPixuiWebpackConfig` 接收一个对象作为参数。

| 属性 | 类型 |  <p style="width:300px">说明</p> | <p style="width:300px">默认值</p> |
| --- | --- | --- | --- |
| appSettingDir | `string` | `apps.json` 和 `appsettings.json` 文件所在目录 | - |
| tsxLoaderExclude | `regexp` | `tsx` 相关 `loader` 排除路径 | `/node_modules\/(?!@tencent\/pmd\|@tencent\/press)/` |
| port | `number` | 启动端口号 | `8080` |
| useTailwind | `boolean` | 是否使用 tailwindcss | `false` |
| ifdefOptions | `boolean \| Record<string, any> \| ((v: Record<string, any>) => Record<string, any>)` | 是否使用 [ifdef-loader](./webpack-loader-ifdef.html) | `true` |
|crossGameStyleOptions|`boolean \| Record<string, any>`|是否使用 [cross-game-style-loader](./webpack-loader-cross-game-style.html)|-|

### 3.2. 类名

`less` 文件中的类名采用 `modules` 方式。

```ts
{
  loader: require.resolve('css-loader'),
  options: {
    modules: {
      localIdentName: '[name]_[local]__[hash:base64:6]',
    },
  },
}
```

## 4. FAQ

### 4.1. 关于 tailwindcss

PixUI 不支持 CSS 变量，`tailwindcss` 使用严重受限，不建议在 PixUI 中使用 `tailwindcss`。

### 4.2. 关于条件编译

默认开启条件编译，可以通过 `ifdefOptions` 参数关闭。

```js
module.exports = getPixuiWebpackConfig({
  ifdefOptions: false,
})
```

开启时，默认参数如下：

```js
{
  context: {
      PIXUI: true,
      REACT: true,
      __NOT_UNI__: true,
    },
  type: ['css', 'js', 'html'],
}
```

即可以支持下面写法：

```ts
// #ifdef PIXUI
console.log('hello novlan1')
// #endif

/* #ifdef PIXUI */
console.log('hello novlan1')
/* #endif */
```

可以通过 `ifdefOptions` 参数修改默认参数：

```js
module.exports = getPixuiWebpackConfig({
  // 传入对象
  ifdefOptions: {
    context: {
      XXX: true,
      __NOT_UNI__: true,
    },
    type: ['css', 'js', 'html'],
  },
  // 或传入函数
  // ifdefOptions: (config) => ({
  //   context: {
  //     ...config.context,
  //     XXX: true,
  //   },
  // }),
})
```

### 4.3. 样式关键词编译

即 `@TIP_STYLE_NAME` 关键词替换，基础配置默认支持。

- 参数完全透传给 [cross-game-style-loader](./webpack-loader-cross-game-style.html)
- 查找路径，`目录/css/xx.less`
- 不支持数组形式的 `styleName`，因为引入形式是 ESM 语法，而不是 `@import`

使用方式

`src/config.js` 中声明 `styleName`，如 `pubgm`。

```js
module.exports = {
  styleName: 'pubgm',
}
```

组件文件引入样式带上关键词 `@TIP_STYLE_NAME`。

```tsx
// @ts-ignore
import styles from '@TIP_STYLE_NAME';

const XXComp = () => {
  return <div className={styles.root}>Hello World</div>;
};
```

组件所在目录放上对应样式文件。

```bash
- one-dir
  - XXComp # 组件
  - css
    - pubgm.less
```

## 5. 更新日志

[点此查看](./CHANGELOG.md)