博哥的二进制世界

前端单元测试是确保应用程序各个部分按预期工作的重要过程。通过自动化测试，开发者可以在更改代码时快速验证功能是否正常。下面是一些常见的前端单元测试工具和框架，以及一些基本的实践和示例。前端单元测试是开发过程中的重要部分，能够帮助确保代码的稳定性和可维护性。通过使用合适的框架和工具，加上良好的实践，可以有效地提高代码质量和开发效率。通过详细的测试，开发者可以在代码更改后更有信心，减少回归错误。

最新版本create-react-app 如何使用css-module首先找到我们的config目录中的webpack.config.js，箭头处的代码，意思是css,scss,less文件，需要以xxx.module.css、xxx.module.scss、xxx.module.less的形式，才能开启css-module以scss为例，新建Login.module.scss之后在Login.tsx中引入Login.module.scss，并使用css-module的写法css module生

create-react-app配置环境变量安装cross-env配置package.json命令创建.env ，.env.development ，.env.production ，.env.uat ，.env.sit，项目中获取当前环境变量安装cross-envnpm i cross-env -D配置package.json命令"scripts": { "serve": "cross-env REACT_APP_ENV=development node scripts/start.j

vscode配置eslint自动格式化报错"The setting is deprecated. Use editor.codeActionsOnSave instead with a source"

前端常用的ESlint配置配置规则配置规则ESlint 是基于规则在检测代码的env：你的脚本将要运行在什么环境中；globals：额外的全局变量；parserOptions：JavaScript 选项。"parserOptions": { // ECMAScript 版本 "ecmaVersion":6, "sourceType":"script",//module // 想使用的额外的语言特性: "ecmaFeatures": { // 允许在全局作用域下使用

vscode保存代码时自动eslint格式化

vscode配置eslint自动格式化报错"Auto Fix is enabled by default. Use the single string form"

vue-cli 如何让Eslint 报错在浏览器控制台输出背景解决办法背景现在新版本的vue-cli创建的项目，eslint的报错已经不在浏览器控制台输出了，而是默认在终端输出然而我们通常习惯在浏览器控制台中做项目的调试，而不会经常看终端的报错，导致往往忽略了eslint的报错。那么应该如何让Eslint 报错在浏览器控制台输出呢？解决办法在根目录新建 vue.config.js 文件, 加入下列配置module.exports = { devServer: { hot: true

vue中使用vue-clipboard2实现文字复制到剪贴板背景安装vue-clipboard2main.js中引入组件中使用vue-clipboard2背景在项目中我们有时候需要实现文字复制到用户剪贴板的功能，供用户粘贴或者存储，比如，银行卡号等私密信息展示不能完整的展示，前端会在银行卡号等私密信息中，只展示一部分，另一部分用 “ *** ”代替，（如银行卡号前端是展示6916 4008 ** **** **1782），而要实现复制真实银行卡号到剪贴板，去支付宝，微信进行绑卡操作的功能，这就可以利用

vue-cli创建vue3+ts项目安装vue-cli脚手架通过vue-cli创建vue3+ts项目安装vue-cli脚手架// 安装npm i vue-cli -S// 查看vue版本vue --version通过vue-cli创建vue3+ts项目vue create myApp选择Manuallu select features选择以下配置，其中choose Vue version选择3.0vue3+ts项目创建成功...

vue-cli配置环境变量项目根目录创建.env文件修改package.json命令行，加上--mode xxx项目中获取环境变量项目根目录创建.env文件①.env.devNODE_ENV=development②.env.uatNODE_ENV=uat③.env.sitNODE_ENV=sit④.env.prodNODE_ENV=production修改package.json命令行，加上–mode xxxpackage.json命令行，-- mode xxx与.env

vue-cli3读取本地json文件背景前端如何读取本地json文件前端存放json文件的位置请求JSON数据封装axios实例封装请求方法页面组件调用请求方法背景一般前端mock数据或者数据量过大且不需要考虑安全问题，或者数据稳定不需要常做变更的场景，这些数据可以由前端进行维护，将数据转为json文件放到前端本地进行读取。由于公司业务，需要在进入页面的时候，一次获取15万条数据用于输入框的模糊搜索，但是这样前端一次性获取如此大量的数据，直接就导致了页面崩溃，加载奇慢。这么大量且不需要时常做变更的数

移动端自适应解决方案vw---以react为例前言安装依赖配置config下的webpack.config.js兼容低版本安卓项目中有遇到的坑todos文章参考前言在之前，我们曾使用过淘宝的lib-flexible实现移动端的自适应解决方案，但是lib-flexible更推荐使用vw作为移动端自适应的解决方案接下来我们将配置vw作为移动端的自适应解决方案（以react为例）安装依赖npm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt

前端使用postcss-px-to-viewport实现移动端或者PC端自适应安装postcss-px-to-viewport配置webpack.config.js或者package.json（二选一即可）postcss-px-to-viewport的缺点安装postcss-px-to-viewportnpm install postcss-px-to-viewport -S配置webpack.config.js或者package.json（二选一即可）方法一：配置webpack.config.

出现VW自适应方案报错already has a 'content' property, give up to overwrite it的原因及解决办法背景及原因解决办法文章参考背景及原因在使用vw自适应解决方案的时候，当引入第三方UI组件库或者使用伪类选择器出现了already has a ‘content’ property, give up to overwrite it的报错。这是因为postcss-viewport-units插件会自动给html元素添加content属性，由此就造成了伪类

从零开始搭建react+typescript+antd项目步骤1：通过create-react-app脚手架创建项目引入antd配置不同环境的打包命令，如测试环境、生产环境步骤1：通过create-react-app脚手架创建项目npx create-react-app ai_video_project_frontend --template typescript在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的

曾经一直用淘宝的lib-flexible作为解决移动端自适应的方案，但是近期一看lib-flexible官网，出现了这样的一段话好吧，那么寻找了下面通过vw来解决移动端的自适应问题的办法，先收藏着https://www.w3cplus.com/mobile/vw-layout-in-vue.htmlhttps://www.w3cplus.com/css/vw-for-layout.htmlhttps://segmentfault.com/a/1190000014185590https://www

背景通过配置webpack，实现px自动转成vw，实现移动端的自适应做法执行以下命令安装依赖：千万注意千万注意千万注意要指定版本，否则会报错，提示依赖需要postcss8以上版本的支持npm i cssnano@3.10.0 postcss-aspect-ratio-mini@0.0.2 postcss-cssnext@3.1.0 postcss-px-to-viewport@0.0.3 postcss-viewport-units@0.1.3 postcss-write-svg@3.0.1 -S

背景在项目打包的时候，我们通常需要根据环境变量来区分不同的环境，以请求不同的后台接口vite配置多环境打包首先看vite官网介绍的方法那么我们在项目的根目录下创建如下的环境配置文件，以uat为例，在项目根目录下创建.env.uat,并新增环境变量VITE_PROJECT_ENV = ‘uat’,需要注意的是，环境变量必须以VITE开头,package.json中配置uat环境的打包命令，在vite build后加上- -mode uat来区分打包环境之后在项目中即可通过以下方式获取到配置的

前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react

SplitChunksPlugin代码分割生成的如2.js，是自动生成的名字，如何让代码分割能生成可以识别的自定义的名字呢使用magic comment修改chunkname这写法的意思是异步引入一个lodash库，当代码分割的时候，将这个打包分割出来的库起chunkName（文件名）为lodash再次打包，发现并没有生效，这是因为我们之前使用了dynamic-import-webpack,这是非官方插件，非官方插件不支持magic comment写法，因此我们需要替换这个插件因此我们需要

webpack成长指北第3章---常用webpack命令及使用webpack命令的方式常用命令全局安装webpack时使用webpack命令项目内安装webpack时使用webpack命令package.json的script新增npm指令使用webpack命令常用命令先说说webpack的常用命令webpack //对项目进行打包webpack --watch // 自动监控文件的改变webpack --display-modules //打包时显示隐藏的模块webpa

webpack成长指北第4章---webpack配置文件为什么需要webpack配置文件编写业务代码创建webpack配置文件编写webpack.config.js配置package.json的script指令打包为什么需要webpack配置文件之前我们执行 npx webpack <打包的入口文件路径> 就能对项目进行打包npx webpack ./index.js // 让webpack打包index.js文件，（指定index.js为项目的入口文件）但是如果只输入npx we

webpack成长指北第5章---webpack的图片引入案例项目目录代码打包loaderurl-loader安装url-loader配置webpackurl-loader的limit案例我们先尝试一下直接引入图片然后打包项目，看看是什么情景项目目录代码index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo

前言通常情况下，webpack的devServer在启动本地项目时，默认都是http协议，但是有时候我们需要测试比如获取经纬度这些功能，就要求我们的协议是https，那么如何配置webpack的devServer,让其在启动项目的时候，默认是https协议呢？如何配置webpack很简单，我们只需要改webpack的devServer的其中一项配置，即可实现启动项目的时候，默认是https协议devServer: { host: '0.0.0.0', port: 8080, https: tr

webpack成长指北第9章---webpack如何对icon字体进行打包前言下载icon图标项目目录项目代码前言在项目中，我们有时候会引入icon字体来实现一些图标的展示，但是之前文章有说过，webpack只识别js文件，那么如何对eot,ttf,svg,woff,woff2等类型的icon字体文件进行打包呢？下载icon图标我们可以先去阿里巴巴矢量图标库中下载所需要的icon图标下载完成后获得这些文件项目目录项目代码index.html<!DOCTYPE html&g

webpack成长指北第2章---安装webpack的正确姿势安装nodejs初始化项目安装 webpack webpack-cli（推荐项目内安装而不是全局安装）接下来我将和大家说说，如何正确的安装webpack安装nodejsnodejs是必须要安装的，可以说是当前前端开发环境必不可少的一部分，很多的依赖包都需要通过nodejs来进行安装我们可以去nodejs官方网站下载最新的nodejs版本，nodejs版本越高，对webpack的打包越有利，速度也更快下载nodejs安装包并安装完成之后，

官方描述：使用持久化缓存提高构建性能；使用更好的算法和默认值改进长期缓存（long-term caching）；清理内部结构而不引入任何破坏性的变化；引入一些breaking changes，以便尽可能长的使用v5版本。通俗版描述：减小打包后的文件体积按需加载支持文件名模式使用long-term caching解决生产环境下moduleIds & chunkIds变化的问题使用cache: {type: “filesystem”}配置实现持久化缓存，提高构建速度优化minSize

webpack成长指北第8章---webpack的CSS Modules打包何为CSS Modules案例CSS模块化打包何为CSS ModulesCSS Modules，样式的模块化，实际上就是所有的类名都只有局部作用域的CSS文件，其有以下几个特点所有样式都是局部化，解决命名冲突和全局污染的问题class类名生成规则配置灵活，可以借此压缩class类名只需引入组件的js,就能搞定组件所有的js和css案例我们先编写我们的项目代码项目目录index.html<!DO

webpack成长指北第5章---webpack的基础配置entryoutputmodeentrywebpack的entry指定webpack打包项目时的入口文件（即指定哪个文件为起点进行打包）entry写法主要有下列几种:第一种webpack.config.jsconst path = require('path'); // 由于webpack无法直接操作文件夹，所以需要引入node的path模块module.exports = { entry: './index.js', //

webpack成长指北第7章---webpack的css\less\scss样式打包前言案例webpack打包css文件安装loadercss嵌套css图片背景css-loader配置项css打包成单独文件添加浏览器厂商前缀安装postcss-loader和autoprefixer项目根目录添加postcss.config.js修改webpack配置webpack打包sass编写scss文件并引入安装node-sass与sass-loader配置webpackscss/sass打包成单独文件webpack打

webpack指北第1章---为何使用webpack背景webpack的打包想法webpack打包示例编写项目代码npm 初始化项目安装webpack和webpack-cli使用webpack打包将生成的main.js引入到html中背景原始的开发，一个html对多个css，js有依赖的时候，就会在一个html文件内引入多个css，js文件，造成浏览器加载的缓慢，也不易于维护，特别是依赖不对应的时候，有些js依赖另一个js，引入顺序错误也会报错，因此需要webpack对这些文件的依赖进行一个管理&lt