Webpack使用readdirSync for require一个库时

Question

我的express应用程序有一个遗留代码，读取特定目录下的所有路由文件，并在循环中要求它们。注意，这段代码不能修改:

app.js

const normalizedRoutes = fs.readdirSync(__dirname + '/src/routes/')
.map(routeFile => `/src/routes/${routeFile}`);
normalizedRoutes.forEach((normalizedRouteDir: string) => {
require(normalizedRouteDir)(app);
})

现在，我想把一个服务器端渲染应用程序与上面的代码结合起来，在路由文件中使用一些JSX。我的问题是因为路由文件是在运行时加载的，webpack在创建bundle.js文件时不能识别它们。因此，在/src/routes/${routeFile}中没有路由文件，当我运行bundle.js文件时，我得到一个错误消息:

Error: ENOENT: no such file or directory, scandir '/Users/******/build/src/routes/'

(星号表示隐藏完整路径)

webpack配置:

webpack.base.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: { //remain
rules: [
{
test: /.(ts|js)x?$/,
loader:'babel-loader',
exclude: /node_modules/,
options:{
presets:[
'@babel/react',
['@babel/env',{targets:{browsers:['last 2 versions']}}]
]
}
},
{
test: /.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
}
};

webpack.server.js

const path = require('path')
const {merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.js');
const webpackNodeexternals = require('webpack-node-externals');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
mode: "development",
entry: {
main:"./app.ts",
},
resolve: { 
extensions: [".js", ".jsx", ".json", ".ts"],
},
node: {
__dirname: true
},
output: { 
libraryTarget: "commonjs",
path: path.join(__dirname, "build"),
filename: "bundle.js",
},
target: "node", 
//Avoid put node modules of server when sending to browser
externals: [webpackNodeexternals()]

}
module.exports = merge(baseConfig,config)

package.json:

"dev:server": "nodemon --watch build --exec "node build/bundle.js" ",
"dev:build-server": "webpack --config webpack.server.js --watch",

当我将路由文件(js文件)复制到构建目录时，它当然有效，但这意味着我不会在这些文件上运行webpack，因此我不能在这些文件中包含JSXes6功能。

我的问题是:

1. 是否有可能通过webpack/babel来识别这些要求并将它们添加到bundle.js中，从而避免需要单独的文件(bundle.js和routes文件)
2. 如果我们不能这样做，我怎么能从bundle.js输出中单独运行webpack，并在正确的路径上创建一个路由文件夹，但经过babel处理?

谢谢!

Answer 1

代替使用Webpack，您可以尝试使用babel的编程接口，并在需要它们之前编译文件。

链接https://babeljs.io/docs/en/babel-core