npx webpack 意外令牌：

Question

我第一次尝试在 Windows 10 上将 Webpack 与 Node 和 Babel 一起使用（这也是我第一次使用 Babel）。我认为我已经正确配置了所有内容，但它给了我一个神秘的错误： 如果我这样做npx webpack --exec bable-node，也会发生同样的事情。

在我所读到的所有内容中，它给出了一个行号。我不确定是什么问题。

我将所有我认为与 Node 相关的文件放在一个名为“node”的文件夹中，并将所有其他文件放在一个名为“src”的文件夹中。我不知道这是否是导致问题的原因。这是文件夹结构：

/node
    /config
    /node_modules
    .babelrc
    master-updated.sh
    package-lock.json
    package.json
    server2.js
    webpack.config.js
/src
    /model (this is has a bunch of js files, but I removed the references to them for now)
    /public
        /html
        /srcipts
        /stylesheets
            /css
            /scss
        /vue
.gitignore

master-updated.sh 是一个用于响应 GitHub webhook 的 shell 脚本。

这里是server2.js的开头：

'use strict';

process.env.NODE_CONFIG_DIR = './node/config';

const config = require('config'),
    babel = require('babel-core'),

    ejs = require('ejs'),

    util = require('util'),

    express = require('express'),
    bodyParser = require('body-parser'),
    cors = require('cors'),
    moment = require('moment'),
    plaid = require('plaid'),
    mariadb = require('mariadb'),

    fs = require('fs'),
    http = require('http'),
    https = require('https'),

    session = require('express-session'),

    exec = require('child_process').exec;

const GOOGLE_AUTH_CLIENT_ID = '<REDACTED>';

const { OAuth2Client } = require('google-auth-library');
const googleAuthClient = new OAuth2Client(GOOGLE_AUTH_CLIENT_ID);

const APP_PORT = config.APP_PORT;

这是我的webpack.config.js 文件：

module.exports = {
    target: 'node',
    entry: {
        app: ['./server2.js']
    },
    output: {
        filename: 'server.js',
        path: path.resolve(__dirname, 'test')
    },
    module: {
        loaders: [
            test: '/\.js$/',
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ["@babel/preset-env"]
            }
        ]
    }
}

这里是.babelrc：

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

这里是package.json：

{
  "name": "sage-savings",
  "version": "0.0.1",
  "description": "An app for easy budgeting.",
  "main": "server2.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config node/webpack.config.js",
    "start": "node node/server2.js"
  },
  "author": "Dakota Dalton",
  "repository": "https://github.com/1silvertiger/Sage",
  "license": "ISC",
  "dependencies": {
    "@types/express": "^4.16.1",
    "aws-sdk": "^2.397.0",
    "body-parser": "^1.18.3",
    "config": "^3.0.1",
    "cors": "^2.8.5",
    "ejs": "^2.5.9",
    "express": "4.16.x",
    "express-session": "^1.15.6",
    "google-auth-library": "^3.0.1",
    "mariadb": "^2.0.3",
    "moment": "^2.22.2",
    "mysql": "^2.16.0",
    "plaid": "2.x.x"
  },
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@babel/preset-env": "^7.3.4",
    "ajv": "^6.10.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-env": "^1.7.0",
    "typescript": "^3.3.3333",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

Answer 1

如果您使用具有语法高亮功能的 IDE（例如 VS Code），则可以轻松识别这些语法问题。我所做的只是将您的配置复制到一个文件中并将其加载到 VS Code 中。

1. 您错误地关闭了用于exclude 的正则表达式：

   exclude: /node_modules\,
   

   您必须使用正斜杠而不是反斜杠：

   exclude: /node_modules/
   

2. 您还需要将加载器包装在对象文字中：

   loaders: [
       { // <= wrap in object literal
           test: '/\.js$/',
           loader: 'babel-loader',
           exclude: /node_modules/,
           query: {
               presets: ["@babel/preset-env"]
           }
       }
   ]