babel-plugin-bem-import

BEM imports resolver

Usage no npm install needed!

<script type="module">
  import babelPluginBemImport from 'https://cdn.skypack.dev/babel-plugin-bem-import';
</script>

README

BEM import

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 babel-plugin-bem-import

Babel version

For babel-7 use babel-plugin-bem-import@2 For babel-6 use babel-plugin-bem-import@1

Usage

.babelrc

{
  "plugins": [
    ["bem-import", {
      "naming": "react",
      "levels": [
        "./common.blocks",
        "./desktop.blocks"
      ],
      "techs": ["js", "css"]
    }]
  ]
}

Options

  • naming: bem-naming overrides
  • levels : paths to components declarations
  • techs : list of techs extensions for require in runtime, ['js'] by default
  • 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

    • i18n

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

    For correct working you need to install bem-i18n inside your project.

    npm i -S bem-i18n

    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.react.js:

    import i18n from `b:Attach t:i18n`

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

    babel-import transpiles such code to

    var i18n = (function() {
    var core = require('bem-i18n');

    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 MIT