babel-plugin-es-to-ymodules
v0.1.5
Published
Babel плагин трансформации ES2015 модулей в [YModules](https://bem.info/tools/bem/modules/). Основан на [transform-es2015-modules-commonjs](https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs) и идеях [babel-plugin-bem](https://gi
Downloads
10
Readme
babel-plugin-es-to-ymodules
Babel плагин трансформации ES2015 модулей в YModules. Основан на transform-es2015-modules-commonjs и идеях babel-plugin-bem.
Основные фичи
- [x] Поддержка именнованного экcпорта
- [x] Совместимость с текущими модулями
- [x] Преобразование не
ym:*
вызова в обычныйrequire
- [x] Патчинг старых модулей на работу с ES2015 модулями
(Извлечение
default
значения)
Зачем
Множественные зависимости в YModules затрудняют поиск соответсвия аргумент
<> модуль
, ES стиль позволяет упростить этот процесс и писать меньше кода.
Почему не bem-import
bem-import
меняет подход к работе с модулями (и нам нравится), но это требует больших правок в проекте. Исторически сложившееся использовование ymodules
с завязкой на либах не даёт возможности это реализовать без боли.
В планах
- [ ] Использование нотации импортов из bem-import не реализована, чтобы не вызывать путаницу Возможно будет с ограничениями
- [ ] Технология для
enb
с транфсормацией модулей - [ ] Технология для
specs
с использованием трансформаций
Установка
npm install --save-dev babel-plugin-es-to-ymodules
Использование
import { transformFile } from 'babel-core'
transformFile('path/to/my/module.js', {
plugins : ['es-to-ymodules']
}, (err, res) => console.log(res.code));
CLI
babel --plugins=es-to-ymodules path/to/my/module.js
Ньюансы
- Модуль с
export
обязан иметь имя в шапке/** @module my-module-name */
(для объявления его вmodules.define
) - Модули нужно обрабатывать отдельно, а не в собрабнном бандле.
- Плагин делает только трансформацию, для раскрытия
require
сдедует использовать enb-browserify или другой упаковщик - Модули собираются через deps-файлы
- Требует обкатки (по тестам то всё хорошо...)
1. Декларация модуля
modules.define
/** @module my-block */
import bemDom from 'ym:i-bem-dom'
export default bemDom.declBlock('my-block', {
onSetMod : {
// ...
}
});
Аналогично
modules.define('my-block',
['i-bem-dom'],
function(provide, bemDom) {
provide(bemDom.declBlock('my-block', {
onSetMod : {
// ...
}
}));
});
3. Доопределение модуля
modules.define
/** @module button */
import Button from 'ym:button'
export default Button.declMod({ modName : 'type', modVal : 'link' }, {
onSetMod : {
/* ... */
}
});
Аналогично
module.define('button',
function(provide, Button) {
provide(Button.declMod({ modName : 'type', modVal : 'link' }, {
onSetMod : {
/* ... */
}
}));
});
3. Обычное подключение
modules.require
import bemDom from 'ym:i-bem-dom'
Аналогично
modules.require('i-bem-dom', function(bemDom) {
});
4. Подключение либ из node_modules
modules.require
import bemDom from 'ym:i-bem-dom'
import mobx from 'mobx'
Аналогично
modules.require('i-bem-dom', function(bemDom) {
const mobx = require('mobx');
});
Более подробные примеры можно постмотреть в тестах.
License
MIT