Migrate from kkt 5.x to 6.x

[jaywcjlove]

老的版本 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

[jaywcjlove]

Chrome Plugin

"scripts": {
-    "start": "kkt watch",
+    "start": "BUILD_PATH=dist kkt start --watch --no-open-browser",
-    "build": "kkt build",
+    "build": "BUILD_PATH=dist kkt build",
    "test": "kkt test --env=jsdom",
    "test:coverage": "kkt test --env=jsdom --coverage"
}

.env

INLINE_RUNTIME_CHUNK=false
FAST_REFRESH=false
BUILD_PATH=dist