kkt配置

简化 .kktprc 配置，默认集成 @uiw-admin/plugins、@kkt/less-modules、@kkt/raw-modules、@kkt/scope-plugin-options 依赖包。 其他配置查询kkt

安装

npm i @uiw-admin/config -D # yarn add @uiw-admin/config

参数说明(ConfigProps)

| 参数 | 必填 | 类型 | 默认值 | 说明 | | :--------------- | :--- | :--------------------------------------------------- | :--------------------------------------- | :--------------------------------------------------------------- | | alias | 否 | Record<string, string \| false \| string[]> | @:指向 src 目录，@@:指向 src/.uiw 目录 | 别名 | | plugins | 否 | PluginsType | | 插件 | | define | 否 | Record<string, any> & DefaultDefineType | | 默认全局变量，📢 注意：对象的属性值会经过一次 JSON.stringify 转换 | | ~~~loader~~~ | 否 | KKTPlugins | | kkt plugin，(⚠️将在V6版本中删除) | | kktPlugins | 否 | KKTPlugins | | kkt plugin | | publicPath | 否 | string | / | 项目前缀 | | ~~~moreConfig~~~ | 否 | ConfFun | | 提供回调函数，更改 webpack 的最终配置 ，(⚠️将在V6版本中删除) | | overrideWebpack | 否 | ConfFun | | 提供回调函数，更改 webpack 的最终配置 ， | | output | 否 | Omit<WebpackConfiguration['output'], 'publicPath'> | | 输出 | | rematch | 否 | {lazyLoad(懒加载)?: boolean} | | rematch的plugin配置 |

继承kkt配置

ConfFun 类型

export type ConfFun = (conf: WebpackConfiguration, evn: string, options?: LoaderConfOptions | undefined) => WebpackConfiguration

rematch

1. 参数 lazyLoad boolean 类型 ，默认 false

import defaultConfig from "@uiw-admin/config";

export default defaultConfig({
  // ....
  rematch:{
    lazyLoad:true,
  }
})

lazyLoad

