Запуск приложения Aurelia CLI Typescript (Webpack) в ExpressJS webpack-dev-middleware - PullRequest
Новая
       39

Запуск приложения Aurelia CLI Typescript (Webpack) в ExpressJS webpack-dev-middleware

0 голосов
/ 28 марта 2020

Я пытаюсь заставить работать следующие настройки:

  • Стандартное приложение машинописи Aurelia "Hello World" (создано CLI, сборка через Webpack)
  • Обслуживается ExpressJS приложение с использованием webpack-dev-middleware
  • Все объединено в один проект, чтобы иметь возможность обмениваться кодом между интерфейсным приложением Aurelia и Express JS фоновое приложение

Я смотрел с приложением Aurelia "Hello World", переместил код в папку src/frontend, переименовал webpack.config.js в webpack-frontend.config.js и npm скриптов также на start-frontend и так далее. После этих модификаций приложение Aurelia по-прежнему прекрасно работает.

Затем я добавил базовое c Express JS фоновое приложение с собственным webpack.config. js, tsconfig. js и, конечно, npm стартовый скрипт, который тоже отлично работает.

Наконец-то я попытался заставить приложение Express запустить интерфейсное приложение через webpack-dev-middleware, например так: 

    private applyWebpackDevMiddleware(server: Express) {
        if (Environment.isLocal()) {
            const config = require('../../webpack-frontend.config.js');
            const compiler = require('webpack')(config);

            const webpackDevMiddleware = require('webpack-dev-middleware');
            server.use(
                webpackDevMiddleware(compiler, {
                    hot: true,
                    publicPath: config.output.publicPath,
                    compress: true,
                    host: 'localhost',
                    port: Environment.getPort()
                })
            );

            const webpackHotMiddleware = require('webpack-hot-middleware');
            server.use(webpackHotMiddleware(compiler));
        }
    }

Это точно такой же файл конфигурации веб-пакета, который работает просто отлично, когда используется напрямую с командой webpack. Тем не менее, вот так, я получаю следующее сообщение об ошибке: 

(node:15111) UnhandledPromiseRejectionWarning: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration should be an object.
    at webpack (/Users/will/Desktop/test/aurelia-express/node_modules/webpack/lib/webpack.js:31:9)
    at ExpressServer.applyWebpackDevMiddleware (/Users/will/Desktop/test/aurelia-express/src/backend/ExpressServer.ts:141:48)
    at ExpressServer.setup (/Users/will/Desktop/test/aurelia-express/src/backend/ExpressServer.ts:41:14)
    at Function.createApplication (/Users/will/Desktop/test/aurelia-express/src/backend/Application.ts:18:29)
    at Object.<anonymous> (/Users/will/Desktop/test/aurelia-express/src/backend/index.ts:12:13)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Module.m._compile (/Users/will/Desktop/test/aurelia-express/node_modules/ts-node/src/index.ts:439:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/will/Desktop/test/aurelia-express/node_modules/ts-node/src/index.ts:442:12)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
    at Object.<anonymous> (/Users/will/Desktop/test/aurelia-express/node_modules/ts-node/src/bin.ts:157:12)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:827:10)
    at Module.load (internal/modules/cjs/loader.js:685:32)
(node:15111) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)

Может кто-нибудь дать мне несколько указателей, почему тот же файл конфигурации работает нормально, когда используется непосредственно в веб-пакете, но не работает, когда используется через веб-пакет -dev-промежуточный слой? В конце концов, он находится в том же проекте с теми же узлами node_modules и, следовательно, с той же версией веб-пакета, верно?

Или у кого-нибудь есть работающая установка, как описано выше, которой он может поделиться? Спасибо !!

Ответы [ 2 ]

0 голосов
/ 29 марта 2020

Несмотря на то, что winwiz1 действительно дал некоторые очень ценные замечания (например, отображение пути TypeScript), я бы хотел представить решение проблемы, которая на самом деле довольно проста:

au new создает «Hello World» проект с webpack.config.js, который экспортирует функцию . Однако, если вы хотите использовать веб-пакет с Express webapck-dev-middleware, требуется объект . Этот объект возвращается функцией из файла webpack.config.js. Поэтому все, что вам нужно сделать, это запросить файл и затем вызвать эту функцию: 

function applyWebpackDevMiddleware(server: Express) {
    server.use(express.static('static'));

    // Import the function from the webpack config and call the function
    // "false" is the "production" flag
    const config = require('../../webpack.config.js')(false);
    // then us the config object in webpack
    const compiler = require('webpack')(config)

    const webpackDevMiddleware = require('webpack-dev-middleware')
    server.use(webpackDevMiddleware(compiler, {
        writeToDisk: true,
        hot: true,
        publicPath: config.output.publicPath,
        compress: true,
        host: 'localhost',
        port: Environment.getInstance().port
    }))

    const webpackHotMiddleware = require('webpack-hot-middleware')
    server.use(webpackHotMiddleware(compiler))
}
0 голосов
/ 29 марта 2020

Обслуживается приложением ExpressJS с использованием webpack-dev-middleware

Сочетание ExpressJS и webpack-dev-middleware называется webpack-dev-server. Он используется очень широко в разработке: от него зависит 3,4 миллиона репозиториев. Его установка , тариф составляет 7 миллионов в неделю. Замена в процессе разработки чем-то, что вы разработали / собрали, имеет смысл только в том случае, если вы не удовлетворены его функциональностью или считаете, что можете обеспечить лучшую реализацию. В противном случае просто используйте его в разработке и не используйте его в производстве, потому что, как следует из его названия, webpack-dev-server предназначен для использования только для разработки.

Все объединено в одном проекте, чтобы иметь возможность для совместного использования кода между внешним приложением Aurelia и внутренним приложением ExpressJS

Совместное использование внешнего интерфейса и внутреннего интерфейса имеет смысл, объединять два проекта в один - нет. Фронтенд и бэкэнд имеют разные зависимости времени выполнения и разработки, вы хотите развернуть бэкэнд в производственном процессе, который является скудным и подразумевает меньше места, более безопасный и т. Д. c. Поэтому лучше разделить два проекта и обеспечить совместное использование с помощью:

  • копирования артефактов сборки внешнего интерфейса (html файлов, комплектов сценариев) из внешнего интерфейса в бэкэнд в производственном процессе, чтобы Express обслуживал Артефакты с диска.
  • Проксирование в процессе разработки для использования webpack-dev-server Live Reloading et c.
  • при использовании TypeScript (что вы делаете), совместное использование кода между проектами может быть выполнено с помощью отображение пути .

В качестве практического примера рассмотрим этот проект , хотя он не использует Aurelia. Я автор.

...