c# - 在 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
)

这个逻辑可行。如果我处于 Release模式，它将简单地捆绑我的文件并且服务器将运行。但问题出在 Debug模式下，因为 webpack -w 没有结束，构建也永远不会结束，它期待一个退出代码....

所以我试图超越 Visual Studio 并启动一个不会阻止构建开始的新 cmd 进程:

开始 cmd/K npm --prefix ../run dev

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

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

我知道这个叫做 task runner 的地方很合适，但我无法正确配置它，它无法识别来 self 的 package.json 的任何命令。此外，我不想在运行我的服务器之后/之前手动激活它，理想情况下我希望它与服务器启动集成，所以这就是我进行预构建的原因。但如果有更聪明的方法来做到这一点，请随时向我指出。

提前致谢。

Answer 1

回答这个问题:

So the question is: is there any smart way to make the visual studio simply run what I want in the pre-build command and not wait for it to finish?

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

在您的预构建脚本中，您需要使用 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. 在新的分离进程中打开它

因为它是通过 fork 与其父级分离的，所以 Visual Studio 的构建过程将继续运行，即使它在它自己的永无止境的终端实例中运行也是如此。

这就是我使用 webpack-dev-server 和 visual studio 解决这个确切问题的方法。希望对您有所帮助。