前端踩坑系列《二》

时间:2022-07-25
本文章向大家介绍前端踩坑系列《二》,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

前言

之前怀着忐忑的心情写了前端踩坑系列的第一篇,感觉有点粗制滥造,不管是排版方面还是问题的表达方面都有待提升,但也得到了一些鼓励。不管怎样,都会坚持去做!相对于第一篇,自己还是做了一些改进。

  • 以后这个系列的话,每篇三个问题,这些问题可能不一定是我自己遇到的,有可能是同事遇到的,也有可能是团队遇到的。问题会以 top 3top 2top 1 的形式带给大家
  • 排版上采用了一个大佬写的微信排版编辑器工具,最大的好处是支持 markdown,而且代码的主题可以选择

Top 3

问题描述

在打包过程中,我们所希望的肯定都是按需打包,要不然我们最终出来的目录将会很大。 看这段代码

  1. let api
  2. if (process.env.IS_WX_MINI) {
  3. api = require('./index.mp').default
  4. } else {
  5. api = MST.default.api
  6. }
  7. export default api

我们希望在 web 端打包的时候,不会去打包 ./index.mp 目录下的东西。但实际的情况是,并没有做到忽略这个路径。那么问题出现在哪里?

问题解决

其实在 web 端打包的时候,看process.env.IS_WX_MINI 值为 undefined,这是因为我们在web中webpack 的 DefinePlugin 配置中没有配 IS_WX_MINI 这个参数。配置 webpack

  1. config = merge(config, {
  2. plugins: [
  3. new webpack.DefinePlugin({
  4. 'process.env': {
  5. NODE_ENV: '"development"',
  6. IS_WX_MINI: 'false'
  7. }
  8. })
  9. ]
  10. })

这个时候就可以了。查了一下 DefinePlugin 这个插件的使用,发现它确实有这种能力。 如下所示:

但实际上还是有一个问题,就是不仅 undefined 这个条件没有办法识别并按需加载,我们的试验中,就算手动赋值条件为false 也是没有做到按需加载。

那么自己尝试得出一个结论,所有的条件判别都应该通过 DefinePlugin 去做才能做到按需加载

参考

webpack DefinePlugin

webpack 中为什么要使用 define Plugin

Top 2

问题描述

在开发的时候,在某个文件夹下,我们称它为 comp,添加了文件夹以及文件, git 都没有办法追踪到。

测试发现:

  • 在该目录下,在 comp 下面,之前的文件进行修改,可以追踪,所有新增的文件以及文件夹都没有被追踪
  • 其他项目新建的文件夹均可被追踪

复现遗漏点

  • 新建一个和该文件一样名称的文件,eg: comp

问题解决

方法一

首先,我们第一反应肯定是 .gitignore 文件的配置出现了问题。然而看了一下,并没有忽略…

方法二 清除 git 缓存。

  1. git rm -r --cached .

没有作用!

方法三 大神的解法,发现有全局配置可以进行文件的忽略(这个操作最好不要用…)

一般的路径在 /Users/用户名 下面,文件名为 gitignore_global.(这是一个隐藏文件)。

然后,我们编辑里面的内容即可(跟普通项目中 .gitignore 类似)。

参考: Git 全局忽略

问题总结

  • 不要随意修改全局配置的东西。这个我印象中没有修改,目前认为是操作一些可视化的 git 工具导致。如: sourceTree

Top 1

问题描述

在 APP 中,执行了一定的操作后, APP 闪退 机型:IOS8

问题解决

发现执行了这一句就偶尔会崩溃,既 APP 会闪退。(这个 success 是结果设置结果反馈中的成功情况下的相关设置)

alert(JSON.stringify(this.resultFeedback.success)); // 执行这一句 crash

那为什么?

可能原因一

可能异步操作了这个数据,毕竟是偶现的,我怀疑是不是异步哪里会修改到这个数据导致闪退。结果并没有发现相关的异步操作。

可能原因二

success 下面的数据有问题,数据如下,我们可以发现,下面的嵌套是很深的,有没有可能是因为 JSON 嵌套层级或者数据量的问题导致 APP 闪退的呢?

为了验证这一点,如果我们在上面一句代码上加上以下这一句,这样 success 的值就只是一个空对象了。再在真机上测试,没问题了!!!

this.resultFeedback.success = {};

发现并没有重现 crash 的问题。那我们试下得出一个大胆的猜想(未官方验证)

嵌套层级太深的 JSONIOS8 下面可能会导致 crash

其实还有一种可能就是 JSON的数据量过大会导致 IOS8 crash,但其实数据量很小,所以我否决了这种可能。

参考: Website repeatedly reloads, then crashes on iPhone 4: iOS 8.0.2 & iOS 8.1.2