在Visual Studio的预构建中使用Webpack

Question

我有两个命令：

npm run build-调用webpack以编译我所有的.js

npm run dev-调用webpack -w，编译我所有的.js并保持监视模式，以查找更改。

我想将其与Visual Studio的构建集成在一起，所以我进入了Properties-> Build Events-> Pre-build

if $(ConfigurationName) == Debug (
  npm --prefix ../ run dev
) ELSE (
  npm --prefix ../ run build
)

此逻辑有效。如果我处于发布模式，它将简单捆绑我的文件，服务器将运行。但是问题出在调试模式下，因为webpack -w不会结束，构建也永远不会结束，所以期望退出代码。

因此，我试图超越Visual Studio并启动一个新的cmd进程，该进程不会阻止构建的开始：

start cmd /K npm --prefix ../ run dev

不幸的是，Visual Studio对我来说太聪明了。

因此，问题是：是否有任何聪明的方法可以使Visual Studio只需在预构建命令中运行我想要的内容，而不等待它完成？

我知道有个合适的地方叫做任务运行器，但是我无法正确配置它，它无法识别来自package.json的任何命令。另外，我不想在运行服务器之前/之后手动激活它，理想情况下，我希望将其与服务器启动集成，这就是为什么要进行预构建。但是，如果有更聪明的方法可以执行此操作，请随时将其指向我。

提前致谢。

Answer 1

回答这个问题：

所以问题是：有没有什么聪明的方法可以让 Visual Studio 在预构建命令中简单地运行我想要的内容，而不是等待它完成？

答案是肯定的，我想到了一个聪明的方法。

在预构建脚本中，您需要使用 NodeJS 生成一个未连接到其父进程的新进程。你会这样称呼：

node spawner.js fork \"npm --prefix ../ run dev\"

然后你需要spawner.js在项目根目录中添加脚本

 /**
 * Spawns a new forked child process
 *
 * The process.argv property returns an array containing the command line arguments
 * passed when the Node.js process was launched. The first element will be process.execPath.
 * See process.argv0 if access to the original value of argv[0] is needed. The second element
 * will be the path to the JavaScript file being executed. The remaining elements will be any
 * additional command line arguments.
 * See: https://nodejs.org/docs/latest/api/process.html#process_process_argv
 *
 */


/**
 * Function: run()
 * This method runs the command using child_proces.exec only
 * Does the same as function fork(), but in a different implementation.
 */
module.exports = {


   /**
    * Function: fork()
    * This method runs the command using child_proces.fork and child_process.exec
    * Does the same as function run(), but in a different implementation.
    * Forks a new NodeJS process of the same codebase in a new V8 instance.
    */
   fork: function (command) {

      console.log('Begin Forking New Process');
      console.log(command);

      var cp = require('child_process');
      var child = cp.fork('./forked-child.js', [command]);

      /**
       * child.unref()
       * Causes the parent's (this) event loop to not include the child (spawned-child.js)
       * in its reference count, allowing the parent to exit independently of the child,
       * unless there is an established IPC channel between the child and parent.
       */
      child.unref();

   },

   runTsNode: function (command) {

      console.log('Begin Running ts-node Script');

      require('child_process').exec(
         // terminating command prompt is /c - persistent command prompt is /k
         'ts-node ' + command + '"',
         function () {
            console.log('Received Command: ' + command);
         });

      /**
       * Debug the arguments received on command line.
       */
      var args = process.argv.slice(2);
      args.forEach((val, index) => {
         console.log(`${index}: ${val}`);
      });

      /**
       * Kill the child process after 2 seconds, once the detached cmd.exe process has spawned
       */
      setTimeout(function () {
         console.log('Done Spawning');
         process.exit(0);
      }, 2000);

   },

   runNode: function (command) {

      console.log('Begin Running Node Script');

      require('child_process').exec(
         // terminating command prompt is /c - persistent command prompt is /k
         'node ' + command + '"',
         function () {
            console.log('Received Command: ' + command);
         });

      /**
       * Debug the arguments received on command line.
       */
      var args = process.argv.slice(2);
      args.forEach((val, index) => {
         console.log(`${index}: ${val}`);
      });

      /**
       * Kill the child process after 2 seconds, once the detached cmd.exe process has spawned
       */
      setTimeout(function () {
         console.log('Done Spawning');
         process.exit(0);
      }, 2000);

   },

   runCommand: function (command) {

      console.log('Begin Running Command Line Script');

      require('child_process').exec(
         // terminating command prompt is /c - persistent command prompt is /k
         'cmd.exe @cmd /k "' + command + '"',
         function () {
            console.log('Received Command: ' + command);
         });

      /**
       * Debug the arguments received on command line.
       */
      var args = process.argv.slice(2);
      args.forEach((val, index) => {
         console.log(`${index}: ${val}`);
      });

      /**
       * Kill the child process after 2 seconds, once the detached cmd.exe process has spawned
       */
      setTimeout(function () {
         console.log('Done Spawning');
         process.exit(0);
      }, 2000);

   },


};

require('make-runnable'); // must be at the END of the file

它需要make-runnable所以确保运行npm i make-runnable -D

除了 之外spawner.js，该脚本还使用forked-child.js，它也应该放置在您的项目根目录中。

 /**
 * Spawns a new forked child process
 *
 * The process.argv property returns an array containing the command line arguments
 * passed when the Node.js process was launched. The first element will be process.execPath.
 * See process.argv0 if access to the original value of argv[0] is needed. The second element
 * will be the path to the JavaScript file being executed. The remaining elements will be any
 * additional command line arguments.
 * See: https://nodejs.org/docs/latest/api/process.html#process_process_argv
 *
 */

// Window only until its updated for cross platform
require('child_process')
// terminating command prompt is /c - persistent command prompt is /k
   .exec('start cmd.exe @cmd /k "' + process.argv[2] + '"',
      function () {
         console.log('Received Command: ' + process.argv[2]);
      });


/**
 * Debug the arguments received on command line.
 */
process.argv.forEach((val, index) => {
   console.log(`${index}: ${val}`);
});

/**
 * Kill the child process after 2 seconds, once the detached cmd.exe process has spawned
 */
setTimeout(function () {
   console.log('Done Spawning');
   process.exit(0);
}, 2000);

我在 spanwer.js 脚本中包含了可能有用的其他方法。对于此示例，它正在调用该fork方法。

现在只需运行您的构建，它应该会执行

1. node spawner.js fork \"npm --prefix ../ run dev\"，这称为
2. forked-child.js，它接收您的命令作为参数并且
3. 在新的独立进程中打开它

由于它通过分叉与其父级分离，因此 Visual Studio 的构建过程将继续运行，即使它在其自己的永无止境的终端实例中运行。

这就是我使用 webpack-dev-server 和 Visual Studio 解决这个问题的方法。我希望这有帮助。