fix: rollup watch remaxjs#148

Crayonn · Aug 30, 2019 · f5f9399 · f5f9399
1 parent 2349dfd
commit f5f9399
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 48 deletions.
diff --git a/packages/remax-cli/package.json b/packages/remax-cli/package.json
@@ -27,6 +27,7 @@
     "@meck/rollup-plugin-postcss": "^2.0.3",
     "@remax/postcss-px2units": "^0.2.0",
     "acorn-walk": "^7.0.0",
+    "chokidar": "^2.1.8",
     "commander": "^2.19.0",
     "ejs": "^2.6.1",
     "lodash": "^4.17.11",

diff --git a/packages/remax-cli/src/build/index.ts b/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 = {
@@ -32,38 +19,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);
   } else {
     try {
       output('🚀 开始 build...', 'blue');

diff --git a/packages/remax-cli/src/build/utils/checkChokidar.ts b/packages/remax-cli/src/build/utils/checkChokidar.ts
@@ -0,0 +1,14 @@
+import path from 'path';
+
+export const checkChokidar = () => {
+  try {
+    require(path.resolve(process.cwd(), './node_modules/chokidar'));
+    return true;
+  } catch (e) {
+    console.log(e);
+    console.log(
+      '\nIf you install `chokidar`, you will be a better development experience! 😎'
+    );
+    return false;
+  }
+};
diff --git a/packages/remax-cli/src/build/utils/output.ts b/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);
+};
diff --git a/packages/remax-cli/src/build/watcher.ts b/packages/remax-cli/src/build/watcher.ts
@@ -0,0 +1,91 @@
+import chokidar from 'chokidar';
+import { RollupOptions, watch, RollupWatcher } from 'rollup';
+import { output } from './utils/output';
+import { checkChokidar } from './utils/checkChokidar';
+
+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;
+
+let watcher: RollupWatcher;
+export default function runWather(rollupOptions: RollupOptions) {
+  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();
+    if (extraFilesWatcher) extraFilesWatcher.close();
+
+    process.removeListener('uncaughtException', close);
+
+    if (err) {
+      process.exit(1);
+      console.error(err);
+    }
+  };
+
+  process.on('uncaughtException', close);
+  // 监听额外的文件
+  extraFilesWatcher = chokidar.watch(extraFiles);
+
+  extraFilesWatcher
+    .on('add', () => {
+      if (isFirstRunWatcher || isBundleRunning) return;
+      runWather(rollupOptions);
+    })
+    .on('unlink', () => {
+      if (isFirstRunWatcher || isBundleRunning) return;
+      runWather(rollupOptions);
+    })
+    .on('change', () => runWather(rollupOptions));
+}
diff --git a/packages/remax-cli/src/getEntries.ts b/packages/remax-cli/src/getEntries.ts
@@ -74,11 +74,15 @@ export default function getEntries(
 
   entries.pages = pages.reduce(
     (ret: Array<{ path: string; file: string }>, page: string) => {
+      const file = searchFile(path.join(options.cwd, 'src', page));
+      if (!file) {
+        console.log(`\nCould not resolve page module (${page}).`);
+      }
       return [
         ...ret,
         {
           path: page,
-          file: searchFile(path.join(options.cwd, 'src', page)),
+          file,
         },
       ].filter(page => page && page.file);
     },
@@ -88,11 +92,15 @@ export default function getEntries(
   subpackages.forEach((pack: { pages: string[]; root: string }) => {
     entries.pages = entries.pages.concat(
       pack.pages.reduce((ret: Array<{ path: string; file: string }>, page) => {
+        const file = searchFile(path.join(options.cwd, 'src', pack.root, page));
+        if (!file) {
+          console.log(`\nCould not resolve page module (${page}).`);
+        }
         return [
           ...ret,
           {
             path: page,
-            file: searchFile(path.join(options.cwd, 'src', pack.root, page)),
+            file,
           },
         ].filter(page => page && page.file);
       }, [])