README
babel-plugin-jsx
一个 babel 插件,使 React 支持类似 VUE 的指令,简化 JSX 书写。
本插件基于 babel 直接操作 AST,所以不会带来任何性能影响,放心大胆的用吧。
用法
安装
npm install -D @cissie/babel-plugin-jsx
在 webpack 中配置 babel 插件,如果项目基于 webpack chain,可直接使用如下代码
config.module
.rule('js')
.use('babel-loader')
.tap((args) => {
const plugins = args.plugins;
args.plugins = [
path.resolve(
__dirname,
'../node_modules/@cissie/babel-plugin-jsx',
),
...plugins,
];
return args;
});
指令介绍
xif 条件选
<div xif={a && b}>123</div>
会被转换为
{
a && b && <div>123</div>;
}
注:如果是 Fragment
<Fragment xif={a && b}>123</Fragment>
xbind 双向绑定
<>
<Input xbind={v1} />
<Radio xbind={v2} />
<Switch xbind={v3} />
</>
会被转换为
<>
<Input value={v1} onChange: e => setV1(e.target.value)/>
<Radio value={v2} onSelect: value => setV2(value)/>
<Switch checked={v3} onChange: value => setV3(value)/>
<Input value={[v1, setV1]} onChange: e => setV1(e.target.value)/>
</>
理论上支持已知的 antd 组件。
注:使用 xbind 时需保证相应的 set 方法已被定义(驼峰命名)
xfor 循环
<Menu xfor={roleList}>
{/* eslint-disable-next-line no-undef */}
<Menu.Item key={item.role_id}>{item.role_name}</Menu.Item>
</Menu>
会被转换为
<Menu>
{roleList.map((item, index) => (
<Menu.Item key={item.role_id}>{item.role_name}</Menu.Item>
))}
</Menu>
注:可以通过设置{/* eslint-disable-next-line no-undef */}来通过 eslint 校验