babel，带有 nodemon 脚本的 webpack？

Question

我想知道是否有办法使用 babel 和 nodemon 配置 webpack。我在网上搜索了很多，但没有找到任何有用的东西，或者可能是我，因为我对构建工具还很陌生。我的 package.json:

中有这个脚本

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

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

Answer 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 将重新编译并重启您的服务器。

Answer 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 。和 staging/production 中的 pm2，我在暂存时使用它的手表，所以我不必手动重新启动，而且它比 webpacks 更容易配置 dito:

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

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

babel，带有 nodemon 脚本的 webpack？

babel, webpack with nodemon script?

javascript

build-tools

node.js

webpack

babeljs