Migrate from kkt 5.x to 6.x #133
Description
老的版本 v5 是将 create-react-app 使用 TypeScript 重新实现了一遍，并添加了配置功能支持，维护成本越来越高，最终 v6 参考 @timarney 开发的 react-app-rewired 已相同的方式实现，虽然在 mocker-api 中使用过类似的玩法，但是没有想到去更改缓存中的内容来实现添加配置。
配置支持 .kktrc.js 和 .kktrc.ts，也可以不配置，将是少量更改的 create-react-app 玩儿法是一样的。
kkt 5.x to 6.x
设置入口目录
- "doc": "cross-env ENTRYDIR=website kkt build",
+ "doc": "kkt build --app-src ./website",
- "start": "cross-env ENTRYDIR=website kkt start",
+ "start": "kkt start --app-src ./website",配置变得简单
配置依然支持 kktrc.js 和 kktrc.ts 两种配置。
- export const moduleScopePluginOpts = [];
- export const loaderOneOf = [];
- export const mocker = {};
- export function loaderDefault(loader) {
- return loader;
- }
- export default (conf: webpack.Configuration, options: OptionConf, webpack: typeof webpack) => {
- return conf;
- }
+ export default (conf: Configuration, env: string, options: LoaderConfOptions) => {
+ return conf;
+ }
+ export const devServer = (configFunction: DevServerConfigFunction) => {
+ return (proxy: WebpackDevServer.ProxyConfigArrayItem[], allowedHost: string) => {
+ // Create the default config by calling configFunction with the proxy/allowedHost parameters
+ const config = configFunction(proxy, allowedHost);
+ return config;
+ }
+ }Support for Less.
- export const loaderOneOf = [
- require.resolve('@kkt/loader-less'),
- ];
+ import lessModules from '@kkt/less-modules';
export default (conf, env, options) => {
+ conf = lessModules(conf, env, options);
return conf;
}Support for scss.
- export const loaderOneOf = [
- require.resolve('@kkt/loader-scss'),
- ];Support for stylus.
- export const loaderOneOf = [
- require.resolve('@kkt/loader-stylus')
- ];
+ import stylusModules from '@kkt/stylus-modules';
export default (conf, env, options) => {
+ conf = stylusModules(conf, env, options);
return conf;
}Mocker API
- export const mocker = {
- path: path.resolve('./mocker/index.js'),
- option: {
- proxy: {
- '/repos/(.*)': 'https://api.github.com/',
- },
- changeHost: true,
- },
- }
+ export const proxySetup = () => {
+ return {
+ path: path.resolve('./mocker/index.js'),
+ option: {
+ proxy: {
+ '/repos/(.*)': 'https://api.github.com/',
+ },
+ changeHost: true,
+ }
+ }
+ }How to kkt your create-react-app project
npm install kkt --save-dev"scripts": {
- "start": "react-scripts start",
+ "start": "kkt start",
- "build": "react-scripts build",
+ "build": "kkt build",
- "test": "react-scripts test",
+ "test": "kkt test",
"eject": "react-scripts eject"
}# Start the Dev Server
$ npm start
# Build your app
$ npm run build