交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 用webpack4开发小程序的实现方法

    哈,本人是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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • 利用Webpack实现小程序多项目管理的方法

    广而告之:
    热门推荐:
    php cookie 作用范围–不要在当前页面使用你的cookie

    因为在本地测试完全没有问题,所以ssh到远程服务器上(不是发布服务器,建议不要直接在Publish Server上直接改东西),进行了一下断点的测试,最后发现是一个比较复杂的逻辑中有个函数在构造函数中调用了登陆验证。没有验证通过所以就跳走了。 下面我们通过程序来看一下p···

    如何将页脚固定在页面底部(多种方法实现)

    作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见···

    区分C++中的&和&&

    c++的&和&&是两个常用且容易让人混淆迷惑的运算符,其中&符号有三种用途,&&有两种。本文对这两个运算符的用途做简要总结。 &的用途 第一种用途:位运算中的“与”(AND)。位运算十分高效,数据分片时常会用到,例如网络数据报头、IP地址段、UTF-8···

    asp.net Reporting Service在Web Application中的应用

    原先刚装上Reporting Service时还觉得有点神秘,毕竟在做这个项目前还没有真正接触这个微软用于代替水晶报表的报表工具,而且微软似乎还不满足于一个报表工具那么简单。 Reporting Services 是一种基于服务器的新型报表平台,部署在Microsoft® SQL Server™ 200···

    详解JS异步加载的三种方式

    一:同步加载 我们平时使用的最多的一种方式。 <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加···

    汇总网站主流搜索引擎优化攻略

    一个高质量的网站的制作需要SEO优化,无论是日夜更新文章还是优化,这只是一个优化过程,不能达到真正的优化目的。优化的目标是通过搜索引擎向我们展示高质量的内容,而不是简单地交换友情链接和伪原创。那SEO技术还不够简单,概括一下,这是一项需要耐心细致的工作。1、关键···

    25个非常棒的jQuery滑块插件和教程小结

    1.Create a Slick and Accessible Slideshow Using jQuery 效果演示2. Create an Image Rotator with Description (CSS/jQuery) 效果演示3.A Beautiful Apple-style Slideshow Gallery With CSS & jQuery 效果演示4.Fancy Thumbnail Hover Effect w/ jQuery ···

    网站关键词百度指数的高低决定排名优化的难易程度

    有时,我们不得不承认,SEO项目能否顺利进行在很大程度上取决于SEO策略,在相同的条件下,不同的策略可能产生不同的结果。  尤其是当我们做关键词分析时,我们经常会被问到一个问题:关键词的竞争是高还是低?  关键词竞争力分析:百度指数高低 &nbs···

    jquery实现Ctrl+Enter提交表单的方法

    本文实例讲述了jquery实现Ctrl+Enter提交表单的方法。分享给大家供大家参考。具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Text Box Enter</title> &···

    Window系统下自动备份MySql数据库方法

    Window下可以使用Bat批处理文件来对MySql进行备份操作,备份时一般数据量较大的情况可以使用复制文件的方式,但是这种方式要求服务器停机或者停止写入命令,不大使用。如果数据不大,推荐使用mysqldump命令来备份数据库文件为sql文件。使用方法为mysqldump –uroot –ppass···