Implement inspect mode

src/plugins/bundleRunner/index.js

@@ -23,9 +23,23 @@ class ProjextWebpackBundleRunner {
         entry: null,
         name: 'projext-webpack-plugin-bundle-runner',
         logger: null,
+        inspect: {
+          enabled: false,
+          host: '0.0.0.0',
+          port: 9229,
+          command: 'inspect',
+          ndb: false,
+        },
       },
       options
     );
+    /**
+     * The options that are going to be sent to the `fork` function.
+     * @type {Object}
+     * @access protected
+     * @ignore
+     */
+    this._forkOptions = this._createForkOptions();
     /**
      * A logger to output the plugin's information messages.
      * @type {Logger}
@@ -76,6 +90,31 @@ class ProjextWebpackBundleRunner {
     compiler.hooks.compile.tap(name, this._onCompilationStarts.bind(this));
     compiler.hooks.done.tap(name, this._onCompilationEnds.bind(this));
   }
+  /**
+   * Generates the options for the `fork` function by evluating the inspect options.
+   * @return {Object}
+   * @access protected
+   * @ignore
+   */
+  _createForkOptions() {
+    const result = {};
+    const {
+      enabled,
+      host,
+      port,
+      command,
+      ndb,
+    } = this._options.inspect;
+    if (enabled) {
+      if (ndb) {
+        result.execPath = 'ndb';
+      } else {
+        result.execArgv = [`--${command}=${host}:${port}`];
+      }
+    }
+
+    return result;
+  }
   /**
    * This is called by webpack every time assets are emitted. The first time the method is called,
    * it will validate the entries and try to obtain the path to the file that will be executed.
@@ -179,7 +218,7 @@ class ProjextWebpackBundleRunner {
     // Make sure an entry was selected and there's no child process already running.
     if (this._options.entry && !this._instance) {
       // Fork a new instance of the bundle.
-      this._instance = fork(this._entryPath);
+      this._instance = fork(this._entryPath, [], this._forkOptions);
       // Prevent the output from being added on the same line as webpack messages.
       setTimeout(() => {
         this._logger.success('Starting the bundle execution');

src/services/building/configuration.js

@@ -60,12 +60,11 @@ class WebpackConfiguration {
    * This method generates a complete webpack configuration for a target.
    * @param {Target}  target    The target information.
    * @param {string}  buildType The intended build type: `production` or `development`.
-   * @param {boolean} watch     Whether or not webpack should use the watch mode.
    * @return {Object}
    * @throws {Error} If there's no base configuration for the target type.
    * @throws {Error} If there's no base configuration for the target type and build type.
    */
