使用React来开发类Vue单文件组件范式的开发框架Lesx新鲜出炉

发布时间:2019-05-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了使用React来开发类Vue单文件组件范式的开发框架Lesx新鲜出炉脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Lesx

例子

gIThub地址:lesx-example

是什么

Lesx@H_777_10@提供了一种开发范式,可以让开发者使用类似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'
        }
    }
}

脚本宝典总结

以上是脚本宝典为你收集整理的使用React来开发类Vue单文件组件范式的开发框架Lesx新鲜出炉全部内容,希望文章能够帮你解决使用React来开发类Vue单文件组件范式的开发框架Lesx新鲜出炉所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。