前端踩坑系列《二》

2020-09-23 10:50:09 浏览数 (1)

前言

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

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

Top 3

问题描述

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

代码语言：javascript复制
  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

代码语言：javascript复制
  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 缓存。

代码语言：javascript复制
  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 的问题。那我们试下得出一个大胆的猜想（未官方验证）

嵌套层级太深的 JSON 在 IOS8 下面可能会导致 crash

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

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

json api git windows webpack

0 人点赞