Question

我有两个命令：

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

npm run dev - 调用webpack -w，编译我的所有.j并保持观察模式，寻找更改。

我想将它与Visual Studio的构建集成，所以我进入了Properties - ＆gt;构建事件 - ＆gt;预生成

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方法。

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

node spawner.js fork \"npm --prefix ../ run dev\"，它会调用
forked-child.js，它会接收您的命令作为参数，并且
在新的分离过程中打开

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

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

Answer 2

我最近遇到过类似的情况，在调试模式下构建项目后，我想在监视模式下运行Webpack。我遇到了同样的问题，即在我运行项目时，预构建步骤会无限期地挂起。

我想出了以下解决方案，该解决方案通过打开一个单独的cmd窗口来运行.bat文件，该窗口不会阻止构建的完成并像超级按钮一样工作。

第1步-在项目的根目录中创建一个.bat文件，我使用以下代码调用了该WebpackWatch.bat，它将运行webpack并将其置于打开的监视模式下cmd窗口

if $(ConfigurationName) == Debug powershell start-process $(ProjectDir)WebpackWatch.bat
if $(ConfigurationName) == Release npm run build:prod

第2步-在构建后事件中，我添加了以下内容，它将运行powershell命令打开.bat文件，然后继续构建，以发布模式进行，它在我的软件包config中调用脚本build：prod

 "scripts": {
    "build:prod": "webpack --progress --profile --mode production"
  },

出于参考目的，我的package.json文件具有以下用于release build事件的脚本，请注意，在构建过程中该脚本没有--watch，因此可以通过构建步骤来完成文件。

<CheckBox VerticalContentAlignment="Center"

Answer 3

cd [基于bin文件夹的WebPack Package.json的路径] npx webpack

Answer 4

我实际上想出了一种使用预构建命令来做到这一点的方法。您可以在 Visual Studio 中启动应用程序的同时启动 webpack，而无需等待命令完成。

你可以使用

powershell start-process "cmd ""/K npm run start"""

例如，这是我在 ASP.Net MVC 5 项目属性下的 Build Events 中的预构建事件命令行：

cd "$(ProjectDir)React"
if $(ConfigurationName) == Debug (
  call npm run build-dev
  powershell start-process "cmd ""/K npm run start"""
)
if $(ConfigurationName) == Release (
  call npm run build-prod
)

在Visual Studio的预构建中使用webpack

4 个答案: