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编译节点代码，那么这不是一个好方法。您应该只使用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命令会编译您的代码，以便生产。

Node JS Webpack Babel with async

1 个答案: