Webpack BEM loader
Webpack loader for bem-react-core
BEM entities auto resolver for custom import strings:
;;;;;;
Install
npm i -D webpack-bem-loader
Usage
In your webpack.config.js
.
Webpack 1
// setting for bem-loaderbemLoader: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-loadermodule: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.jsmodule.exports = ;
inside Attach.js
:
console // → Dosya seç
webpack-bem-loader
transpiles such code to
var i18n = { var core = ; if processenvBEM_LANG === 'ru' return 'Attach' if processenvBEM_LANG === 'en' return 'Attach' if processenvBEM_LANG === 'tr' return 'Attach' }; console // → Dosya seç
process.env.BEM_LANG
is need to be defined. ru
, en
and tr
are taken from langs
option.