babel，带有 nodemon 脚本的 webpack？答案

【问题标题】：babel, webpack with nodemon script?babel，带有 nodemon 脚本的 webpack？
【发布时间】：2017-09-15 22:52:33
【问题描述】：

我想知道是否有办法使用 babel 和 nodemon 配置 webpack。我几乎在网上搜索过，但没有发现任何有用的东西，或者可能是我，因为我对构建工具非常陌生。我的package.json 中有这个脚本：

"start": "nodemon app.js --exec babel-node"

它会转换我的代码并在发生更改时重新启动服务器。我想知道 webpack 是否有这样的配置和 watch 功能。我可以用 webpack 来做吗（运行服务器并观察更改并与 babel transpile 一起重新启动）？

【问题讨论】：

您通常不会将 Webpack 用于服务器部分，它更针对捆绑客户端资产，例如浏览器 JS、CSS、图像等。您有什么特别的原因想要使用 Webpack 作为服务器？
在服务器端使用 webpack 有很好的理由，例如，如果你对 React 组件进行服务器端编译
@PatrickHund：你说得对，但由于 OP 是构建工具的新手，我只是想确保他们知道为什么要使用它 :)
我正在尝试用我正在学习的东西构建一个基本的应用程序，是的，在不久的将来我也会使用 react。所以我想我也会学习如何使用构建工具:)

标签： javascript node.js webpack babeljs build-tools

【解决方案1】：

你不必使用nodemon，你可以使用webpack's watch feature。

这是一个示例脚本，我们称之为backend-dev.js：

const path = require('path');
const webpack = require('webpack');
const spawn = require('child_process').spawn;

const compiler = webpack({
    // add your webpack configuration here
});
const watchConfig = {
    // compiler watch configuration
    // see https://webpack.js.org/configuration/watch/
    aggregateTimeout: 300,
    poll: 1000
};

let serverControl;

compiler.watch(watchConfig, (err, stats) => {
    if (err) {
        console.error(err.stack || err);
        if (err.details) {
            console.error(err.details);
        }
        return;
    }

    const info = stats.toJson();

    if (stats.hasErrors()) {
        info.errors.forEach(message => console.log(message));
        return;
    }

    if (stats.hasWarnings()) {
        info.warnings.forEach(message => console.log(message));
    }

    if (serverControl) {
        serverControl.kill();
    }

    // change app.js to the relative path to the bundle created by webpack, if necessary
    serverControl = spawn('node', [path.resolve(__dirname, 'app.js')]);

    serverControl.stdout.on('data', data => console.log(data.toString()));
    serverControl.stderr.on('data', data => console.error(data.toString()));
});

您可以在命令行上启动此脚本

node backend-dev.js

当你修改你的服务器代码时，webpack 会重新编译并重启你的服务器。

【讨论】：

是否可以在 webpack 中进行任何类型的配置，以便它监视我的开发文件的更改，并在发生更改时更新捆绑文件并运行捆绑文件？
这正是我的代码所做的，你可以将任何 webpack 配置放在那里，注释说的地方。
但是在这里执行bundle文件的地方是哪一部分？
接近尾声，spawn 声明
我把 babel-loader 用来编译我的 es6 和 stage-2 语法放在配置里吧？

【解决方案2】：

至于 babel 部分，我相信babel loader 有你。我在我的webpack.config.js（webpack 2）中使用它：

module: {
  ...
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {presets: ['es2015']}
    }
  ]
}

但是我不使用 nodemon，所以很抱歉只回答了一半。我确实在开发中使用 webpack-dev-server。和 pm2 在登台/生产中，我在登台时使用它的手表，所以我不必手动重新启动，而且它比 webpacks dito 更容易配置：

// pm2's ecosystem.json (just to be thorough):
"watch"        : "./",
"ignore_watch" : "node_modules",

虽然没有手表在生产中，不不，不是我，不是敏感 - 可能出错的事情越少越好。

【讨论】：