PixUI 项目基础配置

PixUI 项目的 webpack 配置。

1. 作者

novlan1

2. 如何使用

安装

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

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

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

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

3. 类型及默认参数

3.1. 参数

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

| 属性 | 类型 | 说明 | 默认值 | | --- | --- | --- | --- | | 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 | true | |crossGameStyleOptions|boolean \| Record<string, any>|是否使用 cross-game-style-loader|-|

3.2. 类名

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

{
  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 参数关闭。

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

开启时，默认参数如下：

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

即可以支持下面写法：

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

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

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

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。

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

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

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

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

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

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

5. 更新日志

点此查看