使用React來開發類Vue單文件組件範式的開發框架Lesx新鮮出爐

Lesx

例子

github地址：lesx-example

是什麼

Lesx提供了一種開發範式，可讓開發者使用相似vue的單文件模式來開發React應用，作到了style/template/script三元素分離。它提供了一個webpack loader，能夠將下面的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 an antd button!');
            $setState({
                name: 'a new name',
            });
        }}>antd button</Button>
    </div>
</template>

<script>
    module.exports = {
        props: {
            valid: true
        },

        state: {
            name: 'xiangzhong.wxz'
        },
    };
</script>

轉成React Component!

特性

• 0、沒有任何新語法，所有是JSX基礎語法；
• 一、style/template/script三元素分離，方便代碼維護；
• 二、script中注入的方法及變量在DSL中能夠經過this.xxx的方式使用；
• 三、script中注入的方法會被自動綁定到this做用域；
• 四、DSL中自動支持jsx-control-statements控制流標籤(If/Choose/When/Otherwise/For/With)；
• 五、DSL默認自帶antd組件（能夠配置爲其餘UI組件庫），無需引入，能夠直接在DSL中使用antd全部的組件；
• 六、智能解析DSL所使用到的UI library組件，並按需打包，而不會把整個組件庫所有打包進去，最小化打包後的代碼體積；
• 七、DSL transform後的組件支持components屬性，能夠引入組件庫沒有的其餘組件（自定義或者第三方的）；
• 八、style支持自定義語言(css/sass/less)，默認sass;
• 九、非侵入式，相似svelte，也許後面會改爲自研組件式開發框架而不是基於React。

loader setting

{
    test: /\.lesx$/,
    loader: 'lesx-loader',
    query: {
        loaders: {
            js: 'babel',
            css: 'style!css',
            sass: 'style!css!sass'
        },
        uiLib: {
            libName: 'antd',
            libDirectory: 'lib'
        }
    }
}