spa 小程序的研发随笔 --- 预编译

Posted 2021-01-07 z890524

因为是连续写的2篇随笔，废话不多说。直接进入正题。

选择预编译的工具时，笔者采用了gulp。虽然，如今市面上大多采用的多为webpack，使用gulp也是有自己的缘由的。

webpack的最主要特点是可以将项目大多数资源打包为单个Js。h5项目中，打包后可以减少文件的请求数量，而小程序是由微信侧控制，并且依赖目录结构的项目，webpack只能进行配置，分入口打包，最终生成的目录结构还是必须符合小程序的项目结构。

gulp同样可以达到预编译的需求，而且配置相对简单。所以就采用了gulp。

大部分的配置需求，都可以百度到。这里就挑一点关键点做一下讨论吧。

1. 背景图的 base64 转换。这个问题可以使用gulp-base64插件，简单处理掉。但是，背景图和正常使用的 image 图片在相同文件夹下，会同样被打包到dist 目录中。造成冗余，我采用的处理方法是，将背景图和 image 使用的本地图片分开存放，打包时，排除掉背景图的文件夹，仅被打包成base64 存入wxss文件。  all.concat([‘!src/assets/bgImages/**‘])  
2. 实时编译。可能大家第一印象，感觉简单的使用 gulp.watch 直接跑一次相应的任务就好了。但是，简单的这样配置会造成一个性能的问题。每个改动，编译大量文件。每个文件被修改都会触发小程序开发者工具的刷新。就会造成每次保存，都要等很久才会编译成功，看到页面效果。大大的减低编程效率。所以，在 gulp.watch 任务的中，加入了一个回调。
   

   function watchHandle (cb) {
     return e => {
       const newPath = changePath(e.path)
       if (e.type === ‘deleted‘) {
         let distFile = ‘./dist/‘ + Path.relative(‘./src‘, newPath);
         fs.existsSync(distFile) && fs.unlinkSync(distFile)
       } else {
         cb(newPath)()
       }
       console.log(‘File ‘ + e.path + ‘ was ‘ + e.type + ‘, running tasks...‘)
     }
   }
   
    gulp.watch(jsList, watchHandle(js))

   View Code

   watchHandle ，就是接收到修改过的文件，然后将文件传入回调，进行处理的中间方法。
   其中，js 是针对 js 文件的预编译处理的回调方法。之后再讨论。

3. 依照 process.env.NODE_ENV 做不同的配置。例如，开发与生产环境的域名请求。跳转到其他小程序的对应版本。
   采用的方法是，增加 config 目录，存放多个环境的配置文件。在打包时，依照 env 将对应的文件打包到 dist 目录下，并改为 index.js。再app.js 中直接引用，就可以直接取到对应环境的配置。

目前，感觉值得一提的也就只有上面3点。如之前所说，大部分的预编译配置，都是可以百度、谷歌找到，也比我来讲述的更加细致、全面。

完整的包，目前准备在随笔整理完之后，处理掉公司相关的内容，再上传到github开源。如果有需要，可能提前传部分配置。还是要先看各位看官的需要吧。

至于下一篇，就有空的时候再来发吧。应该会写按钮的封装，因为，路由有点问题还在解决中，完成了再来讨论与开源。

下次再见。。