fix: rollup watch #148

packages/remax-cli/package.json

@@ -41,6 +41,7 @@
     "@remax/postcss-px2units": "^0.2.0",
     "@remax/regenerator-runtime": "^0.11.1",
     "acorn-walk": "^7.0.0",
+    "chokidar": "^2.1.8",
     "commander": "^2.19.0",
     "ejs": "^2.6.1",
     "lodash": "^4.17.11",

packages/remax-cli/src/build/index.ts

@@ -2,21 +2,8 @@ import * as rollup from 'rollup';
 import rollupConfig from './rollupConfig';
 import getConfig from '../getConfig';
 import { Context } from '../types';
-
-const COLORS = {
-  red: '\x1b[31m',
-  green: '\x1b[32m',
-  blue: '\x1b[34m',
-};
-const RESET = '\x1b[0m';
-
-const output = (
-  content: string | string[],
-  color: 'red' | 'green' | 'blue'
-) => {
-  const message = Array.isArray(content) ? content : [content];
-  console.log(`${COLORS[color]}%s${RESET}`, ...message);
-};
+import runWatcher from './watcher';
+import { output } from './utils/output';
 
 export default async (argv: any, context?: Context) => {
   const options = {
@@ -31,38 +18,15 @@ export default async (argv: any, context?: Context) => {
     throw new Error(`Target ${argv.target} is not supported yet.`);
   }
 
-  const rollupOptions = rollupConfig(options, argv, targetConfig, context);
-  if (argv.watch) {
-    const watcher = rollup.watch([
-      {
-        ...rollupOptions,
-        watch: {
-          include: ['src/**', 'app.js', '*.config.js'],
-        },
-      },
-    ]);
-
-    console.log('\x1b[34m%s\x1b[0m', '🚀 启动 watch');
+  const rollupOptions: rollup.RollupOptions = rollupConfig(
+    options,
+    argv,
+    targetConfig,
+    context
+  );
 
-    watcher.on('event', (event: any) => {
-      switch (event.code) {
-        case 'START':
-          output('🚚 编译...', 'blue');
-          break;
-        case 'END':
-          output('💡 完成', 'green');
-          break;
-        case 'ERROR':
-        case 'FATAL':
-          const { error } = event;
-          const name =
-            error.code === 'PLUGIN_ERROR' ? error.plugin : error.code;
-          output(`\n🚨 [${name}]: ${error.message}`, 'red');
-          throw error;
-        default:
-          break;
-      }
-    });
+  if (argv.watch) {
+    runWatcher(rollupOptions, argv, context);
   } else {
     try {
       output('🚀 开始 build...', 'blue');

packages/remax-cli/src/build/utils/checkChokidar.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+let isFirstCheckFailed = true;
+export const checkChokidar = () => {
+  try {
+    require(path.resolve(process.cwd(), './node_modules/chokidar'));
+    return true;
+  } catch (e) {
+    if (isFirstCheckFailed) {
+      isFirstCheckFailed = false;
+      console.log(
+        '\n 安装 `chokidar` 获得更好的开发体验～～ 😎\n\n > npm install chokidar --save \n'
+      );
+    }
+    return false;
+  }
+};

packages/remax-cli/src/build/utils/output.ts

@@ -0,0 +1,14 @@
+const COLORS = {
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+};
+const RESET = '\x1b[0m';
+
+export const output = (
+  content: string | string[],
+  color: 'red' | 'green' | 'blue'
+) => {
+  const message = Array.isArray(content) ? content : [content];
+  console.log(`${COLORS[color]}%s${RESET}`, ...message);
+};

packages/remax-cli/src/build/watcher.ts

@@ -0,0 +1,104 @@
+import chokidar from 'chokidar';
+import { RollupOptions, watch, RollupWatcher } from 'rollup';
+import { output } from './utils/output';
+import { checkChokidar } from './utils/checkChokidar';
+import { CliOptions } from '../getConfig';
+import { Context } from '../types';
+import build from './index';
+
+let isBundleRunning = false;
+let isFirstRunWatcher = true;
+
+const rollupWatchFiles = ['src/**', 'app.js'];
+// 配置重新build的路径
+const extraFiles = ['src/app.config.js'];
+// chokidar config
+const chokidarConfig = {
+  usePolling: true,
+};
+
+let extraFilesWatcher: RollupWatcher | null;
+let watcher: RollupWatcher | null;
+
+export default function runWather(
+  rollupOptions: RollupOptions,
+  cli: CliOptions,
+  context?: Context
+) {
+  if (isBundleRunning) {
+    return;
+  }
+
+  isBundleRunning = true;
+
+  watcher = watch([
+    {
+      ...rollupOptions,
+      watch: {
+        chokidar: checkChokidar() && chokidarConfig,
+        include: rollupWatchFiles,
+      },
+    },
+  ]);
+
+  const watchEventHandle = (event: any) => {
+    switch (event.code) {
+      case 'START':
+        output('🚚 编译...', 'blue');
+        break;
+      case 'END':
+        isBundleRunning = false;
+        output('💡 完成', 'green');
+        break;
+      case 'ERROR':
+      case 'FATAL':
+        isBundleRunning = false;
+        const { error } = event;
+        const name = error.code === 'PLUGIN_ERROR' ? error.plugin : error.code;
+        output(`\n🚨 [${name}]: ${error.message}`, 'red');
+        throw error;
+      default:
+        break;
+    }
+  };
+
+  watcher.on('event', watchEventHandle);
+
+  if (isFirstRunWatcher) {
+    isFirstRunWatcher = false;
+    console.log('\x1b[34m%s\x1b[0m', '🚀 启动 watch');
+  }
+
+  const close = (err?: Error) => {
+    if (watcher) {
+      watcher.close();
+      watcher = null;
+    }
+    if (extraFilesWatcher) {
+      extraFilesWatcher.close();
+      watcher = null;
+    }
+
+    process.removeListener('uncaughtException', close);
+
+    if (err) {
+      process.exit(1);
+      console.error(err);
+    }
+  };
+
+  process.on('uncaughtException', close);
+  // 监听额外的文件
+  extraFilesWatcher = chokidar.watch(extraFiles);
+
+  const reloadWatcher = () => {
+    if (isFirstRunWatcher || isBundleRunning) return;
+    close();
+    build(cli, context);
+  };
+
+  extraFilesWatcher
+    .on('add', reloadWatcher)
+    .on('unlink', reloadWatcher)
+    .on('change', reloadWatcher);
+}

packages/remax-cli/src/getConfig.ts

@@ -11,7 +11,7 @@ export interface RemaxOptions {
   alias?: any;
 }
 
-interface CliOptions {
+export interface CliOptions {
   target: string;
 }