Node JS Webpack Babel 与异步答案

【问题标题】：Node JS Webpack Babel with asyncNode JS Webpack Babel 与异步
【发布时间】：2021-12-13 02:59:17
【问题描述】：

在尝试编译我的服务器端代码时，我收到以下错误：

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',
};

【问题讨论】：

标签： javascript node.js webpack async-await babeljs

【解决方案1】：

如果您使用 Webpack 来编译您的 Node 代码，那么这不是一个好方法。您应该简单地使用babel-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 的文件，该文件将创建您的节点 http 服务器。

参考Babel-Node Documentation 或者看看这个由 Babel Example Node Server Using Babel-Node 的优秀人员创建的令人惊叹的小型教程示例

P.S：在 package.json 文件中，npm run dev 监视您的代码，npm start 命令编译您的代码，准备好交付生产。

【讨论】：

这种方法可行，但 webpack hmr 可用于编译节点，而无需在每次更改时重新编译整个代码库。您可以找到更多信息here
为什么需要 HMR，服务器应该在更改时重新编译？ ://
我不明白你的问题。 babel-node 将重新编译您的整个代码库，而 hmr 只会重新编译您所做的更改。

【解决方案2】：

似乎对 babel 预设的用法有误解。您想要的预设不是您要输出的 javascript 的目标版本。为此，您需要适当地设置target。相反，您需要与您正在编写的 javascript 版本相对应的预设。预设是指示 babel 如何处理特定 javascript 结构的转换器的集合。在 babel es2017 或 transform-async-to-generator 预设使用 async 关键字。在 babel 7 之后建议使用：

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

这允许 babel 支持所有已完成的现代 java-script 语法。然后它将转换为您的 target 设置指示的任何语法。我个人会为此使用 package.json 中的 browserslist 查询，以便其他工具（如 postcss）自动获取相同的目标信息。

【讨论】：