@advdominion/babel-plugin-nunjucks

Плагин для babel-loader, позволяющий использовать шаблонизатор Nunjucks внутри JS-файлов.

Usage no npm install needed!

<script type="module">
  import advdominionBabelPluginNunjucks from 'https://cdn.skypack.dev/@advdominion/babel-plugin-nunjucks';
</script>

README

babel-plugin-nunjucks

Плагин для babel-loader, позволяющий использовать шаблонизатор Nunjucks внутри JS-файлов.

Установка

yarn add @advdominion/babel-plugin-nunjucks

Использование

Код для преобразования должен находиться в переменных, имена которых указываются в массиве varNames, и быть шаблонным литералом. Пример:

const nunjucksTemplate = `
    {% from "./item.njk" import item as item %}
    
    <div class="items">
        {% for n in range(0, 10) %}
            {{item()}}
        {% endfor %}
    </div>
`;

Пример конфигурации Webpack:

[
    {
        test: /\.js$/,
        exclude: [/mocks\.js$/],
        use: [
            {
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                },
            },
        ],
    },
    {
        test: /mocks\.js$/,
        use: [
            {
                loader: 'babel-loader',
                options: {
                    compact: false,
                    plugins: [
                        [
                            '@advdominion/babel-plugin-nunjucks',
                            {
                                templatesFolder: 'src/templates/',
                                varNames: ['nunjucksTemplate'],
                            },
                        ],
                    ],
                },
            },
        ],
    },
];

Опции

  • templatesFolder - обязательный параметр, путь до папки с файлами шаблонов.
  • varNames - Массив, обязательный параметр. Имена переменных для преобразования кода шаблонизатора.

Важно: Параметр cacheDirectory в опциях babel-loader должен быть отключён.