ko 5.2.1 → 5.2.2

package/README.md

@@ -1,129 +1,3 @@
-## ko
-
-支持 react，vue, react-ts快速打包，让你不再纠结 webpack，vue，ts配置
-
-## Installation
-
-global install with:
-
-```
-$ yarn add ko -g
-```
-
-install as devDependencies:
-
-```
-$ yarn add ko --dev
-```
-
-## Getting Started
-
-### Use Basics
-```text
-1. ko init  初始项目模版文件 效果如:[create-react-app]
-
-2. ko dll   生成动态连接库
-
-3. ko dev   启动本地开发环境
-
-4. ko build 编译项目到生产环境
-
-5. ko preview 预览编译后项目静态文件
-
-6. ko move  默认移动文件(可配置)
-
-7. ko swagger 生成swagger接口文件(可选js/ts),用户自定义请放在restful.js
-
-9. ko install 安装已发布npm包组件或者区块
-
-10.ko create  创建页面或者组件目录及文件
-
-11.ko lint 项目代码格式化
-
-12.ko [xx] -h 查看相关命令参数使用
-```
-
-### Use Advanced
-> 自定义配置，遵循commjs语法，在项目根目录创建 ko.config.js 结构如下：
-```js
-module.exports = (context) => {
-  const { webpack } = context;
-  return {
-      dll:[], //自定义dll打包modules，默认dependencies中的模块包
-      server: { //本地服务配置
-        "host": "127.0.0.1",
-        "port": 3002
-      },
-      proxy: [{ //接口代理配置,解决跨域问题
-        "context": ["/auth", "/api"],
-        "target": "http://localhost:3000"
-      }],
-      move: {
-        "from"://移动目录或文件
-        "to": //目标地址
-      },
-      webpack:{ //自定义webpack配置
-        entry:{},
-        output:{},
-        modules:{}
-        ...
-      }
-  }
-}
-```
-
-> [babel polyfill](https://babeljs.io/docs/en/babel-polyfill)
-```text
-import "core-js/stable" 
-import "regenerator-runtime/runtime"
-```
-
-> Global Configuration
-
-```text
-1.在项目public目录下新建config目录，并新建文件conf.dev.js/conf.prod.js
-
-2.conf.dev.js/conf.prod.js 示例如下：
-
-    var FRONT_CONF = {
-      LOGO: '/img/logo.png', // 项目logo
-      COPY_RIGHT: (new Date()).getFullYear() + ' 杭州玳数科技有限公司 浙ICP备15044486号-1',
-    }
-
-```
-
-
-### ko Project Directory
-```
-  project
-  ├── public                 // 公共资源文件(第三方资源库，项目模板文件，全局配置文件config)
-  ├── src
-  │     ├── components       // 公共组件
-  │     ├── layouts          // 通用布局
-  │     ├── pages            // 页面
-  │     └── index.js/index.tsx         // 默认入口文件，可手动配置
-  ├── dll                  // 构建后的动态链接库文件
-  ├── dist                  // 构建后的前端静态资源
-  │     ├── index.html
-  │     ├── css
-  │     └── js
-  ├── ko.config.js          // 自定义配置文件
-  ├── package.json           // package.json
-  └── README.md              // 项目说明
-```
-
-### Links
-
-- [Change Log](CHANGELOG.md)
-- [Roadmap](https://github.com/dtux-kangaroo/ko-script/wiki/Roadmap)
-
-### Tips
-* v3版本以上仅支持babel-loader8
-
-* react支持ts，并且ts，tsx和js，jsx可以共存，但是如果使用es6新语法，诸如 await，箭头函数，const等，需要将文件改为ts或者tsx
-
-* 文件路径别名问题，如果使用tsx，webpack中别名配置将会报错，需要在tsconfig中配置path别名
-
-
-
+# ko
 
+build & lint library

package/lib/actions/build.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = __importDefault(require("webpack"));
+const esbuild_loader_1 = require("esbuild-loader");
+const creator_1 = require("./creator");
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+class Build extends creator_1.WebpackCreator {
+    constructor(opts) {
+        super(opts);
+    }
+    config() {
+        const { esbuild } = this.opts;
+        const conf = {
+            optimization: {
+                minimizer: [
+                    !esbuild && new CssMinimizerPlugin(),
+                    esbuild && new esbuild_loader_1.ESBuildMinifyPlugin({
+                        target: 'es2015',
+                        css: true
+                    })
+                ].filter(Boolean)
+            },
+            plugins: [
+                new webpack_1.default.optimize.SplitChunksPlugin({
+                    chunks: 'async',
+                    minSize: 30000,
+                    maxSize: 600000,
+                    minChunks: 1,
+                    maxAsyncRequests: 5,
+                    maxInitialRequests: 3,
+                    automaticNameDelimiter: '_',
+                    cacheGroups: {
+                        antd: {
+                            name: 'antd',
+                            test: /[\\/]node_modules[\\/]antd[\\/]/,
+                            chunks: 'initial',
+                        },
+                        lodash: {
+                            name: 'lodash',
+                            test: /[\\/]node_modules[\\/]lodash[\\/]/,
+                            chunks: 'initial',
+                            priority: -10,
+                        },
+                        default: {
+                            minChunks: 2,
+                            priority: -20,
+                            reuseExistingChunk: true,
+                        },
+                    },
+                })
+            ]
+        };
+        return this.mergeConfig([this.baseConfig, conf]);
+    }
+    action() {
+        //TODO: redefine stats
+        (0, webpack_1.default)(this.config(), (error, stats) => {
+            if (stats && stats.hasErrors()) {
+                throw stats.toString({
+                    logging: 'warn',
+                    colors: true
+                });
+            }
+            if (error) {
+                throw error;
+            }
+            this.successStdout('ko build completed!');
+        });
+    }
+}
+exports.default = Build;

package/lib/actions/creator.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebpackCreator = void 0;
+const chalk_1 = __importDefault(require("chalk"));
+const webpack_merge_1 = require("webpack-merge");
+const webpack_1 = __importDefault(require("../webpack"));
+const config_1 = __importDefault(require("../utils/config"));
+class Creator {
+}
+class WebpackCreator extends Creator {
+    constructor(opts) {
+        super();
+        this.opts = opts;
+        this.baseConfig = this.initConfig(opts);
+    }
+    pluginsUnique(pluginNames) {
+        return (0, webpack_merge_1.unique)('plugins', pluginNames, (plugin) => plugin.constructor && plugin.constructor.name);
+    }
+    initConfig(opts) {
+        this.baseConfig = (0, webpack_1.default)(opts);
+        return (0, webpack_merge_1.mergeWithCustomize)({
+            customizeArray: this.pluginsUnique(['HtmlWebpackPlugin']),
+        })(this.baseConfig, config_1.default.userConf);
+    }
+    mergeConfig(conf) {
+        return (0, webpack_merge_1.merge)(conf);
+    }
+    successStdout(log) {
+        console.log(chalk_1.default.green(log));
+    }
+    linkStdout(link) {
+        console.log(chalk_1.default.underline(link));
+    }
+    errorStdout(log) {
+        console.log(chalk_1.default.red(log));
+    }
+}
+exports.WebpackCreator = WebpackCreator;
+exports.default = Creator;

package/lib/actions/dev.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_dev_server_1 = __importDefault(require("webpack-dev-server"));
+const detect_port_1 = __importDefault(require("detect-port"));
+const inquirer_1 = require("inquirer");
+const config_1 = __importDefault(require("../utils/config"));
+const creator_1 = require("./creator");
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+class Dev extends creator_1.WebpackCreator {
+    constructor(opts) {
+        super(opts);
+    }
+    devSerConf() {
+        const userDefinedDevServerConfig = config_1.default.userConf.devServer || {};
+        const { port, host } = this.opts;
+        const defaultDevServerConfig = {
+            port,
+            host,
+            contentBase: config_1.default.defaultPaths.dist,
+            historyApiFallback: true,
+            disableHostCheck: true,
+            compress: true,
+            clientLogLevel: 'none',
+            hot: true,
+            inline: true,
+            publicPath: '/',
+            watchOptions: {
+                ignored: /node_modules/,
+                aggregateTimeout: 600,
+            },
+            open: true
+        };
+        return { ...defaultDevServerConfig, ...userDefinedDevServerConfig };
+    }
+    config() {
+        const conf = {
+            devtool: 'cheap-module-source-map',
+            plugins: [
+                new webpack_1.default.HotModuleReplacementPlugin(),
+                this.opts.analyzer && new BundleAnalyzerPlugin()
+            ].filter(Boolean),
+        };
+        return this.mergeConfig([this.baseConfig, conf]);
+    }
+    async changePort(newPort, port) {
+        const question = {
+            type: 'confirm',
+            name: 'changePort',
+            message: `port: ${port} has been used，use new port ${newPort} instead?`,
+            default: true,
+        };
+        const answer = await (0, inquirer_1.prompt)([question]);
+        if (answer.changePort) {
+            return newPort;
+        }
+        else {
+            return null;
+        }
+    }
+    async checkPort(port) {
+        const newPort = await (0, detect_port_1.default)(port);
+        if (newPort === port) {
+            return newPort;
+        }
+        const isInteractive = process.stdout.isTTY;
+        if (isInteractive) {
+            return this.changePort(newPort, port);
+        }
+    }
+    getUrlHost(host) {
+        const regex = /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*$/i;
+        return regex.test(host) ? host : `http://${host}`;
+    }
+    async action() {
+        const { port, host } = this.devSerConf();
+        const newPort = await this.checkPort(parseInt(port));
+        if (!newPort)
+            return;
+        webpack_dev_server_1.default.addDevServerEntrypoints(this.config(), this.devSerConf());
+        const compiler = (0, webpack_1.default)(this.config());
+        const devServer = new webpack_dev_server_1.default(compiler, this.devSerConf());
+        let isFirstCompile = true;
+        compiler.hooks.done.tap('done', (stats) => {
+            if (isFirstCompile) {
+                isFirstCompile = false;
+                this.successStdout('development server has been started');
+                console.log(`server starts at: ${this.linkStdout(this.getUrlHost(host) + ':' + port)}`);
+            }
+            if (stats.hasErrors()) {
+                console.log(stats.toString({
+                    colors: true
+                }));
+            }
+        });
+        compiler.hooks.invalid.tap('invalid', () => {
+            console.log('Compiling...');
+        });
+        devServer.listen(port, host, (err) => {
+            if (err) {
+                console.error(err);
+                process.exit(500);
+            }
+        });
+    }
+}
+exports.default = Dev;

package/lib/cli.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+'use strict';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const ko_lints_1 = __importDefault(require("ko-lints"));
+const build_1 = __importDefault(require("./actions/build"));
+const dev_1 = __importDefault(require("./actions/dev"));
+const program = new commander_1.Command();
+const pkg = require('../package.json');
+program
+    .description('Project toolkit base on webpack,babel,eslint and prettier.')
+    .version(pkg.version, '-v, --version')
+    .usage('<command> [options]');
+program
+    .command('build')
+    .description('build project')
+    .option('--hash', 'output file name with hash')
+    .option('-t,--ts,--typescript', 'support typescript')
+    .option('-e,--esbuild', 'enable esbuild')
+    .action((opts) => {
+    const buildInstance = new build_1.default(opts);
+    buildInstance.action();
+});
+program
+    .command('dev')
+    .description('start devServer')
+    .option('-p, --port <port>', 'server start on which port', parseInt)
+    .option('--host <host>', 'specify a host to use')
+    .option('-t, --ts', 'support typescript')
+    .option('-a,--analyzer', 'support building analyzer')
+    .action((opts) => {
+    process.env.NODE_ENV = 'development';
+    const devInstance = new dev_1.default(opts);
+    devInstance.action();
+});
+//attach lint features to program
+(0, ko_lints_1.default)(program);
+program.parse();

package/lib/interfaces.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/utils/config.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = require("path");
+const fs_1 = require("fs");
+class Config {
+    constructor() {
+        this.cwd = process.cwd();
+    }
+    static getInstance() {
+        if (!Config.instance) {
+            Config.instance = new Config();
+        }
+        return Config.instance;
+    }
+    getFileRealPath(path) {
+        return (0, path_1.isAbsolute)(path) ? path : (0, path_1.resolve)(this.cwd, path);
+    }
+    //TODO: define userConf
+    get userConf() {
+        const userConfPath = this.getFileRealPath('ko.config.js');
+        if ((0, fs_1.existsSync)(userConfPath)) {
+            return userConfPath ? require(userConfPath) : {};
+        }
+        else {
+            throw new Error('user config file not exist, please check it!');
+        }
+    }
+    get defaultPaths() {
+        return {
+            src: this.getFileRealPath('src'),
+            dist: this.getFileRealPath('dist'),
+            public: this.getFileRealPath('public'),
+            html: this.getFileRealPath('public/index.html'),
+            tsconfig: this.getFileRealPath('tsconfig.json')
+        };
+    }
+    get isProductionEnv() {
+        const PROD = 'production';
+        return process.env.NODE_ENV === PROD;
+    }
+}
+exports.default = Config.getInstance();

package/lib/utils/config.test.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const config_1 = __importDefault(require("./config"));
+console.log(typeof config_1.default.getFileRealPath);
+describe('config instance', () => {
+    it('getFileRealPath should return absolute path', () => {
+        const absolutePath = '/foo/bar';
+        expect(config_1.default.getFileRealPath(absolutePath)).toBe(absolutePath);
+        const relativePath = 'ko.config.js';
+        expect(config_1.default.getFileRealPath(relativePath)).toBe(process.cwd() + '/' + relativePath);
+    });
+    it('userConf should throw', () => {
+        expect(() => {
+            config_1.default.userConf;
+        }).toThrow();
+    });
+    it('defaultPaths should ', () => {
+        const cwd = process.cwd();
+        expect(config_1.default.defaultPaths).toEqual({
+            src: cwd + '/src',
+            dist: cwd + '/dist',
+            public: cwd + '/public',
+            html: cwd + '/public/index.html',
+            tsconfig: cwd + '/tsconfig.json'
+        });
+    });
+});

package/lib/webpack/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const tsconfig_paths_webpack_plugin_1 = __importDefault(require("tsconfig-paths-webpack-plugin"));
+const config_1 = __importDefault(require("../utils/config"));
+const loaders_1 = __importDefault(require("./loaders"));
+const plugins_1 = __importDefault(require("./plugins"));
+const extensions = [
+    '.js',
+    '.jsx',
+    '.ts',
+    '.tsx',
+    '.css',
+    '.scss',
+    '.sass',
+    '.less',
+    '.json',
+    '.html',
+];
+function getWebpackBaseConf(opts) {
+    const { ts, hash } = opts;
+    const webpackBaseConf = {
+        mode: config_1.default.isProductionEnv ? 'production' : 'development',
+        target: 'web',
+        context: config_1.default.cwd,
+        entry: `src/index.${ts ? 'tsx' : 'js'}`,
+        output: {
+            path: config_1.default.defaultPaths.dist,
+            filename: hash ? 'js/[name].[contenthash].js' : 'js/[name].js',
+            publicPath: '/',
+        },
+        module: {
+            rules: (0, loaders_1.default)(opts),
+        },
+        plugins: (0, plugins_1.default)(opts),
+        resolve: {
+            extensions,
+            plugins: [
+                ts && new tsconfig_paths_webpack_plugin_1.default({
+                    configFile: config_1.default.defaultPaths.tsconfig
+                })
+            ].filter(Boolean)
+        },
+        performance: {
+            hints: false,
+        },
+        cache: {
+            type: 'filesystem',
+        }
+    };
+    return webpackBaseConf;
+}
+exports.default = getWebpackBaseConf;

package/lib/webpack/loaders/asset.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const assetModules = [
+    {
+        test: /\.(woff|woff2|ttf|eot)$/,
+        type: 'asset/resource',
+        generator: {
+            filename: 'fonts/[hash][ext][query]',
+        },
+    },
+    {
+        test: /\.(png|jpg|jpeg|gif|webp|svg)$/i,
+        type: 'asset/resource',
+        generator: {
+            filename: 'images/[hash][ext][query]',
+        },
+    },
+];
+exports.default = assetModules;

package/lib/webpack/loaders/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const style_1 = __importDefault(require("./style"));
+const asset_1 = __importDefault(require("./asset"));
+const script_1 = __importDefault(require("./script"));
+function getLoaders(opts) {
+    return [...style_1.default, ...asset_1.default, ...(0, script_1.default)(opts.ts)];
+}
+exports.default = getLoaders;

package/lib/webpack/loaders/script.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const getCacheIdentifier_1 = __importDefault(require("react-dev-utils/getCacheIdentifier"));
+const config_1 = __importDefault(require("../../utils/config"));
+const THREAD_LOADER = require.resolve('thread-loader');
+const BABEL_LOADER = require.resolve('babel-loader');
+function getScriptLoaders(supportTypescript) {
+    let scriptLoader = [
+        {
+            test: /\.jsx?$/,
+            include: config_1.default.defaultPaths.src,
+            use: [
+                THREAD_LOADER,
+                {
+                    loader: BABEL_LOADER,
+                    options: {
+                        presets: [
+                            [
+                                require.resolve('babel-preset-ko-app'),
+                                {
+                                    useAbsoluteRuntime: true,
+                                },
+                            ],
+                        ],
+                        babelrc: false,
+                        configFile: false,
+                        cacheIdentifier: (0, getCacheIdentifier_1.default)(config_1.default.isProductionEnv ? 'production' : '', ['babel-preset-ko-app', 'react-dev-utils', 'ko']),
+                        cacheDirectory: true,
+                        cacheCompression: false,
+                        compact: config_1.default.isProductionEnv,
+                    },
+                },
+            ],
+        },
+    ];
+    if (supportTypescript) {
+        const TS_LOADER = require.resolve('ts-loader');
+        const typescriptLoader = {
+            test: /\.tsx?$/,
+            use: [
+                THREAD_LOADER,
+                {
+                    loader: TS_LOADER,
+                    options: {
+                        transpileOnly: true,
+                        happyPackMode: true,
+                        allowTsInNodeModules: true
+                    },
+                },
+            ],
+        };
+        scriptLoader.push(typescriptLoader);
+    }
+    return scriptLoader;
+}
+exports.default = getScriptLoaders;