背景
假设你有一个 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 export
const component = require("./component")
由于 Babel 仅通过 Webpack 运行,并且通过原始组件而不是捆绑/转译的组件server.js
进行访问component.js
,因此我们得到了错误。
我想一个解决方案是运行 Babel 两次:在server.js
启动之前在组件上运行一次,然后在 Webpack 中运行一次,但这似乎非常不优雅和低效。