🎨 整体重构 build 和 serve 等

Author: zyao89

README.md

@@ -85,8 +85,6 @@ npx micro-app show methods
 ```js
 ╰─➤  npx micro-app show methods
   Plugin Methods:
-     * beforeMergeWebpackConfig    ( 合并 webpack 配置之前事件 )
-     * afterMergeWebpackConfig     ( 合并 webpack 配置之后事件 )
      * modifyChainWebpcakConfig    ( 合并之后提供 webpack-chain 进行再次修改事件 )
      * onChainWebpcakConfig        ( 修改之后提供 webpack-chain 进行查看事件 )
      * modifyWebpackConfig         ( 合并之后提供 webpack config 进行再次修改事件 )

package.json

@@ -44,12 +44,10 @@
         ]
     },
     "peerDependencies": {
-        "@micro-app/cli": ">=0.3.0",
-        "@micro-app/core": ">=0.3.0"
+        "@micro-app/cli": ">=0.3.0"
     },
     "devDependencies": {
-        "@micro-app/cli": "^0.3.0-alpha.1",
-        "@micro-app/core": "^0.3.0-alpha.3",
+        "@micro-app/cli": "file:../MicroApp-CLI",
         "@types/jest": "^24.0.19",
         "babel-eslint": "^10.0.3",
         "coveralls": "^3.0.7",
@@ -58,17 +56,17 @@
         "husky": "^3.0.9",
         "jest": "^24.9.0",
         "lint-staged": "^9.4.2",
-        "webpack": "^4.41.1"
+        "webpack": "^4.41.1",
+        "webpack-dev-server": "^3.9.0"
     },
     "dependencies": {
-        "@micro-app/shared-utils": "^0.1.7",
+        "@micro-app/shared-utils": "^0.1.8",
         "address": "^1.1.2",
         "cli-highlight": "^2.1.4",
         "clipboardy": "^2.1.0",
         "default-gateway": "^5.0.5",
         "launch-editor-middleware": "^2.2.1",
         "portfinder": "^1.0.25",
-        "webpack-chain": "^6.0.0",
-        "webpack-merge": "^4.2.2"
+        "webpack-chain": "^6.0.0"
     }
 }

src/commands/build/build.test.js

@@ -12,6 +12,8 @@ describe('Command build', () => {
 
     it('build run', async () => {
 
+        process.env.NODE_ENV = 'production';
+
         const { service } = require('@micro-app/cli');
 
         await service.run('build', getArgvs());
@@ -24,6 +26,8 @@ describe('Command build', () => {
 
     it('global cmd config', async () => {
 
+        process.env.NODE_ENV = 'production';
+
         const { service } = require('@micro-app/cli');
 
         const result = await service.run('build', Object.assign({

src/commands/build/index.js

@@ -26,26 +26,33 @@ module.exports = function buildCommand(api, opts) {
         usage: 'micro-app build [options]',
         options: {
             '--mode': 'specify env mode (default: development)',
-            '--type <type>': 'adapter type, eg. [ webpack, vusion ].',
+            '--type <type>': 'adapter type, eg. [ webpack, etc. ].',
             '--dest': 'specify output directory',
             '--watch': 'watch for changes',
             '--clean': 'remove the dist directory before building the project',
-            '--target': `app | lib (default: ${defaults.target})`,
+            // '--target': `app | lib (default: ${defaults.target})`,
         },
         details: `
 Examples:
