Использование модуля ES6 как в приложении, так и в Node, при использовании Webpack-Dev-Middleware и Express - PullRequest
Новая
       30

Использование модуля ES6 как в приложении, так и в Node, при использовании Webpack-Dev-Middleware и Express

0 голосов
/ 09 мая 2018

Фон

Допустим, у вас есть компонент ES2015 / ES6 с одной функцией в качестве экспорта по умолчанию:

component.js 

export default function() {
    console.log("Hello, World!");
}

Приложение для включения в:

app.js 

import myComponent from "./component"

myComponent();

и сервер Node.js / Express, использующий webpack-dev-middleware , для запуска Webpack (с Babel) и подачи app.js, а также также , включая component.js в:

server.js 

const express = require("express");
const app = express();

// start the server
app.listen(process.env.EXPRESS_PORT, () => {
    console.log(`App listening on port ${process.env.EXPRESS_PORT}!`);
});

const webpack = require("webpack");
const webpackConfig = require("./webpack.config");
const compiler = webpack(webpackConfig);

// use webpack-dev-middleware to serve the publicPath
app.use(
    require("webpack-dev-middleware")(compiler, {
        logLevel: "warn",
        publicPath: webpackConfig.output.publicPath,
    })
);

// use webpack-hot-middleware for HMR
app.use(require("webpack-hot-middleware")(compiler));

const myComponent = require("./component") // import the component
myComponent(); // use the component

Вопрос

Как вы можете использовать component.js как в server.js, так и в веб-упаковке app.js?

Проблема

Как есть, этот компонент прекрасно работает в app.js, но выдает SyntaxError: Unexpected token export в консоли Node при попытке сделать const component = require("./component").

Так как Babel работает только через Webpack, а server.js получает доступ к component.js через оригинальный компонент, а не в комплекте / передается, мы получаем ошибку.

Полагаю, решением было бы запустить Babel дважды: один раз на компоненте до запуска server.js, и еще раз в Webpack, но это кажется очень неэлегичным и неэффективным.

1 Ответ

0 голосов
/ 10 мая 2018

Кажется, я наткнулся на рабочее решение: напишите модуль в формате CommonJS, а Webpack / Babel скомпилирует его для ES6.

Рабочие файлы:

component.js 

function myComponent() {
    console.log("Hello, World!");
}

module.exports = { myComponent };

app.js 

import myComponent from "./component"

myComponent();

server.js 

const { myComponent } = require("./component") // import the component

myComponent(); // use the component
...