使用React來開發類Vue單檔案元件正規化的開發框架Lesx新鮮出爐

abell123發表於2017-09-07
ReactVue元件框架

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基礎語法；
  • 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、非侵入式，類似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`
        }
    }
}

相關文章