javascript - 在应用程序和 Node 中使用 ES6 模块，同时使用 Webpack-Dev-Middleware 和 Express

Question

背景

假设你有一个 ES2015/ES6 组件，它有一个函数作为默认导出：

组件.js

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

将其包含在的应用程序：

应用程序.js

import myComponent from "./component"

myComponent();

还有一个使用webpack-dev-middleware的 Node.js/Express 服务器，在和 serve 上运行 Webpack（带有 Babel）app.js，还包括component.js：

服务器.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以及 webpacked 中使用app.js？

问题

按原样，该组件在 中运行良好，但在尝试执行时在节点控制台中app.js抛出 a 。SyntaxError: Unexpected token exportconst component = require("./component")

由于 Babel 仅通过 Webpack 运行，并且通过原始组件而不是捆绑/转译的组件server.js进行访问component.js，因此我们得到了错误。

我想一个解决方案是运行 Babel 两次：在server.js启动之前在组件上运行一次，然后在 Webpack 中运行一次，但这似乎非常不优雅和低效。

标签： javascriptnode.jswebpackbabeljswebpack-dev-middleware

Answer 1

我似乎偶然发现了一个可行的解决方案：以 CommonJS 格式编写模块，Webpack/Babel 将为 ES6 编译它。

工作文件：

组件.js

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

module.exports = { myComponent };

应用程序.js

import myComponent from "./component"

myComponent();

服务器.js

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

myComponent(); // use the component