javascript - 具有异步功能的 Node JS Webpack Babel

Question

尝试编译我的服务器端代码时，出现以下错误:

Module parse failed: (...babel-loader-path)?{"presets":["es2015-node4","es2015"]} (...) Unexpected token (86:6)
You may need an appropriate loader to handle this file type.

这个错误似乎是由我尝试导入的异步函数引起的。我需要更改我的 webpack 配置吗？

我的 webpack 配置文件:

const webpack = require('webpack');

module.exports = {
  target: 'node',
  entry: ['./server/index.js', './node_modules/webpack/hot/poll?1000'],
  output: {
    path: './dist',
    filename: 'server.bundle.js',
    libraryTarget: 'commonjs',
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  externals: [/^[a-z]/],
  module: {
    loaders: [{
        test: /\.jsx$/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015-node4', 'es2015'],
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015-node4', 'es2015'],
        },
      }
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: 'source-map',
};

Answer 1

如果您使用 Webpack 来编译您的 Node 代码，那么这不是一个好的方法。您应该简单地使用 babel-node，这是一种转换 Node 代码的绝佳方式。

为此，在您的 package.json 中执行以下操作

"scripts": {
  "dev": "node_modules/.bin/nodemon --exec babel-node server/index.js",
  "prestart": "node_modules/.bin/babel server --out-dir dist",
   "start": "node dist/index.js"
},
"devDependencies": {
   "@babel/cli": "^7.0.0-beta.40",
   "@babel/core": "^7.0.0-beta.40",
   "@babel/node": "^7.0.0-beta.40",
   "@babel/preset-env": "^7.0.0-beta.40",
   "@babel/preset-stage-2": "^7.0.0-beta.40",
   "nodemon": "^1.11.0"
}

在您的 .babelrc 文件中，执行以下操作。

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-stage-2"
   ]
}

然后在您的项目目录中创建一个名为 server 的文件夹，并在该文件夹中创建一个名为 index.js 的文件来创建您的 Node http 服务器。

有关引用，请查看 Babel-Node Documentation或者看看这个由 Babel 的优秀人员创建的令人惊叹的小型教程示例 Example Node Server Using Babel-Node

P.S:在 package.json 文件中，npm run dev 会监视您的代码，而 npm start 命令会编译您的代码以备发布用于生产。