侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

用webpack4开发小程序的实现方法

微信(小程序)  /  管理员 发布于 3年前   339

哈,本人是REACT系开发者,工作中需要不停的折腾webpack,为了顺带学习VUE的开发思想和思路,顺理成章的请缨为公司小程序打个框架基础。前期也去了解了下各个小程序开发框架,大体上是通过转义的思路来解决小程序和VUE/REACT的模板、逻辑关系,不做展开讨论了。只是从本人角度分享通过webpack来构建小程序的开发架构。

通过观察小程序的原有架构,不难发现其已经是一套比较完善的mvvm架构了(类VUE),融合了VUE及REACT的一些特点(以VUE为主),但却有一些不足,缺失了前端开发人员常用的npm包的引入,动态样式的编译等等提升开发效率的工作环境、模式。因此我想如果通过webpack4来为原有架构做一个有益的补充,这样原生架构不就很完美了吗?

思路

对等编译输出小程序项目的所有文件(严格按照小程序需要的文件及目录结构输出)。js/wxs通过babel编译输出,wxml/json直接输出,wxss通过stylus编译输出(我们使用stylus开发样式),顺带使用webpack抽离公共模块文件common.js,并将runtime运行时抽离作为一个独立文件。这样既精简了代码,又享用到了webpack为我们带来的好处。嗯,看上去很简单嘛,实际上却是踩了不少的坑!脚上的茧老厚了~~~

webpack module配置

module: { rules: [  {   test: /\.(wxml|axml)/, // 为支付宝小程序留了个伏笔,哈哈   use: [    relativeFileLoader(isWechat ? 'wxml' : 'axml'), // 这里使用file-loader简单封装了一下    'extract-loader',    'html-loader'   ]  },  {   test: /\.(jp(e?)g|png|gif)$/,   use: relativeFileLoader()  },  {   test: /\.wxss$/,   include: SRC,   use: relativeFileLoader(),  },  {   test: /\.wxs$/,   include: SRC,   exclude: /node_modules/,   use: [    relativeFileLoader(),    {     loader: 'babel-loader',     options: {      babelrc: false,      presets: [       'es2015',        'stage-0'      ]     },    }   ]  },  {   test: /\.js$/,   use: {    loader: 'happypack/loader',    options: {     id: 'babel'    }   },   exclude: /node_modules/,  },  {   test: /\.styl$/,   include: SRC,   use: [    relativeFileLoader(isWechat ? 'wxss' : 'acss'),    'stylus-loader'   ]  } ]},

熟悉webpack的同学通过上面的moudle配置应该能够看出资源文件编译的思路,当然直接这样配置肯定做不到正确编译,还有一些坑需要踩

全文件entry

为了对等输出,我们需要把所有文件整理为entry给webpack处理,这样的好处是js能够使用npm包,所有文件都能够支持热更新机制(webpack的热更新响应非常快,gulp的热更新很难精细控制,当项目足够大的时候,响应很慢)

function entries(dir) { var jsFiles = {} let _partten = /[\/|\\][_](\w)+/; let re_common = /(.*)\/common\// const accessExts = ['.wxml', '.wxss', '.styl', '.wxs', '.json', '.png', '.jpg', '.jpeg', '.gif'] if (fse.existsSync(dir)) {  globby.sync([`${dir}/**/*`, `!${dir}/js/**/cloudfunctions`, '!node_modules', `!${dir}/dist`]).forEach(function (item) {   if (!re_common.test(item)) {    if (!_partten.test(item)) {     const fileObj = path.parse(item)     const xcxSrc = path.join(dir, 'js')     if (~item.indexOf(xcxSrc)) {      const fileStat = fs.statSync(item)      const relativeFile = item.replace(xcxSrc, '')      let relativeKey = relativeFile.replace(fileObj.ext, '').substring(1)      if (fileObj.ext == '.js') {       jsFiles[relativeKey] = item      }      else {       if (accessExts.indexOf(fileObj.ext) > -1) {        jsFiles['nobuild__' + relativeFile] = item       }      }     }    }   }  }) } return jsFiles}

上述是entry的生成代码,涵盖了小程序目录结构下的所有需要的文件,并加上了一些特定的标识,以便于后续文件编译输出

非JS文件的输出

在entry方法中我们将wxml,wxss等文件作为entry统统灌给webpack去处理,正常我们使用webpack时是不会把非js文件作为entry输给webpack的。你猜webpack会报错吗,----- 哈哈,报错就讲不下去了,webpack会傻傻的把每个entry文件都当做js来对待,并且正常输出,*.wxml.js,等等,这是什么鬼,我并不需要这样的东东。加个插件来处理一下

compiler.hooks.compilation.tap('wpConcatFile', (compilation, params) => { compilation.hooks.beforeChunkAssets.tap('wpConcatFile', () => {  compilation.chunks = compilation.chunks.filter(function (item) {   return item.name.indexOf('nobuild__') == -1  }) }) ... ...}

nobuild__是在生成entry代码是给非js文件加上的prefix前缀,在插件中我们排除掉非js,将正常的js文件重新chunk,js文件就能够正常的输出了,那么那些非js文件呢?webpack并不会编译生成它们,中途它们就会被module中的xx-loader处理完,然后被file-loader给甩出去了。

全局变量替换

将全局变量替换为微信小程序的wx,我们通过插件解决

const globalVar = 'wx'.........let contentObj = compilation.assets[file]let code = contentObj.source()code = code.replace(windowRegExp, that.globalVar);contentObj = new RawSource(code)compilation.assets[file] = new ConcatSource( contentSource, '\n', '\/**auto import common&runtime js**\/', '\n', contentObj,);

通过上述代码不难看出,我们读取了每个文件的源码,并将全局变量window/global替换为wx,再进行源码重组。

运行时文件引入

我们需要引入runtime.js和common.js文件,runtime运行环境是webpack为每个编译文件插入的用于解析define, require, module等等这些的文件引入方法,为了精简文件,我们将之抽离为runtime.js,common.js为我们抽离出来的公共模块文件。在web/h5下引入这些资源是不是so easy,但你还记得我们是在小程序环境下嘛,并不能通过

  • 分类目录
  • 人生(杂谈)
  • 技术
  • linux
  • Java
  • php
  • 框架(架构)
  • 前端
  • ThinkPHP
  • 数据库
  • 微信(小程序)
  • Laravel
  • Redis
  • Docker
  • Go
  • swoole
  • Windows
  • Python
  • 苹果(mac/ios)
  • 相关文章
  • 小程序开发之跳转微信直播示例api(0个评论)
  • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
  • 小程序开发之多端框架:taro(0个评论)
  • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
  • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
  • 近期文章
  • 如何优雅处理async await错误推荐:await-to-js库(0个评论)
  • lodash工具库(0个评论)
  • 在Laravel项目中使用中间件方式统计用户在线时长功能代码示例(0个评论)
  • 在Laravel中构建业务流程模型(0个评论)
  • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
  • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
  • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
  • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
  • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
  • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
  • 近期评论
  • 博主 在

    2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
  • xiaoB 在

    2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
  • BUG4 在

    你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
  • 博主 在

    go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
  • Jade 在

    如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
  • 2017-10
  • 2018-01
  • 2020-03
  • 2021-06
  • 2021-10
  • 2022-03
  • 2023-02
Top

Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

侯体宗的博客