lesx dsl webpack loader. lesx-example
The loader can transform the following DSL:
<style>
a {
color: red;
}
</style>
<template>
<div>
<a onClick={() => {
alert(1);
}}>点我</a>
{console.log(this.props)}
<If condition={ this.props.valid }>
<div>{this.state.name}</div>
</If>
<Button type="primary" onClick={() => {
alert('I am a button!');
}}>antd button</Button>
</div>
</template>
<script>
module.exports = {
props: {
valid: true
},
state: {
name: 'xiangzhong.wxz'
},
};
</script>into a React Component!
{
test: /\.lesx$/,
loader: 'lesx-loader',
query: {
loaders: {
js: 'babel',
css: 'style!css',
sass: 'style!css!sass'
},
uiLib: {
libName: 'antd',
libDirectory: 'lib'
}
}
}- 0、没有任何新语法，全部是
JSX基础语法； - 1、
style/template/script三元素分离，方便代码维护； - 2、
script中注入的方法及变量在DSL中可以通过this.xxx的方式使用； - 3、
script中注入的方法会被自动绑定到this作用域； - 4、DSL中自动支持jsx-control-statements控制流标签(If/Choose/When/Otherwise/For/With)；
- 5、DSL默认自带
antd组件（可以配置为其他UI组件库），无需引入，可以直接在DSL中使用antd所有的组件； - 6、智能解析DSL所使用到的
UI library组件，并按需打包，而不会把整个组件库全部打包进去，最小化打包后的代码体积； - 7、DSL transform后的组件支持
components属性，可以引入组件库没有的其他组件（自定义或者第三方的）； - 8、
style支持自定义语言(css/sass/less)，默认sass; - 9、非侵入式AOT框架，类似svelte，也许后面会改成自研组件式开发框架而不是基于React（新框架的UI组件库是个问题）。
- style支持
sass/less/css多语言，默认sass； - 支持:
Form.Item子组件写法； - 支持: JSX解构
{...layout}； - template里标签的表达式里面可以直接使用变量，而不用加
this； - template里标签支持
tpl公共模板； - style支持scoped；
- 公共模板(Include标签) 支持；
- 便利性异步框架axios接入；