Lavas-extension-appshell NPM

扩展

什么是扩展

Lavas 除了能够生成 PWA 项目（通过 lavas init）以外，还提供了“扩展”的机制允许开发者很方便的获取比较通用的新功能，节省时间成本并避免重复开发，类似于我们熟悉 nodejs 的包管理器 npm package

在 npm package 的生态环境中，开发者不单单是使用方，也可以是提供方。在这点上 Lavas 扩展也是相同的，开发者不单单可以使用别人写的扩展，也可以自己提供扩展，只要遵循一定的规则即可。

有关 Lavas 更多的信息可以参考官网 https://lavas.baidu.com/，也欢迎加入 Lavas 开发的大家庭！

appshell

这里要介绍的是目前 Lavas 内置的一个最常用的扩展： appshell，效果如图：

appshell效果

简而言之，appshell 可以帮助开发者套上一层“壳”。除了在壳的界面上可以进行许多操作（侧滑菜单，顶部搜索按钮，底部导航等）之外，因为壳本身会被 service worker 缓存，因此在切换页面时壳能够很快展现，大大提升用户体验，这也是 PWA 的典型应用之一。关于 appshell 更多的信息可以参考这里

安装方式

这里以 appshell 为例，向开发者介绍如何快速把这个扩展安装到 Lavas 项目中。

我们回顾一下安装 npm package 一般需要两个步骤：

运行命令 npm install xxx 安装扩展主体
修改相关代码，添加 import xxx from 'xxx' 或者 const xxx = require('xxx'); 来完成引用

Lavas 安装扩展也需要执行这样两个步骤

安装扩展主体

lavas install appshell

或者简写：

lavas i appshell

执行效果如图：

安装效果

扩展主体安装在 extensions 目录中。

修改引用代码

鉴于 Lavas 引用扩展较 npm 更为复杂，在执行 lavas install appshell 之后，Lavas 会自动提示还有哪些代码需要修改并给出修改建议，正如上图所示的 xxx.recommend.js 这样。

观察这些 recommend 文件，我们着重关注其中的 lavas extensions start 和 lavas extensions end 两个注释之间的部分，这就是需要开发者手动修改的部分。

我们以 core/store.js 举例。在安装扩展前，store.js 的片段大概是这个样子：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export function createStore() {
    return new Vuex.Store({});
}

执行过安装命令后，与之平级会出现一个新的文件 store.recommend.js，文件内容的片段大概是：

import Vue from 'vue';
import Vuex from 'vuex';
/* ======== lavas extensions start ======== */
import {createAppShellState} from 'extensions/appshell/store/module';
/* ======== lavas extensions end ======== */

Vue.use(Vuex);

export function createStore() {
    return new Vuex.Store({
        /* ======== lavas extensions start ======== */
        modules: {
            appshell: createAppShellState()
        }
        /* ======== lavas extensions end ======== */
    });
}

可以看到 recommend 文件中需要重点关注的有两处，作用为引用 appshell 提供的 module，并注入到项目本身的 vuex 中。在将这两处修改并保存到 store.js 之后，store.recommend.js 即可删除，不必保留。

之所以采取这样的“半自动化”的安装方式，主要原因是相较于 npm 的一句 require/import ，Lavas 的引用方式更加复杂；而涉及修改的代码开发者可以自主改动，因此又无法实现通过安装命令直接修改开发者代码的做法。只能采取给开发者提供修改建议，由开发者手动修改这样的折中方案。