FE 每周问题总结

FE 每周问题总结

---

这篇文章，旨在不在分散的记录每周遇到的问题

---

2020/04/13 add typeof判断类型

---

2020/04/13 add js内存溢出bug

---

2020/04/21 add 区分 prettier eslint

---

2020/05/15 add webhooks

---

2020/06/01 add yarn vs npm

---

2020/06/21 add 单元测试

---

2020/06/28 add 时间标准化

---

2020/07/02 add 环境变量

---

2020/07/04 add 前端构建

---

2020/07/07 add 浏览器缓存策略

---

浏览器缓存

深入理解浏览器的缓存机制

前端构建

这个话题真的是老生常谈了，记录一些最近独立部署项目遇到的问题和答案

环境变量

无论前后端项目一般都会有 production development test 等若干个环境，而一般前端项目在不同环境下请求的接口地址也有所不同，因此我们通常通过替换环境变量的方式实现这些地址的可配置，而本次使用过程中闹了个乌龙，即区分不开 NODE_ENV 与 mode 的关系

cross-env使用

模式（Mode）

浅入浅出理解webpack中的NODE_ENV及新特性mode

官方文档

而同时在 cli 中设定 mode 和 NODE_ENV 是可以同时生效的，但是环境变量文件走的和 mode 指定的值一样即 mode=development 走的配置文件即为 .env.development

• process是Node的一个全局变量，提供了当前Node进程的信息，它可以在脚本的任意位置使用，不需要通过require命令加载
• NODE_ENV其实就是由nodeJS暴露给执行脚本的一个环境变量，通常用来帮助我们在构建脚本中判断当前是devlopment还是production环境
• NODE_ENV=development在windows环境下会报错，需要改为set NODE_ENV=production，为了解决这个差异，可以使用cross-env跨平台的设置和使用环境变量,这里就不解释具体使用方法了。

"scripts": {
    "build": "cross-env NODE_ENV=production node build/webpack.prod.js",
    "start": "cross-env NODE_ENV=development node build/webpack.dev.js"
},

这样，就可以在webpack.config.js中使用process.env.NODE_ENV了，但是要注意不能在webpack.config.js引入的模块中使用，要想在模块当中直接使用，我们还需要一些配置。

• webpack4之前可以使用DefinePlugin插件配置

  • webpack4版本之后可以通过mode选项实现

• 通过npm script设置的NODE_ENV和通过DefinePlugin、mode选项定义的NODE_ENV是两个相互独立的变量

  • NODE_ENV=developmen这种方式定义的NODE_ENV只能在当前脚本中生效，是个runtime。

注意：⚠️ NODE_ENV 和 mode 是两个不一样的东西，如果没有在npm script脚本中
设置NODE_ENV，但在webpack.config.js中设置了mode，那么我们在webpack.config.js中console出process.env.NODE_ENV的值就是undefined，因此如下代码可能就达不到我们想要的效果

即： 要想在配置文件中通过 process.env.NODE_ENV 区分配置就需要在 script 中进行设置 NODE_ENV

let env = process.env.NODE_ENV === 'development' ? 'none' : 'production';

自动构建

详解webpack-dev-server的使用

目前前端自动化构建一般就是使用 webpack 了，那么为什么使用 webpakc-dev-server ,而 webpack 自动构建生成的 dist 文件夹为什么不能直接运行了呢？

• 为什么使用 webpakc-dev-server
• webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时.

---

• 为什么构建生成的 dist 文件夹的 index.html 不能运行
• 前端本地开发时如何解决通过ajax请求产生的跨域的问题。直接通过浏览器打开（类似file:///的访问形式，即file协议）就会报错，本地页面ajax()请求本地页面，须通过服务器环境运行，类似：一般的做法是通过本地配置nginx反向代理进行处理的，除此之外，还可以通过nodejs来进行代理接口，因此平常开发的时候用 webpack-dev-server 即可，

那么除此之外可以通过 serve index.html 来进行启动，详情参考 serve

时间标准化

有很多处理时间的库，比如 dayjs moment.js，但其实在 format 时间的时候会踩坑

• HH:MM:SS 和 HH:mm:ss 是不同的 reference:Time and Date Formats

单元测试

在我的服务端学习笔记(1) 中有介绍过集成测试和单元测试的区别，最近写业务代码需要写单元测试,因此对于 jest的使用也有了一些新的认识，下面列举几个常用配置项：

更多信息可以参考开发文档：JEST

前端单元测试之Jest

聊一聊前端自动化测试

很全面的 VUE 单元测试文档：VUE Test Utils

• moduleNameMapper
  • in jest 就是根目录的意思
• collectCoverage
• collectCoverageFrom

前端单元测试覆盖面：

• 涉及逻辑更改后视图的变化
• 涉及进入组件后 dispatch action 的触发
• 工具函数是否正确返回

注： 前端单元测试将更注重于显示层面的测试，不是像集成测试那样去和服务端进行数据交互，因此耗时也将大幅度减少，因此可以利用 husky (git hooks make easy)将其集成到 git 工作流中

yarn vs npm

Difference between npm and yarn

npm和yarn的区别，我们该如何选择?

两者都是「包管理器」，yarn 是为了弥补 npm 安装速度慢，日志多以及旧版本的 npm 不 lock 依赖导致出现的一系列问题（但是后来 npm 更新加入了 package-lock.json）

yarn: Yet Another Resource Negotiator

webhooks

什么是webhook

概念

webhook是一种web回调或者http的push API，是向APP或者其他应用提供实时信息的一种方式。Webhook在数据产生时立即发送数据，也就是你能实时收到数据。这一种不同于典型的API，需要用了实时性需要足够快的轮询。这无论是对生产还是对消费者都是高效的，唯一的缺点是初始建立困难。

Webhook有时也被称为反向API，因为他提供了API规则，你需要设计要使用的API。Webhook将向你的应用发起http请求，典型的是post请求，应用程序由请求驱动。

区分 prettier eslint

搞懂 ESLint 和 Prettier

ESLint 是什么呢？

是一个开源的 JavaScript 的 linting 工具，使用 espree 将 JavaScript 代码解析成抽象语法树 (AST)，然后通过AST 来分析我们代码，从而给予我们两种提示：

• 代码质量问题：使用方式有可能有问题(problematic patterns)
• 代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)

prettier

ESLint 主要解决了两类问题，但其实 ESLint 主要解决的是代码质量问题。另外一类代码风格问题其实 Airbnb JavaScript Style Guide 并没有完完全全做完，因为这些问题"没那么重要"，代码质量出问题意味着程序有潜在 Bug，而风格问题充其量也只是看着不爽。

Prettier 声称自己是一个有主见 (偏见) 的代码格式化工具 (opinionated code formatter)，Prettier 来不需要我们再思考究竟是用 single quote，还是 double quote 这些乱起八糟的格式问题，Prettier 帮你处理。最后的结果，可能不是你完全满意，但是，绝对不会丑，况且，Prettier 还给予了一部分配置项，可以通过 .prettierrc 文件修改。

所以相当于 Prettier 接管了两个问题其中的代码格式的问题，而使用 Prettier + ESLint 就完完全全解决了两个问题。但实际上使用起来配置有些小麻烦，但也不是什么大问题。因为 Prettier 和 ESLint 一起使用的时候会有冲突

相应的插件：

eslint-plugin-prettier

typeof 判断类型

最近在项目中使用lodash时提示isFunction函数已经deprecated了，无奈想自己验证是否为函数，只好====>

MDN,typeof

js内存溢出bug

我对于这件事情的处理还是过分的依赖国内网站，应该拓宽一下戏路

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

=======>最终问题通过更新node版本进行解决