webpack重构小程序开发

 

小程序开发痛点

编写模板时通常是以下这种语法：

获取头像昵称{{userInfo.nickName}} {{motto}}

这个时候希望在写标签的时候能支持一套语法，比如根据标签的缩进关系来决定dom的嵌套层次:

view.containerview.userinfo（bindgetuserinfo='getUserInfo'open-type='getUserInfo'）buttonimage.userinfo-avatartext.userinfo-nickname {{userInfo.nickName}} view.usermottotext.user-motto {{motto}}

这就是我们熟悉的哈巴狗语法编写的DOM结构，但小程序是不识别这种语法的，我们需要将这段模板编译成小程序希望的.wxml这种格式。

sass，less，postCss等css预处理工具的出现，为前端编写css样式带来了巨大的遍历，将他们引入到小程序的开发中带来的优点也是显而易见的。

解决方案：借鉴vue // 模板内容

这就是我们所期望的开发小程序的开发模式：

1，dom，脚本，样式写到同一个文件

2，通过指定模板引擎来构建更简洁的DOM结构

3，通过引入的CSS预处理工具提升CSS编写效率

如何实现

XX 要实现上述一系列任务，一般过程如下：首先，汇海一个任务任务，确定要编译的文件的路径和输出文件的路径，即遍历页面下面的页面，如索引，日志。然后，提取带有.mina文件的每个页面的词法分析，并从中提取模板，脚本和样式，并对应于三种类型的文件执行相应的插件操作：模板用pug编译，并使用该脚本。一些新的语法，如async，await，需要用babel，样式文件编译，使用sass-loader插件进行编译。完成上述编译后，内容将输出到指定的文件夹。

将模板样式脚本解压缩到单独的文本软件自定义

这件作品的中间件是我们的装载机