如何使用 webpack 和 babel 转换 ES6 服务器端 Node 文件？

Question

期望的行为

我希望能够：

• 使用webpack 定义一个使用babel 将ES6 服务器端Node 文件转换为"plain javascript" 的构建过程

当前行为

如果我只是跑步：

node app.js

我收到导入错误：

从“快递”进口快递； ^^^^^^^

语法错误：意外的标识符

我的尝试

当我尝试在 webpack 中定义构建过程时，我收到如下错误：

无法解决 tls/net/fs/dns/child_process/aws-sdk/./local_settings/npm/node-gyp

here 提供了一个可能的解决方案，但它不能解决所有错误（这些错误仍然存​​在：aws-sdk、./local_settings、npm、node-gyp）：

target: "node"

还有类似的警告：

模块解析失败：意外令牌
关键依赖：依赖的请求是一个表达式

这个“我如何在生产中使用 ES6？”问题似乎很常见，例如：

NodeJS in ES6/ES7, how do you do it in production?
Quickstart guide to using ES6 with Babel, Node and IntelliJ
Getting ready for production use
Is it okay to use babel-node in production

但我找到的答案都不是确定的或与 webpack 解决方案特别相关。

下面是我现在的代码：

来自webpack.config.js

const path = require('path');

console.log("the __dirname is: " + __dirname);

module.exports = {
    entry: "./src/js/app.js",
    output: {
        filename: "app.js",
        path: path.resolve(__dirname, "dist/js")
    },
    target: "node",
    mode: "development",
    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "stage-0"]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            },
            {
                test: /\.less$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "less-loader" }
                ]
            },
            {
                test: /\.jpg$/,
                use: [
                    { loader: "url-loader" }
                ]
            }
        ]
    }
}

来自package.json：

  ...
  "main": "app.js",
  "scripts": {
    "start": "nodemon ./app.js --exec babel-node -e js",
    "build": "webpack",
    "watch": "webpack --w"
  },...
  "dependencies": {
    "bcrypt": "^2.0.1",
    "body-parser": "^1.18.2",
    "cors": "^2.8.4",
    "express": "^4.16.3",
    "jsonwebtoken": "^8.2.1",
    "mongodb": "^3.0.8"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.8.3",
    "webpack-cli": "^2.1.3"
  }

问题

我的webpack.config.js 和package.json 文件应该是什么样子才能成功地将ES6 文件转换为"plain javascript"？

Answer 1

默认情况下，Webpack 会尝试将所有内容捆绑到单个 .js 文件中。对于客户端项目，这很好，但对于 NodeJS 项目，它变得稍微复杂一些，因为您还包含来自 node_modules 的代码。有时这会导致像您在此处看到的错误。

除了targets: "node"，你还想做的是告诉Webpack不要捆绑外部依赖项（即node_modules）。

有一个名为webpack-node-externals 的有用库可以帮助解决这个问题：

var nodeExternals = require('webpack-node-externals');
...
module.exports = {
    ...
    target: 'node', // in order to ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
    ...
};

所以这并不是真正的“纯 JavaScript”，更像是试图让 Webpack 输出与 NodeJS 生态系统兼容的文件。