Javascript EJS中webpack包的版本控制

我正在使用Express和ReactJS创建应用程序。 对于拆分大型组件，我使用延迟加载，在webpack中，我添加了

chunkhash

，以查询在浏览器中创建版本控制并提供新版本。 但不幸的是，我的bundle文件是在EJS模板中提供的，因为我使用Express作为后端，它使用简单的脚本标记

<script src="/build/bundle.js" type="text/javascript" defer></script>

那么，如何在EJS模板中提供版本控制呢？在这种情况下，最佳做法是什么

希望我没有问愚蠢的问题

---

提前谢谢

这是完全可行的。在一天结束时，脚本标记是字符串，对吗

我就是这么做的， 用于创建带有Web包绑定输出的json文件

假设它创建了一个

assets.json

文件

在设置express服务器时，需要该文件并将其放入本地文件中。

req.locals.assets=require（'path/to/assets.json'）

现在，您只需要构建字符串标记并包含在模板中。 为此，您可以编写一个ejs帮助程序，它接受您希望包含在模板中的js文件数组，并返回脚本标记

差不多

function renderJSTags(jstags) {
    let out = '';

    _.each(jstags, function (js) {
        if (typeof js === 'string') {
            out = out + renderTag({
                'name': 'script',
                'opts': objToKeyval({
                    'src': js,
                    'nonce': `${_res.locals.nonce}` // you should be using nonce along with good CSP
                })
            });
        } else {
            out = out + renderTag({
                'name': 'script',
                'opts': objToKeyval(js)
            });
        }
    });

    return out;
}

function objToKeyval(obj) {
    return _.map(obj, function (val, key) {
        return {'key': key, 'val': val};
    });
}

function renderTag(obj) {
    let tag = '<' + obj.name + ' ';

    _.each(obj.opts, function (opt) {
        if ((obj.name === 'link' || obj.name === 'script') &&
            (opt.key === 'href' || opt.key === 'src') &&
            !url.parse(opt.val, false, true).host) {
            opt.val = opt.val;
        }

        tag += opt.key + '="' + opt.val + '" ';
    });

    if (obj.selfclose) {
        tag += '/>';
        return tag;
    }

    tag += '></' + obj.name + '>';

    return tag;
}

---

这完全可行。在一天结束时，脚本标记是字符串，对吗

我就是这么做的， 用于创建带有Web包绑定输出的json文件

假设它创建了一个

assets.json

文件

在设置express服务器时，需要该文件并将其放入本地文件中。

req.locals.assets=require（'path/to/assets.json'）

现在，您只需要构建字符串标记并包含在模板中。 为此，您可以编写一个ejs帮助程序，它接受您希望包含在模板中的js文件数组，并返回脚本标记

差不多

function renderJSTags(jstags) {
    let out = '';

    _.each(jstags, function (js) {
        if (typeof js === 'string') {
            out = out + renderTag({
                'name': 'script',
                'opts': objToKeyval({
                    'src': js,
                    'nonce': `${_res.locals.nonce}` // you should be using nonce along with good CSP
                })
            });
        } else {
            out = out + renderTag({
                'name': 'script',
                'opts': objToKeyval(js)
            });
        }
    });

    return out;
}

function objToKeyval(obj) {
    return _.map(obj, function (val, key) {
        return {'key': key, 'val': val};
    });
}

function renderTag(obj) {
    let tag = '<' + obj.name + ' ';

    _.each(obj.opts, function (opt) {
        if ((obj.name === 'link' || obj.name === 'script') &&
            (opt.key === 'href' || opt.key === 'src') &&
            !url.parse(opt.val, false, true).host) {
            opt.val = opt.val;
        }

        tag += opt.key + '="' + opt.val + '" ';
    });

    if (obj.selfclose) {
        tag += '/>';
        return tag;
    }

    tag += '></' + obj.name + '>';

    return tag;
}