1. 设置 lazyLoad 后 model 绑定路由关系，去除后面的/models/*或/models.ts 路径，匹配路由配置文件中的 component 属性值
2. 把model进行懒加载 ⚠️ 注意：如果使用懒加载model，则调用model时，只能调用已经加载的，否则会报错

src
  pages
    foo/models/b.ts   绑定到  path === "/foo" 路由中
    test/models.ts  绑定到  path === "/test" 路由中

// config/routes.json
[
  {
    "path": "/foo",
    "name": "查询表格",
    "component": "@/pages/foo",
  },
  {
    "path": "/test",
    "name": "表格2",
    "component": "@/pages/test"
  },
]

设置 lazyLoad 属性需要在项目入口文件加属性

import React from 'react'
import ReactDOM from 'react-dom'
import Control from '@uiw-admin/router-control'
import '@uiw/reset.css'
import './index.css'

ReactDOM.render(
  // ....
    <Control
      routeType="hash"
+      addModels={(path) => import(`${path}`)} // 或者使用 require 引入
    />
  ,
  document.getElementById('root')
)

kktPlugins

KKT 的 plugin

import defaultConfig, { WebpackConfiguration } from "@uiw-admin/config";

export default defaultConfig({
  // ....
  kktPlugins: [
    "@kkt/raw-modules",
    "@kkt/less-modules",
    ["@kkt/scope-plugin-options", { "allowedFiles": "./README.md" }],
  ],
})

overrideWebpack

通过 KKT 的 API 修改 webpack 配置。

import defaultConfig, { WebpackConfiguration } from "@uiw-admin/config";

export default defaultConfig({
  // ....
  overrideWebpack: (conf: WebpackConfiguration) => {
    conf.output = { ...conf.output, publicPath: './' };
    return conf
  }
})

define

用于提供给代码中可用的变量。下面是自带默认值：

DefaultDefineType 类型

| 参数 | 必填 | 类型 | 默认值 | 说明 | | :------------ | :--- | :------------------------------------------- | :------------------------------------ | :------------------------------------- | | AUTH | 否 | string \| boolean | true | 权限校验 | | BASE_NAME | 否 | string | "/" | 路由 跳转前缀 | | STORAGE | 否 | 枚举类型："local" \| "session" \| string | session | 本地存储使用 | | VERSION | 否 | string | 默认package.json中的version字段值 | 版本 | | TOKEN_STORAGE | 否 | 枚举类型："local" \| "session" \| "cookie" | session | token 存储方式 默认与 STORAGE 值相同 | | TOKEN_NAME | 否 | string | token | token 存储字段 | | SEARCH_MENU | 否 | string \| boolean | true | 菜单搜索 |

import config from "@uiw-admin/config"
export default config({
  // ...
  define:{
    // ...
    SEARCH_MENU:true
  }
})

alias

配置别名，对引用路径进行映射。

import config from "@uiw-admin/config"
export default config({
  alias: {
    foo: '/tmp/a/b/foo',
  },
  //  ...
})

内置了以下别名：

• @，项目 src 目录
• @@，临时目录，通常是 src/.uiw 目录

plugins 说明

PluginsType 类型

export type PluginsType = (
  | ((this: webpack.Compiler, compiler: webpack.Compiler) => void)
  | webpack.WebpackPluginInstance
  | [string, Record<string, any>]
  | string
)[];

1. 使用的先行条件--插件需要默认导出是一个 class 类，符合webpack 的 plugins规范，
2. 一维数组时，直接把字符串当成包名进行加载，使用require进行引入后直接new
3. 二维数组时，直接把数组第一项当成包进行加载，使用require进行引入后new的时候把 第二项当成参数进行传递到包内部
4. webpack 原始的 plugins 类型

class DemoWebpackPlugin {
  constructor(){
    // ...
  }
  apply(compiler: webpack.Compiler) {
    compiler.hooks.afterPlugins.tap("DemoWebpackPlugin", () => {
      // ...
    })
  }
}

kktPlugins (~~旧loader~~) 参数

KKTPlugins 类型

export type KKTPlugins = (
  | ConfFun
  | {
    loader?: ConfFun;
    options?: LoaderConfOptions | undefined | Record<string, any>;
  }
  | string
  | [string, Record<string, any>]
)[]

1. 使用的先行条件--需要默认导出是一个函数方法,返回类型为webpack.Configuration 的函数
2. 一维数组时，直接把字符串当成包名进行加载，使用require进行引入后直接方法调用
3. 二维数组时，直接把数组第一项当成包进行加载，使用require进行引入后调用的时候把 第二项当成参数进行传递到包内部

export default (conf: Configuration, env: string, options = {} as ReactLibraryOptions): Configuration => {
  conf.output = { ...conf.output, publicPath: './' };
  return conf
};

配置案例

⚠️ 注意：使用自定义 plugins 和 loader 时，请安装对应包。官方默认的 @uiw-admin/plugins-** 和 loader (@kkt/*) 不需要安装。

~~旧的配置案例~~

不推荐旧的配置案例，使用新的配置案例，它将变得更简单。

import defaultConfig from "@uiw-admin/config"
import { RematchWebpackPlugin, RoutesWebpackPlugin } from '@uiw-admin/plugins'
import lessModules from '@kkt/less-modules'
import rawModules from '@kkt/raw-modules'
import scopePluginOptions from '@kkt/scope-plugin-options'
export default defaultConfig({
  define: {
    VERSION: JSON.stringify(pkg.version),
    // BASE_NAME: "/uiw"
  },
  plugins: [new RematchWebpackPlugin(), new RoutesWebpackPlugin()],
  // publicPath: process.env.NODE_ENV === "development" ? "/" : "/uiw/",
  loader: [
    rawModules,
    { loader: scopePluginOptions, options: { allowedFiles: [path.resolve(process.cwd(), 'README.md')] } },
    lessModules
  ],
})

新配置案例（推荐）

import defaultConfig from "@uiw-admin/config"
export default defaultConfig({
  define: {
    STORAGE: 'local',
  },
  plugins: ["@uiw-admin/plugins-rematch", "@uiw-admin/plugins-routes"],
  kktPlugins: [
    "@kkt/raw-modules",
    "@kkt/less-modules",
    ["@kkt/scope-plugin-options", { "allowedFiles": "./README.md" }],
  ],
})

贡献者

感谢所有的贡献者，欢迎开发者为开源项目贡献力量。

License

Licensed under the MIT License.