Совместное использование фильтров nunjucks через узел и браузер

Question

Я пытаюсь найти способ заставить мой фильтр работать с обеих сторон.

Вот код, который я имею на узле:

var env = nunjucks.configure(__dirname + '/../templates', {
    express: app
});

env.addFilter('date', function(str){
    return 'ok';
});

И на стороне браузера:

var env = new nunjucks.Environment();
env.addFilter('date', function(str){
    return 'ok';
});

Я хотел бы иметь свой фильтр там, где он будет доступен в этих двух разных средах, но я не нашел решения для этого.

На стороне клиента я использую версию nunjucks-slim. Мои шаблоны предварительно скомпилированы с использованием gulp.

Спасибо за вашу помощь!

Answer 1

Вы можете поместить ваши фильтры в отдельный файл / модуль, где вы передаете env в качестве аргумента.

например.

/**
* @param env The nunjucks environment
*/
function(env){
    env.addFilter('fancy', function(input){
        return 'fancy ' + input
    });

    env.addFilter(...);

    return env;
}

Затем вы можете использовать оболочку UMD ( https://github.com/umdjs/umd), чтобы сделать ее совместимой как с браузером, так и с сервером. Готовая оболочка может выглядеть примерно так:

// custom_filters.js
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof exports === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.custom_filters = factory();
    }
}(this, function () {

    // Return a value to define the module export.
    return function(env){
        env.addFilter('fancy', function(input){
            return 'fancy ' + input
        });

        return env;
    };
}));

Тогда используйте это так:

Узел:

var env = nunjucks.configure(__dirname + '/../templates', {
    express: app
});
require('./path/to/custom_filters')(env);

Браузер (глобальные):

var env = new nunjucks.Environment();
window.custom_filters(env);

Браузер (AMD):

define(
    ['nunjucks', 'path/to/custom_filters'],
    function(nunjucks, custom_filters){
        var env = new nunjucks.Environment();
        return custom_filters(env);
    }
);