-    ${chalk.gray('# vusion')}
-    micro-app build --type vusion
+    ${chalk.gray('# watch')}
+    micro-app build --watch
           `.trim(),
     }, async args => {
+        const logger = api.logger;
+
+        // TODO 兼容, 下个版本删除
+        if (args.t && !args.type) {
+            args.type = args.t;
+            logger.warn('you should be use "--type <type>"!!!');
+        }
+
         for (const key in defaults) {
             if (args[key] == null) {
                 args[key] = defaults[key];
             }
         }
 
         const mode = api.mode;
-        const logger = api.logger;
 
         const webpack = tryRequire('webpack');
         if (!webpack) {
@@ -84,8 +91,7 @@ Examples:
             webpack(webpackConfig, (err, stats) => {
 
                 api.applyPluginHooks('afterBuild', { args });
-
-                spinner.stop();
+                spinner.info('Build Done');
 
                 if (err) {
                     // 在这里处理错误
@@ -94,6 +100,8 @@ Examples:
                 }
 
                 if (stats.hasErrors()) {
+                    // 在这里处理错误
+                    api.applyPluginHooks('onBuildFail', { stats, args });
                     return reject('Build failed with errors.');
                 }
 

src/commands/inspect/index.js

@@ -11,21 +11,19 @@ module.exports = function inspectCommand(api, opts) {
         usage: 'micro-app inspect [options] [...paths]',
         options: {
             '--mode': 'specify env mode (default: development)',
+            '--type <type>': 'adapter type, eg. [ webpack, etc. ].',
             '--rule <ruleName>': 'inspect a specific module rule',
             '--plugin <pluginName>': 'inspect a specific plugin',
             '--rules': 'list all module rule names',
             '--plugins': 'list all plugin names',
             '--verbose': 'show full function definitions in output',
-            '--type <type>': 'adapter type, eg. [ webpack, vusion, etc. ].',
-            '--open-soft-link': '启用开发软链接',
-            '--open-disabled-entry': '支持可配置禁用部分模块入口.',
         },
         details: `
 Examples:
