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 |
默认全局变量, |
|
~~~loader~~~ | 否 | KKTPlugins |
kkt plugin,( |
|
kktPlugins | 否 | KKTPlugins |
kkt plugin | |
publicPath | 否 | string |
/ |
项目前缀 |
~~~moreConfig~~~ | 否 | ConfFun |
提供回调函数,更改 webpack 的最终配置 ,( |
|
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
- 参数
lazyLoad
boolean
类型 ,默认false
import defaultConfig from "@uiw-admin/config";
export default defaultConfig({
// ....
rematch:{
lazyLoad:true,
}
})
lazyLoad
- 设置
lazyLoad
后model
绑定路由关系,去除后面的/models/*
或/models.ts
路径,匹配路由配置文件中的component
属性值 - 把
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
)[];
- 使用的先行条件--插件需要默认导出是一个 class 类,符合
webpack
的plugins
规范, - 一维数组时,直接把字符串当成包名进行加载,使用
require
进行引入后直接new
- 二维数组时,直接把数组第一项当成包进行加载,使用
require
进行引入后new
的时候把 第二项当成参数进行传递到包内部 -
webpack
原始的plugins
类型
class DemoWebpackPlugin {
constructor(){
// ...
}
apply(compiler: webpack.Compiler) {
compiler.hooks.afterPlugins.tap("DemoWebpackPlugin", () => {
// ...
})
}
}
旧loader) 参数
kktPlugins (KKTPlugins 类型
export type KKTPlugins = (
| ConfFun
| {
loader?: ConfFun;
options?: LoaderConfOptions | undefined | Record<string, any>;
}
| string
| [string, Record<string, any>]
)[]
- 使用的先行条件--需要默认导出是一个函数方法,返回类型为
webpack.Configuration
的函数 - 一维数组时,直接把字符串当成包名进行加载,使用
require
进行引入后直接方法调用 - 二维数组时,直接把数组第一项当成包进行加载,使用
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.