用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

webpack重构小程序开发

Rolan 2019-3-4 00:11

小程序开发痛点编写模板时通常是以下这种语法:!--index.wxml-- view class="container" view class="userinfo" button wx:if="{{!hasUserInfo canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" ...

小程序开发痛点

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

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

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

view.container
	view.userinfo(bindgetuserinfo='getUserInfo' open-type='getUserInfo')
		button
		image.userinfo-avatar
		text.userinfo-nickname {{userInfo.nickName}}
	view.usermotto
		text.user-motto {{motto}}

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

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

解决方案:借鉴vue

<template lang="pug">
    // 模板内容
</template>
<script>
	// 脚本内容
</script>
<style lang="sass">
    // 样式内容
</style>

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

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

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

3、通过引入css预处理工具提升css编写效率

如何实现

要实现上述一系列的任务,大体上的流程是这样的:首先启动一个task任务,确定需要被编译的文件的路径和输出文件的路径,即遍历pages下面像index,logs这样一个又一个的页面,然后对每个页面后缀名.mina的文件进行词法的分析,从里面抽取到template、脚本和样式,分别对应这三类文件进行相应的plugin的操作:template使用pug进行编译,脚本的话使用了一些新语法比如async,await,需要进行babel编译,样式文件的话,使用sass-loader插件进行编译。等上述编译完成后的内容输出到指定的文件夹下面。

将模板样式脚本抽离到单独文件的中间件就是我们的loader

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 果糖酱 来自: 果糖酱的博客