feat(mini-runner): 加入 watch

packages/taro-mini-runner/src/index.ts

@@ -1,7 +1,7 @@
 import * as webpack from 'webpack'
 
 import { IBuildConfig } from './utils/types'
-import { printBuildError, bindProdLogger } from './utils/logHelper'
+import { printBuildError, bindProdLogger, bindDevLogger } from './utils/logHelper'
 import buildConf from './webpack/build.conf'
 
 const customizeChain = (chain, customizeFunc: Function) => {
@@ -19,14 +19,27 @@ export default function build (appPath: string, config: IBuildConfig, mainBuilde
     const webpackConfig = webpackChain.toConfig()
 
     const compiler = webpack(webpackConfig)
-    bindProdLogger(compiler)
-
-    compiler.run((err) => {
-      if (err) {
-        printBuildError(err);
-        return reject(err)
-      }
-      resolve()
-    })
+    if (config.isWatch) {
+      bindDevLogger(compiler, config.buildAdapter)
+      compiler.watch({
+        aggregateTimeout: 300,
+        poll: undefined
+      }, (err, stats) => {
+        if (err) {
+          printBuildError(err)
+          return reject(err)
+        }
+        resolve()
+      })
+    } else {
+      bindProdLogger(compiler, config.buildAdapter)
+      compiler.run((err) => {
+        if (err) {
+          printBuildError(err)
+          return reject(err)
+        }
+        resolve()
+      })
+    }
   })
 }

packages/taro-mini-runner/src/plugins/MiniPlugin.ts

@@ -150,6 +150,21 @@ export default class MiniPlugin {
 			})
     )
 
+    compiler.hooks.watchRun.tapAsync(
+			PLUGIN_NAME,
+			this.tryAsync(async (compiler: webpack.Compiler) => {
+        const changedTimes = compiler.watchFileSystem.watcher.mtimes
+        const changedFiles = Object.keys(changedTimes)
+          .map(file => `\n  ${file}`)
+          .join('')
+        if (changedFiles.length) {
+          console.log(changedFiles)
+        } else {
+          await this.run(compiler)
+        }
+			})
+    )
+
     compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation, { normalModuleFactory }) => {
       compilation.dependencyFactories.set(SingleEntryDependency, normalModuleFactory)
       compilation.dependencyFactories.set(TaroSingleEntryDependency, normalModuleFactory)
@@ -243,7 +258,7 @@ export default class MiniPlugin {
       }
     })
 
-     return {
+    return {
       configObj
     }
   }

packages/taro-mini-runner/src/utils/logHelper.ts