-  getConfig(target, buildType, watch) {
+  getConfig(target, buildType) {
     const targetType = target.type;
     if (!this.webpackConfigurations[targetType]) {
       throw new Error(`There's no configuration for the selected target type: ${targetType}`);
@@ -94,7 +93,6 @@ class WebpackConfiguration {
       output: target.output[buildType],
       copy,
       buildType,
-      watch,
     };
 
     let config = this.targetConfiguration(

src/services/building/engine.js

@@ -45,14 +45,17 @@ class WebpackBuildEngine {
      * that will be retrieved when generating the configuration.
      * The keys are the purpose and the values the actual names of the variables.
      * @type {Object}
-     * @property {string} target The name of the target being builded.
-     * @property {string} type   The intended build type: `development` or `production`.
-     * @property {string} run    Whether or not to execute the target. This will be like a fake
-     *                           boolean as the CLI doesn't support boolean variables, so its value
-     *                           will be either `'true'` or `'false'`.
-     * @property {string} watch  Whether or not to watch the target files. This will be like a fake
-     *                           boolean as the CLI doesn't support boolean variables, so its value
-     *                           will be either `'true'` or `'false'`.
+     * @property {string} target  The name of the target being builded.
+     * @property {string} type    The intended build type: `development` or `production`.
+     * @property {string} run     Whether or not to execute the target. This will be like a fake
+     *                            boolean as the CLI doesn't support boolean variables, so its
+     *                            value will be either `'true'` or `'false'`.
+     * @property {string} watch   Whether or not to watch the target files. This will be like a
+     *                            fake boolean as the CLI doesn't support boolean variables, so
+     *                            its value will be either `'true'` or `'false'`.
+     * @property {string} inspect Whether or not to enable the Node inspector. This will be like a
+     *                            fake boolean as the CLI doesn't support boolean variables, so its
+     *                            value will be either `'true'` or `'false'`.
      * @access protected
      * @ignore
      */
@@ -61,24 +64,34 @@ class WebpackBuildEngine {
       type: 'PXTWPK_TYPE',
       run: 'PXTWPK_RUN',
       watch: 'PXTWPK_WATCH',
+      inspect: 'PXTWPK_INSPECT',
     };
   }
   /**
    * Get the CLI build command to bundle a target.
-   * @param {Target}  target             The target information.
-   * @param {string}  buildType          The intended build type: `development` or `production`.
-   * @param {boolean} [forceRun=false]   Force the target to run even if the `runOnDevelopment`
-   *                                     setting is `false`.
-   * @param {boolean} [forceWatch=false] Force webpack to use the watch mode even if the `watch`
-   *                                     setting for the required build type is set to `false`.
+   * @param {Target}  target               The target information.
+   * @param {string}  buildType            The intended build type: `development` or `production`.
+   * @param {boolean} [forceRun=false]     Force the target to run even if the `runOnDevelopment`
+   *                                       setting is `false`.
+   * @param {boolean} [forceWatch=false]   Force webpack to use the watch mode even if the `watch`
+   *                                       setting for the required build type is set to `false`.
+   * @param {boolean} [forceInspect=false] Enables the Node inspector even if the target setting
+   *                                       is set to `false`.
    * @return {string}
    */
-  getBuildCommand(target, buildType, forceRun = false, forceWatch = false) {
+  getBuildCommand(
+    target,
+    buildType,
+    forceRun = false,
+    forceWatch = false,
+    forceInspect = false
+  ) {
     const vars = this._getEnvVarsAsString({
       target: target.name,
       type: buildType,
       run: forceRun,
       watch: forceWatch,
+      inspect: forceInspect,
     });
 
     const config = path.join(
@@ -102,13 +115,12 @@ class WebpackBuildEngine {
   }
   /**
    * Get a webpack configuration for a target.
-   * @param {Target}  target    The target configuration.
-   * @param {string}  buildType The intended build type: `development` or `production`.
-   * @param {boolean} watch     Whether or not the webpack watch mode should be enabled.
+   * @param {Target} target    The target configuration.
+   * @param {string} buildType The intended build type: `development` or `production`.
    * @return {object}
    */
-  getConfiguration(target, buildType, watch) {
-    return this.webpackConfiguration.getConfig(target, buildType, watch);
+  getConfiguration(target, buildType) {
+    return this.webpackConfiguration.getConfig(target, buildType);
   }
   /**
    * Get a Webpack configuration by reading the environment variables sent by the CLI command
@@ -122,15 +134,20 @@ class WebpackBuildEngine {
       throw new Error('This file can only be run by using the `build` command');
     }
 
-    const { type, run } = vars;
+    const { type, run, inspect } = vars;
     const target = Object.assign({}, this.targets.getTarget(vars.target));
     if (run === 'true') {
       target.runOnDevelopment = true;
+      if (inspect === 'true') {
+        target.inspect.enabled = true;
+      }
     }
 
-    const watch = vars.watch === 'true' || target.watch[type];
+    if (vars.watch === 'true') {
+      target.watch[type] = true;
+    }
 
-    return this.getConfiguration(target, type, watch);
+    return this.getConfiguration(target, type);
   }
   /**
    * Given a dictionary with the environment variables purpose and values, this method generates

src/services/configurations/browserDevelopmentConfiguration.js

@@ -94,7 +94,6 @@ class WebpackBrowserDevelopmentConfiguration extends ConfigurationFile {
       entry,
       target,
       output,
-      watch,
     } = params;
     // Define the basic stuff: entry, output and mode.
     const config = {
@@ -198,7 +197,7 @@ class WebpackBrowserDevelopmentConfiguration extends ConfigurationFile {
        * required entry to the list.
        */
       hotEntries.push('webpack-hot-middleware/client?reload=true');
-    } else if (watch) {
+    } else if (target.watch.development) {
       /**
        * If the target is not running nor it requires HMR (which means is not being served either),
        * and the watch parameter is `true`, enable the watch mode.

src/services/configurations/browserProductionConfiguration.js

@@ -70,7 +70,6 @@ class WebpackBrowserProductionConfiguration extends ConfigurationFile {
       entry,
       target,
       output,
-      watch,
     } = params;
     // Define the basic stuff: entry, output and mode.
     const config = {
@@ -141,7 +140,7 @@ class WebpackBrowserProductionConfiguration extends ConfigurationFile {
       ),
     ];
     // Enable the watch mode if required...
-    if (watch) {
+    if (target.watch.production) {
       config.watch = true;
     }
 

src/services/configurations/nodeDevelopmentConfiguration.js

@@ -86,8 +86,9 @@ class WebpackNodeDevelopmentConfiguration extends ConfigurationFile {
       // Push the plugin that executes the target bundle.
       plugins.push(new ProjextWebpackBundleRunner({
         logger: this.appLogger,
+        inspect: target.inspect,
       }));
-    } else if (params.watch) {
+    } else if (target.watch.development) {
       // Enable the watch mode if required.
       watch = true;
     }

src/services/configurations/nodeProductionConfiguration.js

@@ -57,7 +57,6 @@ class WebpackNodeProductionConfiguration extends ConfigurationFile {
       target,
       output,
       copy,
-      watch,
     } = params;
     const config = {
       entry,
@@ -80,7 +79,7 @@ class WebpackNodeProductionConfiguration extends ConfigurationFile {
         __dirname: false,
       },
       mode: 'production',
-      watch,
+      watch: target.watch.production,
     };
     // Reduce the configuration.
     return this.events.reduce(

src/typedef.js

@@ -98,6 +98,11 @@
  * https://homer0.github.io/projext/typedef/index.html#static-typedef-ProjectConfigurationSettings
  */
 
+/**
+ * @external {NodeInspectorSettings}
+ * https://homer0.github.io/projext/typedef/index.html#static-typedef-NodeInspectorSettings
+ */
+
 /**
  * @external {BabelConfiguration}
  * https://homer0.github.io/projext/class/src/services/configurations/babelConfiguration.js~BabelConfiguration.html
@@ -195,8 +200,6 @@
  * @property {Array} copy
  * A list of {@link TargetExtraFile} with the information of files that need to be copied during
  * the bundling process.
- * @property {boolean} watch
- * Whether or not webpack should use the watch mode.
  */
 
 /**
@@ -250,12 +253,15 @@
 
 /**
  * @typedef {Object} ProjextWebpackBundleRunnerOptions
- * @property {?string} entry  The name of the webpack entry to execute. If not specified will
- *                            fallback to the first one on the list provided by webpack.
- * @property {?string} name   The _"instance name"_, used to register the listeners on the webpack
- *                            event hooks.
- *                            Its default value is `projext-webpack-plugin-bundle-runner`.
- * @property {?Logger} logger A custom logger to output the plugin's information messages.
+ * @property {?string}                entry   The name of the webpack entry to execute. If not
+ *                                            specified will fallback to the first one on the list
+ *                                            provided by webpack.
+ * @property {?string}                name    The _"instance name"_, used to register the listeners
+ *                                            on the webpack event hooks. Its default value is
+ *                                            `projext-webpack-plugin-bundle-runner`.
+ * @property {?Logger}                logger  A custom logger to output the plugin's information
+ *                                            messages.
+ * @property {?NodeInspectorSettings} inspect The custom settings for the Node Inspector.
  */
 
 /**