Javascript 在应用程序和节点中使用ES6模块，同时使用Webpack Dev中间件和Express 背景

假设您有一个ES2015/ES6组件，其中一个功能作为默认导出：

component.js

要将其包含在中的应用程序：

app.js

以及一个Node.js/Express服务器，用于在

app.js

上运行Webpack（带Babel）并提供服务，还包括

component.js

：

server.js

问题: 您如何在

server.js

和网页包

app.js

中使用

component.js

问题 实际上，该组件在

app.js

中工作正常，但在尝试执行

const component=require（“./component”）

时，会在节点控制台中抛出一个

SyntaxError:Unexpected-token-export

由于Babel仅通过Webpack运行，

server.js

通过原始组件而不是捆绑/传输的组件访问

component.js

，因此我们得到了错误

---

我想一个解决方案是运行Babel两次：一次是在启动

server.js

之前在组件上运行，另一次是在Webpack中运行，但这似乎非常不雅观且效率低下。

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

工作文件：

component.js

app.js

server.js

---

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

工作文件：

component.js

app.js

server.js

---

听起来您应该创建第三个使用组件编译的库，然后将编译后的库导入到服务器端和客户端代码中。要在节点上使用ES6模块，您需要使用

--experimental Modules

标志，并将文件命名为

.mjs

，请参阅：@GabrielCarneiro，抱歉，我应该说得更清楚些；我宁愿避免使用实验性功能，除非它们是合法的最佳选择。这个问题似乎是可以解决的，而无需诉诸于此。我也不一定要将ES6模块导入节点；我想将它转换为CommonJS并导入到节点中，同时也不使用它，这样它就可以作为ES6模块导入到其他地方。听起来你应该创建第三个用组件编译的库，然后将编译后的库导入到服务器端和客户端代码中。要在节点上使用ES6模块，您需要使用

--experimental modules

标志并将文件命名为

.mjs

，请参阅：@GabrielCarneiro，对不起，我应该更清楚一些；我宁愿避免使用实验性功能，除非它们是合法的最佳选择。这个问题似乎是可以解决的，而无需诉诸于此。我也不一定要将ES6模块导入节点；我想将它转换为CommonJS并导入到节点中，同时也不考虑它，这样它就可以作为ES6模块导入到其他地方。

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

import myComponent from "./component"

myComponent();

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

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

module.exports = { myComponent };

import myComponent from "./component"

myComponent();

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

myComponent(); // use the component