Как использовать webpack и babel для преобразования файла Node на стороне сервера ES6?

Question

Желаемое поведение

Я хочу иметь возможность:

• Использовать webpack, чтобы определить процесс сборки, который использует babel для преобразованияФайл узла на стороне сервера ES6 для "plain javascript"

Текущее поведение

Если я только что запустил:

node app.js

Я получаю ошибки импорта:

импорт экспресс из "экспресс";^^^^^^^

SyntaxError: неожиданный идентификатор

Что я пробовал

Когда я пытаюсь определить сборкупроцесс в веб-пакете, я получаю сообщения об ошибках типа:

Не удается разрешить tls / net / fs / dns / child_process / aws-sdk / ./local_settings /npm / node-gyp

Существует возможное решение здесь , но оно не устраняет все ошибки (эти ошибки остаются: aws-sdk, ./local_settings, npm, node-gyp):

target: "node"

Есть также предупреждения, такие как:

Ошибка синтаксического анализа модуля: неожиданный токен
Критическая зависимость: запрос запросазависимость - это выражение

Это "как использовать ES6 в производстве?"вопрос, кажется, общий, например:

NodeJS в ES6 / ES7, как вы делаете это в работе?
Краткое руководство по использованию ES6 с Babel, Node иIntelliJ
Подготовка к производственному использованию
Можно ли использовать babel-node на производстве

, но у меня нет ответовнайденные кажутся окончательными или конкретно относятся к решению веб-пакета.

Ниже приведен код, который у меня сейчас:

с 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.