0.1.3 • Published 4 months ago

html-tolist-plugin v0.1.3

Weekly downloads
-
License
NET-EASE
Repository
-
Last release
4 months ago

一个基于webpack5.x的调用接口,根据模板生成列表页面的插件

调用外部接口,整合参数后,根据参数规则和本地模板生成对应的列表页面,用于多语言和卡牌库类的插件

  • 依赖html-webpack-plugin,所以必须要使用它
  • 模板语法使用的是ejs
  • 模板文件不能使用html-loader,会冲突
	// 模板页面语法(/src/template/video.html)
	// 变量全部在param中
    <$= param['aaa']$>
    <$= param['bbb']$>
    //配置
    plugins: [
        // html-webpack 插件的配置
        new HtmlWebpackPlugin({
            chunksSortMode: 'manual',
            filename: 'video.html', // 定义一个生成后的名字,最终不会生成此文件
            template: './src/template/video.html', //ejs模板文件
            chunks: ['vendor', './src/js/entry/video.js'] // 模板需要的入口文件
        }),
        // 当前列表插件的配置
        new HtmlToListPlugin({
            template : 'video.html', //模板页,要与上面的 filename 名字一致
            outPath : 'lang/', // 最终列表页输出的目录
            // 请求接口的相关参数
            request : {
                host : 'https://www.host.com', // 域名
                path : '/path/aaaa/', //路径
                data : {
                    id: "123",
                    name : "hahah"
                }, //请求的参数
                headers : {
                    appkey: "1234567",
                    'Content-Type' : "application/json"
                } // 设置请求头的参数
            },
            // 接口请求回来后,格式化给模板的参数
            requestFormat : function(jsonRet){

                var listData = [];
    
                for(let i=0;i<jsonRet.data.length;i++){

                    let item = jsonRet.data[i];

                    listData.push({
                        aaa : item.aaa + "_1",
                        bbb : item.bbb + "_2",
                        id : item.id // 此id为固定字段,生成文件的名字
                    });
                }

                return listData;
            }
        }),
    ]
0.1.0

4 months ago

0.1.2

4 months ago

0.1.1

4 months ago

0.1.3

4 months ago

0.0.2

6 months ago

0.0.1

8 months ago