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


Posted in Javascript onJune 04, 2019

哈,本人是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,但你还记得我们是在小程序环境下嘛,并不能通过<script>标签来引入资源文件啊啊啊,你会不会猛拍脑门,一下就慌了(哈哈)。老办法,我们通过插件解决

const lens = []
let posixPath = ''
const matchIt = chunk.name.match(/\//g)
if (matchIt) {
 matchIt.forEach(it => lens.push(this.prePath))
 // posixPath = './'+lens.join('')
 posixPath = lens.join('')
} else {
 posixPath = './'
}
let posixPathFile = posixPath + 'runtime.js'
let contentSource = this.contentSource.replace('~~~~', posixPathFile)
if (chunk.name.indexOf('runtime') > -1) {
 posixPathFile = posixPath + 'common.js'
 if (hasCommon) {
  contentSource = this.contentSource.replace('~~~~', posixPathFile)
 } else {
  contentSource = ''
 }
}

上述代码片段中,posixPath是我们通过一个小的算法来推算资源引入的路径深度变量,输出并重写源文件chunk,这样我们就解决了资源引入的问题

webpack-dev-server

引入webpack-dev-server能够使得webpack的编译能够简单的输出到硬盘上,webpack默认是内存文件系统,并不输出(当然有其他方法,比如再写个插件或更换文件系统啥的),除了文件输出,webpack-dev-server还能够为我们提供mock数据服务,呵呵~,这里不展开了,大家有兴趣百度一下,还能够为我们访问后台接口作proxy,这里也不展开了。

通过上述操作,我们就能得到小程序结构的对等输出,剩下我们只需要将输出文件导入到小程序编辑器中,接下来就是开发工作了。嗯,这样就可以开始给小程序搬砖了,开心吗?

如果你想参考一下我们的编译代码,可以看这里 https://github.com/webkixi/aotoo-hub/blob/master/build/webpack.xcx.config.js

如果你想了解下我们的架构,可以看这里  https://github.com/webkixi/aotoo-hub

如果你想使用我们的架构,怕不怕?怕的话,你看着办吧,哈哈! 不怕看这里 https://www.npmjs.com/package/aotoo-cli

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
js获取class的所有元素
Mar 28 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
JavaScript正则表达式函数总结(常用)
Feb 22 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
JS实现的对象去重功能示例
Jun 04 #Javascript
JS数组中对象去重操作示例
Jun 04 #Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 #Javascript
ES6中字符串的使用方法扩展
Jun 04 #Javascript
详解vue-cli3多页应用改造
Jun 04 #Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 #jQuery
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
使用tensorflow实现AlexNet
2017/11/20 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
分析python请求数据
2018/08/19 Python
对python:print打印时加u的含义详解
2018/12/15 Python
解析Python的缩进规则的使用
2019/01/16 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
新教师工作感言
2014/02/16 职场文书
《去年的树》教学反思
2014/04/11 职场文书
社区志愿者活动方案
2014/08/18 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
教务处教学工作总结
2015/08/10 职场文书
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS