webpack-bem-loader

Webpack BEM loader

Usage no npm install needed!

<script type="module">
  import webpackBemLoader from 'https://cdn.skypack.dev/webpack-bem-loader';
</script>

README

Webpack BEM loader

Webpack loader for bem-react-core

BEM entities auto resolver for custom import strings:

import Block from 'b:block';
import Block from 'b:block m:modName';
import Block from 'b:block m:modName=modVal1|modVal2';
import BlockElem from 'b:block e:elem';
import BlockElem from 'b:block e:elem m:modName';
import BlockElem from 'b:block e:elem m:modName=modVal1|modVal2';

Install

npm i -D webpack-bem-loader

Usage

In your webpack.config.js.

Webpack 1

  // setting for bem-loader
  bemLoader: {
    naming: 'react',
    levels: ['./pathToBlocks'],
    // OR:
    // levels: {
    //     './pathToBlocks': {
    //         default: true,
    //         scheme: 'nested',
    //         naming: 'origin'
    //     }
    // },
    techs: ['js', 'css'],
    techMap: {
        js : ['react.js']
    },
    langs: ['ru', 'en']
  },

Webpack 2

// setting for bem-loader
module: {
    rules: [
        {
            test : /\.react\.js$/,
            loader: 'webpack-bem-loader',
            options: {
                naming: 'react',
                levels: ['./pathToBlocks'],
                // OR:
                // levels: {
                //     './pathToBlocks': {
                //         default: true,
                //         scheme: 'nested',
                //         naming: 'origin'
                //     }
                // },
                techs: ['js', 'css'],
                techMap: {
                    js : ['react.js']
                },
                langs: ['ru', 'en']
            }
        }
    ]
}

Options

  • levels : Required option — paths to components declarations
  • naming: bem-naming overrides naming
  • techs : list of techs extensions for require in runtime, ['js'] by default. First tech will be default export
  • techMap : mapping of techs to extensions. Example: { 'js' : ['react.js', 'react.ts', 'react.es'], 'css' : ['post.css'] }
  • langs : list of langs in which resloves '.i18n' tech
  • generators : customization of code generators by tech. The function when it is provided receive one argument: files with signature Array<String>. This is the list of files of the specified technology, got from current import. Examples: { js : null } or { js: (files) => files.map(file => `require('${file.path}')`).join(',\n') }. Each generator must return String. Check ./generators for examples.

    i18n

    .i18n - represent special technology that provides the opportunity to localize components.

    On file system:

    blocks/Attach/
├── Attach.react.js
├── Attach.i18n
│   ├── en.js
│   ├── ru.js
│   └── tr.js
└── Attach.spec.js

    en.js, ru.js and tr.js are keysets and should be common.js modules.

    $ cat blocks/Attach/Attach.i18n/tr.js
module.exports = {
    "Attach": {
        "button-text": "Dosya seç",
        "no-file": "dosya seçilmedi"
    }
};

    inside Attach.js:

    import i18n from `b:Attach t:i18n`

console.log(i18n('button-text')) // → Dosya seç

    webpack-bem-loader transpiles such code to

    var i18n = (function() {
    var core = require('/absolute-path-to/webpack-bem-loader/generators/i18n/core');

    if (process.env.BEM_LANG === 'ru') {
        return core().decl(require('../Attach.i18n/ru'))('Attach')
    }

    if (process.env.BEM_LANG === 'en') {
        return core().decl(require('../Attach.i18n/en'))('Attach')
    }

    if (process.env.BEM_LANG === 'tr') {
        return core().decl(require('../Attach.i18n/tr'))('Attach')
    }
})();

console.log(i18n('button-text')) // → Dosya seç

    process.env.BEM_LANG is need to be defined. ru, en and tr are taken from langs option.

    License MPL-2.0