Plugin Light

Appearance

PixUI 项目基础配置 ​

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 接收一个对象作为参数。

属性类型

说明

默认值

appSettingDirstringapps.json 和 appsettings.json 文件所在目录-
tsxLoaderExcluderegexptsx 相关 loader 排除路径/node_modules\/(?!@tencent\/pmd|@tencent\/press)/
portnumber启动端口号8080
useTailwindboolean是否使用 tailwindcssfalse
ifdefOptionsboolean | Record<string, any> | ((v: Record<string, any>) => Record<string, any>)是否使用 ifdef-loadertrue
crossGameStyleOptionsboolean | Record<string, any>是否使用 cross-game-style-loader-

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
  • 查找路径，目录/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. 更新日志 ​

点此查看