Nature's Powerful Meme

    webpack-dps-spa-plugin

    0.1.3 • Public • Published

    webpack-dps-spa-plugin

    单页面多路由骨架屏插件

    AutoDpsPlugin

    Kind: global class

    new AutoDpsPlugin(options)

    自动渲染骨架屏插件

    Param Description
    options 插件配置
    options.server 渲染骨架屏本地服务配置
    options.server.port 本地服务端口,默认从8000开始寻找
    options.server.proxy 本地服务反向代理配置与devServer.proxy一致,如果为value为函数则为中间件,否则为http-proxy-middleware
    options.insertEl 骨架屏元素插入到html的父标签,默认 #skeleton
    options.routeMode 路由模式,默认 history
    options.limit 同时渲染骨架屏路由数量,默认 5
    options.staticDir 打包输出目录(index.html输出目录),默认 项目根目录下的dist目录
    options.enableAutoSkeletonRoutes 是否采用自动配置路由,必须使用 auto-routing 插件
    options.skeletonRoutes 需要渲染的骨架屏路由配置,enableAutoSkeletonRoutes 为 false 可用
    options.await 等待时间(ms),默认0

    options.skeletonRoutes

    Param Description
    name 必须和路由定义的name一致
    path 匹配当前路由的正则
    pathname 访问路由的path地址,例如: /mn/demo
    skeletonId 骨架屏路由ID,唯一即可

    dps.config.js 额外参数

    Param Description
    inject 注入window变量值
    injectProperty 注入window变量属性名
    launch puppeteer 启动参数配置

    使用

    webpack chainWebpack 添加插件

    config.plugin('AutoDpsPlugin')
        .use(AutoDpsPlugin, [{
          enableAutoSkeletonRoutes: true,
          limit: 5,
          server: {}
        }]);

    enableAutoSkeletonRoutes

    添加 vue-cli-auto-routing 插件,在路由页面配置<route>

    <route>
    {
        "meta": {
            "skeleton": true
        }
    }
    </route>
    

    or

    <route>
    {
        "meta": {
            "skeleton": {
                "name": "home",
                "path": /^\/mn\/home/
                "pathname": "/mn/home",
                "skeletonId": "home"
            }
        }
    }
    </route>
    

    自定义返回数据

    dpsServer: {
        proxy: {
            '^/app-gateway/demo': (req, res) => {
                res.json({code: 200, data: {}});
                res.end();
            }
        }
    }

    Install

    npm i webpack-dps-spa-plugin

    DownloadsWeekly Downloads

    9

    Version

    0.1.3

    License

    none

    Unpacked Size

    19.4 kB

    Total Files

    8

    Last publish

    Collaborators

    • zhouxianjun