@@ -1,9 +1,31 @@
-import chalk from 'chalk';
-import * as ora from 'ora';
-import { partial, pipe } from 'lodash/fp';
-import * as formatMessages from 'webpack-format-messages';
-
-// const syntaxErrorLabel = 'Syntax error:';
+import chalk from 'chalk'
+import * as ora from 'ora'
+import { partial, pipe } from 'lodash/fp'
+import * as formatMessages from 'webpack-format-messages'
+import { BUILD_TYPES } from './constants'
+
+// const syntaxErrorLabel = 'Syntax error:'
+
+const LOG_MAP = {
+  [BUILD_TYPES.WEAPP]: {
+    OPEN: '请打开微信小程序开发者工具进行查看'
+  },
+  [BUILD_TYPES.ALIPAY]: {
+    OPEN: '请打开支付宝小程序开发者工具进行查看'
+  },
+  [BUILD_TYPES.QQ]: {
+    OPEN: '请打开QQ 小程序开发者工具进行查看'
+  },
+  [BUILD_TYPES.SWAN]: {
+    OPEN: '请打开百度智能小程序开发者工具进行查看'
+  },
+  [BUILD_TYPES.TT]: {
+    OPEN: '请打开字节跳动小程序开发者工具进行查看'
+  },
+  [BUILD_TYPES.QUICKAPP]: {
+    OPEN: '请按快应用端开发流程 https://taro-docs.jd.com/taro/docs/quick-app.html 进行查看'
+  }
+}
 
 const getServeSpinner = (() => {
   let spinner
@@ -14,7 +36,7 @@ const getServeSpinner = (() => {
 })()
 
 const printCompiling = () => {
-  getServeSpinner().text = 'Compiling...'
+  getServeSpinner().text = '正在编译...'
   getServeSpinner().start()
 }
 
@@ -40,24 +62,24 @@ const printBuildError = (err: Error): void => {
   console.log()
 }
 
-const printSuccess = () => {
+const printSuccess = (buildAdapter: BUILD_TYPES) => {
   getServeSpinner().stopAndPersist({
     symbol: '✅ ',
-    text: chalk.green('Compiled successfully!\n')
+    text: isFirst ? chalk.green(`编译成功，${LOG_MAP[buildAdapter].OPEN}\n`) : chalk.green(`编译成功\n`)
   })
 }
 
 const printWarning = () => {
   getServeSpinner().stopAndPersist({
     symbol: '⚠️ ',
-    text: chalk.yellow('Compiled with warnings.\n')
+    text: chalk.yellow('编译警告.\n')
   })
 }
 
 const printFailed = () => {
   getServeSpinner().stopAndPersist({
     symbol: '🙅  ',
-    text: chalk.red('Failed to compile.\n')
+    text: chalk.red('编译失败.\n')
   })
 }
 
@@ -83,13 +105,11 @@ const printWhenFailed = compiler => {
 }
 
 let isFirst = true
-const printWhenFirstDone = (devUrl, compiler) => {
+const printWhenFirstDone = (compiler) => {
   compiler.hooks.done.tap('taroDone', stats => {
     if (isFirst) {
       isFirst = false
       getServeSpinner().clear()
-      console.log()
-      console.log(chalk.cyan(`ℹ️  Listening at ${devUrl}`))
       console.log(chalk.gray('\n监听文件修改中...\n'))
     }
   })
@@ -98,24 +118,24 @@ const printWhenFirstDone = (devUrl, compiler) => {
 
 const _printWhenDone = ({
   verbose = false
-}, compiler) => {
+}, buildAdapter, compiler) => {
   compiler.hooks.done.tap('taroDone', stats => {
     const { errors, warnings } = formatMessages(stats)
 
     if (!stats.hasErrors() && !stats.hasWarnings()) {
-      printSuccess()
+      printSuccess(buildAdapter)
     }
 
     if (stats.hasErrors()) {
       printFailed()
-      errors.forEach(e => console.log(e + '\n'));
+      errors.forEach(e => console.log(e + '\n'))
       verbose && process.exit(1)
-      return;
+      return
     }
 
     if (stats.hasWarnings()) {
       printWarning()
-      warnings.forEach(w => console.log(w + '\n'));
+      warnings.forEach(w => console.log(w + '\n'))
     }
 
     verbose && console.log(stats.toString({
@@ -134,23 +154,23 @@ const printWhenDone = partial(_printWhenDone, [{ verbose: false }])
 
 const printWhenDoneVerbosely = partial(_printWhenDone, [{ verbose: true }])
 
-const bindDevLogger = (devUrl, compiler) => {
+const bindDevLogger = (compiler, buildAdapter: BUILD_TYPES) => {
   console.log()
   pipe(
     printWhenBeforeCompile,
-    partial(printWhenFirstDone, [devUrl]),
-    printWhenDone,
+    partial(printWhenDone, [buildAdapter]),
     printWhenFailed,
-    printWhenInvalid
+    printWhenInvalid,
+    printWhenFirstDone
   )(compiler)
   return compiler
 }
 
-const bindProdLogger = (compiler) => {
+const bindProdLogger = (compiler, buildAdapter: BUILD_TYPES) => {
   console.log()
   pipe(
     printWhenBeforeCompile,
-    printWhenDoneVerbosely,
+    partial(printWhenDoneVerbosely, [buildAdapter]),
     printWhenFailed
   )(compiler)
   return compiler

packages/taro-mini-runner/src/webpack/build.conf.ts

@@ -15,7 +15,7 @@ import {
   getMiniPlugin,
   getMiniCssExtractPlugin
 } from './chain'
-import { BUILD_TYPES, PARSE_AST_TYPE, MINI_APP_FILES, REG_STYLE } from '../utils/constants'
+import { BUILD_TYPES, PARSE_AST_TYPE, MINI_APP_FILES } from '../utils/constants'
 import { Targets } from '../plugins/MiniPlugin'
 
 const emptyObj = {}