https://github.com/bem/webpack-bem-plugin
https://github.com/bem/webpack-bem-plugin
bem build react webpack
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bem/webpack-bem-plugin
- Owner: bem
- Created: 2018-01-29T10:43:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-25T12:59:36.000Z (over 8 years ago)
- Last Synced: 2025-06-08T13:41:52.984Z (about 1 year ago)
- Topics: bem, build, react, webpack
- Language: JavaScript
- Size: 53.7 KB
- Stars: 1
- Watchers: 15
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Webpack BEM plugin
Simple steps to use [BEM](https://en.bem.info/methodology/quick-start/) in your [React](https://reactjs.org/) project:
1. Write components as [bem-react-core](https://github.com/bem/bem-react-core) declarations
2. Use [bem-import-notation](https://github.com/bem/bem-sdk/tree/master/packages/import-notation#notation) to `import` or `require` components
3. Define project structure in `bemrc` config file
4. Build project using [webpack](https://github.com/webpack/webpack) and **Webpack-BEM-plugin**
5. Enjoy :wink:
## Examples
> npm run build-examples
Each example has its `public/*.html`.
* Char table ([source](examples/char-table)) `js` `no-sets` `no-babel`
* Few components ([source](examples/few-components)) `js/css` `sets` `babel`
* Promo ([source](examples/promo)) `js/css` `sets` `library` `plugins` `babel`
## Plugin options
|Name|Type|Description|
|----|----|-----------|
| **`[techs]`** | `{String[]}` | List of techs in project to build. Default is `['js']` |
| **`[techMap]`** | `{Object}` | Maps techs to actual file extensions. Tech with no mapping treated as file extension as is. Example of custom mapping: `{ js: 'react.js' }` |
| **`[libs]`** | `{Object}` | Stores inline `bemrc` configurations for some libraries. Use when a library has not its `bemrc` file and adding it in library codebase is complicated |
| **`[plugins]`** | `{Function}` | Callback returns 3rd party plugins with no "child-compiler" support. Example is [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) |
## Run tests
> npm test
## Known issues
* [Flat](https://en.bem.info/methodology/filestructure/#flat)-scheme [is not supported](https://github.com/bem/webpack-bem-plugin/issues/6)
* [No windows support](https://github.com/bem/webpack-bem-plugin/issues/4)
* [No i18n support](https://github.com/bem/webpack-bem-plugin/issues/7)
## License
Code and documentation copyright 2018 YANDEX LLC. Code released under the [Mozilla Public License 2.0](LICENSE.txt).