Bundler类似于可以编译Node.js Express和EJS文件的WebPack

发布于 2025-02-01 07:50:56 字数 2960 浏览 0 评论 0原文

尝试设置 webpack5 + express + ejs 无济于事后，我正在寻找某种“ bundler”，以优化我的服务器代码（文件），以便自动缩小/uglified/当有任何代码更改时，混淆/捆绑/转换为ES5/等。它必须支持服务器端EJS部分（因为我几乎完成了从头开始使用EJ的项目），可以选择修改（例如捆绑包/不捆绑）或留下完整的特定文件。

我知道市场上有哪些捆绑机，但我没有尝试过 - 我不知道哪个最适合我的需求（如果有的话，除了Webpack Ofcourse之外 - 因为我很愚蠢以正确设置它，原因是我如何将WebPack捆绑包与EJS模板？ >或 webpack 5 + express + expers + ejs模板 ...）。

ejs渲染加载程序似乎要求您在配置文件中传递内联变量，而不是在您的快速路由中传递，这对我来说没有多大意义。

webpack：5.38.1 Express”：4.17.1 EJS-Render-loader：1.0.0*

我很难配置WebPack 5以正确使用EJS模板文件。看起来像这样的设置：

index.js

var express = require('express');
var app = express();
var page1 = require('./routes/page1.js');
var page2 = require('./routes/page2.js');
app.set('view engine', 'ejs');
app.set('views', __dirname + '/ejs');
var server = https.createServer(options, app).listen(port, host, function()
{
    console.log('server is running!');
}
app.use('/page1', page1);
app.use('/page2', page2);
// + bla bla bla

page1.js

router.get('/', function(req, res, next)
{
    res.render('page1', {data : data}); // here we render ejs file
    res.end();
}
router.post('/page2', function(req, res, next)
{
    // + bla bla bla
    res.render('page2', {data : data}); // here we render ejs file
    res.end();
}

page1.ejs

<!DOCTYPE html>
<html>
<head>
    <title>PAGE1</title>
    <%- include ('head.ejs'); %>
</head>
<body>
    <%- include ('header.ejs'); %>
    <%- include ('menu.ejs'); %>
    <div class="errors">
        <% if (typeof errors == "undefined") { %>
        <% } else { %>
            <%- errors %>
        <% } %>
    </div>
</body>
</html>

page2.js

router.get('/', function(req, res, next)
{
    res.render('page1', {data : data}); // here we render ejs file
    res.end();
}

page2.ejs

<!DOCTYPE html>
<html>
<head>
    <title>PAGE2</title>
    <%- include ('head.ejs'); %>
</head>
<body>
    <%- include ('container.ejs'); %>
</body>
</html>

webpack.config.js

module.exports = {
    target: "node",
    entry: {
        main: './SRC/index.js'
    },
    externalsPresets: {node: true},
    externals: [webpackNodeExternals()],
    module: {
        rules: [
            {
                test: /\.ejs$/,
                use: {
                    loader: 'ejs-render-loader'
                }
            }
        ]
    }
}

可以有工作配置的人，显示他的设置，以便我可以调整我的设置吗？原因现在不捆绑EJS文件 - 似乎WebPack在这些文件中包含数据有问题。谢谢！

原文

After trying to set up webpack5 + express + ejs to no avail, I'm looking for some kind of "bundler" that will optimize my server code (files) so those will be automatically minified/uglified/obfuscated/bundled/converted to ES5/ etc. when there is any code change. It must support server side EJS partials (cause I have almost finished project that use EJS from scratch), has option to modify (for example bundle/not bundle) or leave intact specific files.

I know what bundlers there are on the market but I did not try them - I don't know which one is best suited for my needs (if any, besides webpack ofcourse - cause I'm to stupid to properly set it up, cause of How do I serve Webpack bundles with EJS templates? or
Webpack 5 + express + EJS templates ...).

Ejs render loaders seems to require that you pass in your inline variables in the config file, rather than in your Express routes, which doesn't make much sense to me.

webpack: 5.38.1
express": 4.17.1
ejs-render-loader: 1.0.0*

I have difficulties configuring Webpack 5 to properly use EJS template files. Setup looks like this:

INDEX.JS

var express = require('express');
var app = express();
var page1 = require('./routes/page1.js');
var page2 = require('./routes/page2.js');
app.set('view engine', 'ejs');
app.set('views', __dirname + '/ejs');
var server = https.createServer(options, app).listen(port, host, function()
{
    console.log('server is running!');
}
app.use('/page1', page1);
app.use('/page2', page2);
// + bla bla bla

PAGE1.JS

router.get('/', function(req, res, next)
{
    res.render('page1', {data : data}); // here we render ejs file
    res.end();
}
router.post('/page2', function(req, res, next)
{
    // + bla bla bla
    res.render('page2', {data : data}); // here we render ejs file
    res.end();
}

PAGE1.EJS

<!DOCTYPE html>
<html>
<head>
    <title>PAGE1</title>
    <%- include ('head.ejs'); %>
</head>
<body>
    <%- include ('header.ejs'); %>
    <%- include ('menu.ejs'); %>
    <div class="errors">
        <% if (typeof errors == "undefined") { %>
        <% } else { %>
            <%- errors %>
        <% } %>
    </div>
</body>
</html>

PAGE2.JS

router.get('/', function(req, res, next)
{
    res.render('page1', {data : data}); // here we render ejs file
    res.end();
}

PAGE2.EJS

<!DOCTYPE html>
<html>
<head>
    <title>PAGE2</title>
    <%- include ('head.ejs'); %>
</head>
<body>
    <%- include ('container.ejs'); %>
</body>
</html>

WEBPACK.CONFIG.JS

module.exports = {
    target: "node",
    entry: {
        main: './SRC/index.js'
    },
    externalsPresets: {node: true},
    externals: [webpackNodeExternals()],
    module: {
        rules: [
            {
                test: /\.ejs$/,
                use: {
                    loader: 'ejs-render-loader'
                }
            }
        ]
    }
}

Can somebody who has working config, show his settings, so I can adjust mine? Cause now EJS files are not bundled - seems webpack has problem with included data inside those files. Thanks!

分享到QQ

分享到微博