-    ${chalk.gray('# vusion')}
-    micro-app inspect --type vusion
-    ${chalk.gray('# open soft link')}
-    micro-app inspect --type vusion --open-soft-link
+    ${chalk.gray('# mode: development')}
+    micro-app inspect --mode development
+    ${chalk.gray('# inspect all plugins')}
+    micro-app inspect --plugins
             `.trim(),
     },
     args => {

src/commands/serve/index.js

@@ -15,15 +15,14 @@ module.exports = function serveCommand(api, opts) {
 
     api.modifyCreateDevServer(() => {
 
-        const { _, tryRequire, chalk, openBrowser, Env } = require('@micro-app/shared-utils');
-        const path = require('path');
+        const { _, tryRequire, chalk, openBrowser, Env, semver } = require('@micro-app/shared-utils');
         const url = require('url');
-        const launchEditorMiddleware = require('launch-editor-middleware ');
+        const launchEditorMiddleware = require('launch-editor-middleware');
         const portfinder = require('portfinder');
-        const prepareURLs = require('../../../utils/prepareURLs');
-        const prepareProxy = require('../../../utils/prepareProxy');
-        const validateWebpackConfig = require('../../../utils/validateWebpackConfig');
-        const isAbsoluteUrl = require('../../../utils/isAbsoluteUrl');
+        const prepareURLs = require('../../utils/prepareURLs');
+        const prepareProxy = require('../../utils/prepareProxy');
+        const validateWebpackConfig = require('../../utils/validateWebpackConfig');
+        const isAbsoluteUrl = require('../../utils/isAbsoluteUrl');
 
         function addConfig(id, fn) {
             if (tryRequire.resolve(id)) {
@@ -44,13 +43,22 @@ module.exports = function serveCommand(api, opts) {
                 logger.throw('[serve]', 'Not Found "webpack-dev-server"!');
             }
 
+            const webpackVersion = require('webpack/package.json').version;
+            const webpackDevServerVersion = require('webpack-dev-server/package.json').version;
+
             const isInContainer = checkInContainer();
             const isProduction = mode === 'production';
 
             const options = api.config || {};
 
+            const spinner = logger.spinner(`Starting for ${mode}...`);
+
             // configs that only matters for dev server
             api.modifyChainWebpcakConfig(webpackChain => {
+
+                // webpack 4
+                const isWebpack4 = semver.satisfies(webpackVersion, '>=4');
+
                 if (mode !== 'production' && mode !== 'test') {
                     webpackChain
                         .devtool('cheap-module-eval-source-map');
@@ -61,20 +69,40 @@ module.exports = function serveCommand(api, opts) {
                             .use(require(id));
                     });
 
-                    // https://github.com/webpack/webpack/issues/6642
-                    // https://github.com/vuejs/vue-cli/issues/3539
-                    webpackChain
-                        .output
-                        .globalObject('(typeof self !== \'undefined\' ? self : this)');
+                    if (isWebpack4) {
+                        // https://github.com/webpack/webpack/issues/6642
+                        // https://github.com/vuejs/vue-cli/issues/3539
+                        webpackChain
+                            .output
+                            .globalObject('(typeof self !== \'undefined\' ? self : this)');
+                    }
 
                     if (options.devServer && options.devServer.progress !== false) {
                         addConfig('webpack/lib/ProgressPlugin', id => {
                             webpackChain
                                 .plugin('progress')
-                                .use(require(id));
+                                .use(require(id), [
+                                    {
+                                        modules: false,
+                                        profile: false,
+                                        handler: (percentage, message /* , ...args */) => {
+                                            if (spinner && percentage <= 0) {
+                                                spinner.start();
+                                            }
+                                            if (spinner) {
+                                                spinner.text = Number(percentage * 100).toFixed(2) + '%  ' + chalk.gray(`( ${message} )`);
+                                            }
+                                            // api.logger.logo(percentage, message, ...args);
+                                            if (spinner && percentage >= 1) {
+                                                spinner.succeed('Compiled Done!');
+                                            }
+                                        },
+                                    },
+                                ]);
                         });
                     }
                 }
+                return webpackChain;
             });
 
             const webpackConfig = api.resolveWebpackConfig();
@@ -88,7 +116,7 @@ module.exports = function serveCommand(api, opts) {
             // in webpack config
             const projectDevServerOptions = Object.assign(
                 webpackConfig.devServer || {},
-                options.devServer
+                options.devServer || {}
             );
 
             // entry arg
@@ -125,7 +153,7 @@ module.exports = function serveCommand(api, opts) {
 
             const proxySettings = prepareProxy(
                 projectDevServerOptions.proxy,
-                api.resolve('public')
+                options.staticPaths || []
             );
 
             // inject dev & hot-reload middleware entries
@@ -164,20 +192,24 @@ module.exports = function serveCommand(api, opts) {
             // create compiler
             const compiler = webpack(webpackConfig);
 
+            const isWebpackDevServer3 = semver.satisfies(webpackDevServerVersion, '>=3');
+
             // create server
-            const server = new WebpackDevServer(compiler, Object.assign({
+            const server = new WebpackDevServer(compiler, Object.assign(isWebpackDevServer3 ? {
                 logLevel: 'silent',
+            } : {}, {
                 clientLogLevel: 'silent',
                 historyApiFallback: {
                     disableDotRule: true,
                     rewrites: genHistoryApiFallbackRewrites(options.publicPath, options.pages),
                 },
-                contentBase: api.resolve('public'),
+                contentBase: options.staticPaths || [],
                 watchContentBase: !isProduction,
                 hot: !isProduction,
                 compress: isProduction,
                 publicPath: options.publicPath,
-                overlay: isProduction // TODO disable this
+                // TODO disable this
+                overlay: isProduction
                     ? false
                     : { warnings: false, errors: true },
             }, projectDevServerOptions, {
@@ -210,21 +242,23 @@ module.exports = function serveCommand(api, opts) {
             }));
 
             [ 'SIGINT', 'SIGTERM' ].forEach(signal => {
-                process.on(signal, () => {
+                process.once(signal, () => {
                     server.close(() => {
                         process.exit(0);
                     });
                 });
             });
 
-            const spinner = logger.spinner(`Starting for ${mode}...`);
-
             return new Promise((resolve, reject) => {
                 spinner.start();
 
                 // log instructions & open browser on first compilation complete
                 let isFirstCompile = true;
                 const done = stats => {
+                    if (isFirstCompile) {
+                        spinner.stop();
+                    }
+
                     if (stats.hasErrors()) {
                         return;
                     }