前端： 63 篇

使用 Vite 创建前端项目的时候（例如 Vue 3.0 项目）不会自动添加 ESLint 的配置，但 ESLint 又是维护良好代码规范和方便团队合作的重要工具，所以几乎在每个前端项目中都有 ESLint 的存在。这篇文章我们看一下：

• 如何给 Vite 创建的项目配置 ESLint
• 集成 ESLint 到 VS Code 中
• 避免 ESLint 和 Prettier 冲突。

什么是 ESLint​

ESLint 是一个用于检查 JavaScript 代码的工具。由于 JavaScript 的语法松散，并且是即时编译的语言，所以在写代码的时候很容易出现错误，这些错误只能在运行的时候才能够发现，并且难以确定具体的位置，这样就让开发的效率大大的降低。

而 ESLint 可以让我们在编写的代码的时候，就检查语法错误，提前发现 BUG，例如拼写错误。它还可以自定义代码规范，这样在团队合作开发的时候，写出风格统一、清晰的代码，使得代码更容易阅读和维护。

在编写技术文档的时候，我们经常会给用户展示一些常用的快捷键，那么在 HTML 中，我们可以使用原生的 <kbd> 标签来表示一个按键，它也是 HTML 语义化的标签之一，相比于使用 <div> 等通用的、无意义的标签，使用语义化的 <kbd> 可以直接知道这是代表按键的元素。

如何使用 kbd​

<kbd> 是一个行内元素，跟 span 类似，每个按键都放到一个单独的 <kbd> 标签即可，例如下方示例：

环境变量是在开发中，用于设置可配置的信息。例如在前端开发中，我们可以配置 API_KEY、后端服务器地址等。Vite 2.0 支持方便的设置环境变量，这篇文章我们来看一下如何在 Vite 2.0 创建的项目中，创建和导入环境变量。

Vite 2.0 创建的项目中，默认有下面 4 个默认的环境变量：

使用 Vite 2.0 创建的项目，默认不会自动打开浏览器。假设我们运行下面的命令启动 Vite 开发服务器：

npm run dev

yarn dev

pnpm run dev

bun run dev

命令行中会提示访问 http://localhost:3000 这个链接，但是并不会帮我们自动打开浏览器。我们还得手动复制 URL 到浏览器打开，或者使用 ctrl/command + 鼠标左键 来打开链接。

那么要如何让 Vite 2.0 创建的项目，在启动之后自动打开浏览器呢？

使用 CSS 隐藏滚动条，如果直接使用 overflow: hidden 会导致内容不能滚动，要想使用 css 隐藏滚动条，但不影响内容滚动，这里有两种方法：

• 使用 padding 把滚动条移出浏览器视口。
• 使用 ::webkit-scrollbar 伪元素选择器（简单，但兼容性不好）。

下面分别来看一下这两种方法。

自从 2010 年第一份工作接触了前后端半分离的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码，你可以按照实际情况应用到 React 或 Vue 的项目中。

前端组件化发展历史​

在讨论组件化开发之前，我们先看看前端组件化开发的发展历史。网页开发刚起步时，并没有『前端』这个概念，更不用提组件化了。当时，网页只是作为可以在浏览器中浏览的富文本文件，开发网页就是使用一些标签让浏览器解析并显示。受制于 HTML 只是描述式的语言，网页中的代码没有办法复用，即使是类似的页面，都需要复制粘贴大量的重复代码：

我们在编写前端项目的时候，经常会遇到跨域的问题，当我们访问后端 API 的 URL 路径时，只要域名、端口或访问协议（如 HTTP 和 HTTPS）有一项不同，就会被浏览器认定为跨域。另外我们也会经常重复编写后端的域名，例如 https://example.com/api/some_end_point，https://example.com/api/other_end_point，针对这两种情况，可以直接用同一个配置来解决，即代理配置。 ​

不管是 Vite 还是 Webpack，这些打包工具都支持设置前端代理，它们能够把对某一段 URL 的访问直接转换成另一个真实的后端 API 地址，这样前后端就视为使用了相同的域名、协议和端口，就避免了跨域的问题，还能避免繁琐的反复编写域名。

我们前端工程师在开发完前端项目，并把它打包成静态的网站之后，需要上传到服务器上，才能让互联网上感兴趣的用户来访问。我们之前在阿里云购买了一台远程服务器，它现在还不能用来让用户访问网站，因为静态的 HTML 文件是通过 HTTP 协议来发送到用户的浏览器上的，那就需要在服务器里面安装一个服务器程序，来处理 HTTP 请求，并把我们的静态网站发送到用户的浏览器上。 常见的服务器程序有：

• Nginx。
• Apache。
• Tomcat。
• IIS。等等

在做完网站之后，我们需要把它部署到服务器上。服务器就是一台远程的虚拟电脑，在它上面安装服务器程序后，可以把我们部署的网站呈现给访问网站的用户。比较专业且大型的服务器提供商有：

• 阿里云。
• 腾讯云。
• 华为云等。

它们的服务基本上都差不多，这里就以阿里云为例来看一下，如何购买一台适合自己的服务器。 选择服务器最重要的是 **CPU、内存和带宽，**需要根据网站的用户量、所占的空间（例如图片、数据的大小）来选择对应的配置。

• 如果性能太差，就无法应对大量用户的访问，比如说 1000 人同时访问。
• 如果带宽比较小，对于大访问量也会造成页面响应延迟。

假如你要搭建的是个人网站、博客之类的，那么可以选择一个比较基础的配置，这样也比较便宜。

因为各个浏览器厂商对 JavaScript 规范的实现并不统一，这让开发者在日常开发中经常遇到兼容性的挑战，一些新的 JavaScript/Ecmascript 特性并不能在所有的浏览器中使用，这样还需要针对各个浏览器编写不同的代码，才能让代码能够兼容。

后来，一些工具出现了，它们可以让我们编写有最新特性的 JavaScript 代码，然后把代码转换为各个浏览器都支持的版本，这种工具叫作转译器（Transpiler）。Babel 就是其中一个且比较著名，几乎每个前端框架中都使用到了，它可以把包含新特性的代码转换为 ES2015 版本，或者其它指定的版本来实现最大兼容性。