cles's blog

commonJS规范导入导出模块的方式 导出方式 使用exports对象导出模块exports实质上是node全局的module上的一个属性,它是一个对象。既然是一个js对象，我们就可以在它身上挂载属性和方法。可以这样去挂载 1234exports.name = '张三'exprots.add = function (a, b) { return a + b} 使用module.exports导出模块这种方式导出模块其实本质上是和上面的方式一样的，只不过是一个写法的不同而已。 123456module.exports = { name: '张三', add: function (a, b) { return a + b }} 一般我们现在一个文件里面编写好了各种函数、代码、对象等等，最后使用module.exports导出模块。 12345678910111213141516function add(a, b) { retu ...

CDN 概述cdn全名content delivery network，内容分发网络，是一种通过网络来分发内容的技术，通过将内容分发到全球各地的服务器，使用户可以更快地访问到内容。 CDN 的优势想象一个场景，你在国内，访问一个国外的网站，如果这个网站的服务器在国外，那么你访问这个网站的速度就会很慢，因为数据要经过很多的网络节点，而且还有可能会被墙，导致无法访问。 而如果这个网站使用了cdn，那么这个网站的内容就会被分发到全球各地的服务器，当你访问这个网站的时候，会自动选择离你最近的服务器，这样就可以更快地访问到内容。 如此一来，我们访问网站的速度就会更快，用户体验也会更好。 再一个比较重要的是，比如一些第三方的库(lodash之类的工具库)，我们可以通过cdn的方式引入，对于项目的打包体积也会有一定的减小。 看一个实战中的例子。 新建一个目录vite-cdn 进入目录，执行yarn init -y 执行yarn add vite -D 新建目录src，src目录下新建一个文件index.js 新建文件index.html 安装lodash,执行yarn add lodash ...

在vite开发服务器中处理跨域问题跨域问题跨域问题仅仅会在浏览器中出现，因为浏览器有同源策略，不允许不同源的请求。 同源策略同源策略是浏览器的一个安全策略，它要求一个域名下的网页只能请求同域名下的资源，不同域名下的资源不能请求。比如：https://www.baidu.com:443下的网页不能请求https://www.google.com:443下的资源。 浏览器对于这方面的要求是： 协议相同 域名相同 端口相同 https://www.baidu.com:443https://www.google.com:443 这两个源协议、端口都相同，但是域名不同，所以不满足同源策略。浏览器在处理过程中会先把我们的请求进行放行，但是会对我们的响应进行拦截。 下面这里起一个示例的vite项目进行演示。 新建一个目录 进入目录，执行yarn init -y 执行yarn add vite -D 配置package.json文件，添加如下内容(一些项目启动和打包的命令) 123456{ "scripts": { "dev&quo ...

服务端静态资源文件映射问题问题概述:最近在学习node，前端起了一个demo，正好学习到了鉴权那部分。打算做一个登录的demo验证一下，验证没什么问题。 前端项目打包构建之后，我想直接把构建的文件扔到node的静态资源服务文件夹上 这里是一个vite的打包配置，主要是打包后将文件分割，js在一个目录css在一个目录。 123456789101112131415 build:{ outDir:path.resolve(__dirname, "../../public"), rollupOptions:{ output: { assetFileNames: assetInfo => { if (assetInfo.name && assetInfo.name.endsWith('.css')) { return 'css/[name]-[ha ...

git仓库嵌套问题 前段时间博客站从wordpress迁移到了hexo，然后在迁移的过程中，发现了一个问题，hexo的主题是clone三方开源主题仓库，这个主题项目会放到hexo博客项目的themes目录下，这样就导致了一个git仓库嵌套的问题。 也就是说hexo根目录下有一个.git目录，/hexo/themes/theme/ 下也有一个.git目录。当我们在提交hexo项目的时候，会发现themes目录下的主题项目并没有提交上去。这个时候就要看自己的具体需求了，对于个人博客的需求，我最初的本意是解决一个自己博客网站的一个配置文件备份的问题，我是希望主题文件能够被同步管理。也就是取消这个嵌套。 首先取消这个嵌套，肯定是先要删除内层git仓库的.git目录。 然后尝试记录git add <this_directory_path>跟踪这个目录,但是发现并没有生效。 这时候开始警觉了，我打算拉一个新的分支做这个事情(因为之前没注意这个嵌套问题，导致配置文件丢失。血的教训，手动恢复了大半天)。 git checkout -b fix-n ...

这几天一直都在学习vite,在vite的源码中，有一个很重要的插件就是postcss。在这之前，我只是听说过这么一个名词，并不知道它用来干啥的，它的定位又是什么。直到我一边学习，顺着好奇心看了一下postcss的文档，才发现，原来postcss是一个很强大的工具。 建议是阅读英文文档，中文文档可能不是最新的，而且有些内容可能不全面。 官网的第一行介绍就是 是一个用 JavaScript 工具和插件转换 CSS 代码的工具 看完官网的介绍之后，我的脑子里面出现了一句话：postcss之于css，就像babel之于js。 postcss的作用 从can i use中获取最新的css特性，然后使用postcss插件来转换css代码。让我们的css代码能够兼容各个浏览器。 将实验性的css特性转换成标准的css代码。 css代码压缩,会删除所有的空格、注释、重复的代码等。输出一个.min.css文件。 css模块化 stylelint,css代码检查,避免一些低级错误。类似于eslint。 在学习的过程中，也理清了它和sass、less、stylus的关系。 sass、less、s ...

Vite中css模块化的处理这些全都是在node端实现的。 vite在读取到main.js中引用到的css文件 使用fs模块去读取css文件的内容 然后创建一个style标签，文件的内容注入到这个标签里面 将这个style标签插入到index.html的head标签里面 原本的css内容会被替换成js脚本，方便后续的热更新 index.css的内容css文件被替换成了js脚本文件内容被插入到head标签里面12345html, body { width: 100%; height: 100%; background: #646cff;} 以上便是vite处理css文件的流程 为什么要进行模块化的处理，因为在实际开发中，对于一些样式类的命名，在团队中可能你开发了一个组件，写了一个样式类名叫.content，在协同开发中，另一个人也写了一个样式类名叫.content。这样就造成了样式冲突。 下面来介绍模块化的处理，在vue模板文件中,我们常常会这样写 123<template></template><script&g ...

你是一个码农，拿到了一个新的项目，项目使用了 Vite 作为开发工具。拿到项目的第一件事，当然是把项目先跑起来。跑起来？这个时候通常会先看项目的相关说明文档，如何安装依赖，如何启动项目等等。于是看完项目相关文档后，你使用了npm install安装了项目依赖，然后使用npm run dev启动项目。项目启动后，你看到了一堆日志，然后打开了浏览器，看到了项目的首页。 这个时候你可能会想，Vite 是如何启动的呢？为什么我只需要运行npm run dev就能启动项目呢？这篇文章就来探讨一下 Vite开发服务器的启动原理。 开发服务器开发服务器，这就涉及到了服务器端的东西，通常我们会使用 Node.js 来搭建一个服务器。Vite 也是如此，它使用了一个 Node.js服务器来启动项目。但是他是如何解析项目中的.vue文件的？浏览器又不认识.vue文件没办法渲染呀。等等等等还有很多问题需要解决。这里看一张图 这是一个示例工程，可以看到开发服务器给我们返回了一个 App.vue 文件 可以看到里面其实都是 js 的语法格式,这是因为 Vite在启动时会将 .vue 文件解析成一个 js 文 ...

vite环境变量的配置在实际开发中，往往会有很多套环境，比如开发环境、测试环境、生产环境等，而这些环境的配置往往是不一样的，比如接口地址、域名等。vite提供了一种简单的方式来配置环境变量。 配置好环境变量有哪些好处? 代码的可维护性更高，不同环境的配置分开管理，方便维护。设想一个场景，现在有开发环境、测试环境、预发布环境、生产环境4个环境，每个环境的接口地址都不一样，那么每次切换环境都需要手动修改接口地址，这样不仅容易出错，而且非常麻烦。假如项目是涉及一些敏感的信息，万一手动配置出错，会造成非常严重的后果。 vite环境变量的配置vite提供了一个import.meta.env对象，我们可以通过这个对象来获取环境变量。 这里给一下示例项目的目录结构 123456789101112---test-vite |---.env |---.env.development |---.env.production |---.env.test |---.index.html |---.main.js |---.package.json |--- ...

什么是构建工具构建工具，顾名思义，用于构建项目的工具，重点在于理解构建的意思。生产环境中，项目代码运行在各种环境中，web 应用的项目代码运行在浏览器上。而技术的革新，推出了各式各样的前端框架(vue、react、angular)各种更高级与方便的编程语言，比如 js 的超集 typescript,各种 css 预编译语言 less、sass。这些东西极大的提升了开发效率。但是需要思考的一个问题是，浏览器只认识 js、css、html 代码而不认识上面提到的这些高级编程语言。所以在这中间就存在一个转换的过程，简而言之，构建工具就是用于编译项目代码的，编译成浏览器能看懂的代码。 开发者只需要把产品开发出来交付就好了，而我们客户考虑的可就多了在很久以前，网页基本上都是静态的、简陋的，相当于一份赛博报纸。这个时候压根不需要什么构建工具，只需要把信息放到页面上就行了。随着技术的发展，js的出现，网页开始变得花里胡哨了起来。这个时候项目的复杂度变得更高了，出现了许多新的语言或者框架，便于开发者团队进行开发与管理。有一天团队开会，客户提了新的需求，要产品能够兼容各式各样的浏览器。因为不同的浏览器内 ...