Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bem/webpack-bem-loader
Webpack BEM loader
https://github.com/bem/webpack-bem-loader
bem bem-react bem-react-core webpack
Last synced: 10 days ago
JSON representation
Webpack BEM loader
- Host: GitHub
- URL: https://github.com/bem/webpack-bem-loader
- Owner: bem
- License: other
- Created: 2016-09-09T14:16:57.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-07-29T23:34:39.000Z (over 4 years ago)
- Last Synced: 2024-04-26T21:47:56.338Z (7 months ago)
- Topics: bem, bem-react, bem-react-core, webpack
- Language: JavaScript
- Size: 325 KB
- Stars: 24
- Watchers: 22
- Forks: 13
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Webpack BEM loader
[Webpack](https://github.com/webpack/webpack) loader for [bem-react-core](https://github.com/bem/bem-react-core)
BEM entities auto resolver for custom import strings:
``` js
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
``` js
// 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
``` js
// 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](https://en.bem.info/toolbox/sdk/bem-naming-entity/#naming-conventions) 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`. 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](https://github.com/bem/webpack-bem-loader/tree/master/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.
```sh
$ cat blocks/Attach/Attach.i18n/tr.js
module.exports = {
"Attach": {
"button-text": "Dosya seç",
"no-file": "dosya seçilmedi"
}
};
```
inside `Attach.js`:
```js
import i18n from `b:Attach t:i18n`
console.log(i18n('button-text')) // → Dosya seç
```
`webpack-bem-loader` transpiles such code to
```js
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