lapp原生模块化开发打包方案

模块化开发仍是前端开发的主要开发方式，但是打包和以往不同了。以往的模块化开发，往往是大家熟知的基于第三方框架做的模块化，比如AMD和CMD等，都需要借助第三方模块加载器。打包的过程也是分析文件依赖，比如把依赖超过4次的文件打包到core.js里面，然后保留一个入口文件，多个页面就是多个入口这样。最后把静态资源发布到cdn，整个流程也还好，只是不太方便。

现在模块化开发，主流都是基于ES6的模块开发，基于es6 pollyfill和第三方打包工具tree shake的技术，可以实现比较好的兼容性和性能。现在h5开发占半壁江山，更是如此。现在主流的开发模式是以页面为区分，以性能为导向，强调页面秒开，加载和响应速度。每个页面可以做个打包，模块共享可以借助es6 和npm 管理node_module，主导的思想还是尽量减少模块之间的依赖，这样轻便的打包开发模式就产生了。

基于rollup就可以很好地实现，可以参考我做的基于lapp框架 开发的脚手架开发库：lapp_startup ，开发起来真的很是爽。

欢迎大家给我点星星，也欢迎大家使用lapp进行开发，lapp支持 class和函数式编程两种模块开发方式，基于JSX 模板开发模式，开发起来真的很快！

// button component
import { l } from "lapp"

const state = {
    count: 0
}

export const actions = {
    addCount: () => {
        state.count++;
        MyButtonView.$update()
    }
}

export const MyButtonView = ({props, children}) =>(
    <button onClick={actions.addCount} {...props}>{children}{state.count}</button>
)

主项目文件

//main component
import { l, app } from "lapp"
import { MyButtonView, actions as MyButtonAction } from "../component/button/button"

let state = {
    aa: -1,
    bb: -1,
    checked: true,
    data: [{ name: "11", href: "22" }, { name: "33", href: "44" }]
}

const actions = {
    log: (e) => {
        console.log(e.target.value);
        state.inputVal = e.target.value
        MyButtonAction.addCount()
    },
    handleClick: () => {
        state.data.push({ name: "77", href: "88" })
        BoxView.$update()
    },
    handleCheck: (e) => {
        state.checked = !state.checked
        console.log(state.checked)
        BoxView.$update()
    },
    compute: (data) => {
        let dd = []
        state.data.forEach((item, index) => {
            dd.push(<div class="title">
                {item.name}
            </div>)
        })
        return dd
    }
}

const BoxView = ({ props, children }) => (<ul style="list-style: none;">
    &yen;
    <li className="item" onClick={() => alert('hi!')}>item 1</li>
    <li className="item">
        <input type="checkbox" checked={state.checked} onChange={actions.handleCheck} />
        <input type="text" style="border:1px solid #f40000;" onInput={actions.log} />
        <p>{state.inputVal}</p>
    </li>
    <li onClick={actions.handleClick} forceUpdate={true}>text</li>
    <MyButtonView className="button">hello, button</MyButtonView>
    {actions.compute(state.data)}
</ul>
);

//main
console.time("render virtual DOM with FP")
app(document.querySelector("#app"), BoxView, MyButtonView)
console.timeEnd("render virtual DOM with FP")