简单使用ESbuild打包工具 ESbuild打包器基于Golang开发，优点在于可多线程打包，直接编译成机器码，ESbuild提供的api可在JavaScript和golang使用，连Vite在很多场景都依赖了ESbuild打包，支持TypeScript和jsx安装npm install esbuild或者yarn add esbuild打包.node_modules.binesbuild app.jsx --outfile=build/index.js --bundle或者package.json"build": "esbuild app.jsx --outfile=build/index.js --bundle"npm run build例子（app.jsx）import React from 'react' import ReactDOM from 'react-dom' const App = () => { return ( <div> <h1>Hallo, Esbuild!</h1> </div> ) } ReactDOM.render( <App />, document.getElementById("app") )index.html<div id="app"></div> <script src="./build/index.js"></script>我本地打包只花64ms就打包好了

browserslist的简单配置 browserslist是查询浏览器列表的工具，browserslisp的配置可写在package.json中，也可以单独写在.browserslistrc配置⽂件中browserslist的配置文件会被Autoprefixer，Babel，postcss-preset-env，eslint-plugin-compat，stylelint-no-unsupported-browser-features，postcss-normalize，obsolete-webpack-plugin工具读取，并且对配置的目标浏览器做适配工作npx browserslist可查看根据条件输出的浏览器列表查看全球用户份额大于0.2%的浏览器npx browserslist "> 0.2%"查询Chrome最新1个版本npx browserslist "last 1 Chrome versions"查看browserslist的默认配置npx browserslist "defaults"browserslist的默认配置为> 0.5% and last 2 versions adn Firefox ESR and not deadnot dead的意思是不输出官方不再维护的浏览器（例如ie10），dead是不维护，not是不输出and就是和，or是或者browserslist的配置package.json（browserslist官方推荐用这个）browserslist": [ '> 0.2%', 'last 1 Chrome versions' 'not dead' ]或者写成"browserslist": [ '> 0.2% and last 1 Chrome versions and not dead', ].browserslistrc> 0.2% and last 1 Chrome versions and not deadbrowserslist数据的优先级：当前项目的package.json的browserslist，当前项目的.browserslistrc，BROWSERSLIST环境变量，browserslist的defaults另外还可以设置development（开发环境），production（生产环境的配置），例如："browserslist": [ 'development':[ 'last 1 Chrome versions', 'last 1 firefox versions', 'last 1 safari versions', '> 5%', ], 'production': [ 'not dead' ] ]

简单了解a11y无障碍 a11y全称为Accessibility，A到y之间有11个字母，因此叫a11y，Accessibility中文翻译为可访问性，也就是无障碍让网站具备无障碍性，可以让一些视觉障碍人士访问该网站，而且就算是其他人士使用，也会因a11y而受益（不因网络慢，css文件丢失而无法正常浏览页面内容）在mdn上有句话：The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.w3c发布了Web内容无障碍指南 (WCAG) https://www.w3.org/Translations/WCAG21-zh/妨碍障碍人士访问web页面常见是视觉障碍，一般需要使用放大镜或者屏幕缩放来访问，严重的可能需要使用屏幕阅读器常见的屏幕阅读器有：NVDA（windows），ChromeVox（Chrome浏览器内置），Narrator（windows内置，也就是我们说的讲述人），VoiceOver（苹果家的，像MacOS，ios，ipadOS都内置了），TalkBack（安卓内置），以及Orca（Linux内置）mdn对于障碍人士可访问性优化提供了建议：1.使用多种方式传达内容，比如从文本到语音或是视频；2.更易理解的内容，例如使用更通俗的语言书写的文本；3.将注意力集中在重要内容上；4.尽量减少干扰，例如不必要的内容或广告；5.一致的网页布局和导航；6.相似的元素，比如未访问的下划线链接使用蓝色而访问过的使用紫色；7.将过程划分为更有逻辑的，必要的步骤并附上进度指示器；8.在不影响安全性的情况下尽可能让网站认证更简单；并且9.使表单容易完成，例如带有清晰的错误消息和简单的错误恢复。而WCAG指南也提供了建议：可感知性（Perceivable）：非文本内容有文本替代，对于视频内容应该提供字幕，确保视感和听感都可浏览，不会因为某些原因导致信息或者结构（可以理解为文本顺序）丢失，应该具备可辨别性（颜色不应该作用区别视觉的唯一手段（针对色盲人士））可操作性（Operable）：页面可通过键盘来操作，而不是唯一依赖于鼠标，提供足够的时间来阅读和使用内容（比如定时可调整，关闭定时，延长定时等等），防癫痫（不使用会诱发癫痫的设计，例如控制闪光的次数），提供导航，查找以及提供内容位置，允许使用键盘之外的设备输入（例如鼠标或者手写板）可理解性（Understandable）：内容应该都是可读，可被理解的（例如设置多种人类语言，比如英文，中文，日文等等，根据操作系统使用语言或者时区设置为默认语言，语言可切换），任何操作都应该具备可预见性（例如关闭一个弹窗，不会导致其他意想不到的情况发生），当输入出现问题应该提示用户哪错了（例如注册时，密码的组合程度等等），当出现用户操作出错时，应该做到操作可逆或者二次确定操作（给予用户检查和纠正的机会）鲁棒性（Robust）：应该在发生某一些系统故障或者网络故障时，确保还能正常工作，而不是罢工或者出错，鲁棒性又叫抗干扰性，健壮性

网站防ddos小技巧 主要是通过kangle web server搭建中间源，实现网站高防ddos，0回源，0误封，最低成本首先需要准备的东西2台在同一个区域的服务器，必须有内网ip，例如2台广州的服务器，这里推荐腾讯云的，最近618和无忧活动，价格少，划得来服务器说明：一个跑源站，一个跑中间源，源站我想你们都有，中间源配置推荐宽带大点的，5m足够了,4m也行1h1g这些配置供参考，如果流量大的就把宽带调高点然后需要一个cdn，能高防ddos和cc攻击的cdn你们如果找不到免费的这里推荐百度云加速cdn一天10g够用了然后准备好了，开始教程源站服务器你们应该都搭建好了，这里我就说说中间源服务器搭建如何linux centos 编译安装kangle web server进行cdn,反向代理等中间源架设上面如果搭建好了，就下载下面的文件隐藏内容，请前往内页查看详情搜索 <mark_host host="源站内网ip" port="80" proxy="1" life_time="10"/> 把源站内网ip改为你服务器源站内网的ip，然后保存然后需要把这个文件里面的内容全部复制并粘贴到路径为 vhs/kangle/etc/config.xml ，里面的config.xml里面的内容全部删除，粘贴上刚刚复制的代码之后保存退出然后一个中间源就搭建好了，如果网站需要使用https，把端口80即上面的port="80" 中的80修改为443即可最后cdn的作用来了将cdn指向中间源公网ip ，然后域名只需要cname解析到cdn就可以了，不需要解析其他ip啥的原理kangle上写内网ip，需要和源站同一个机房的机器，比如说两台广州腾讯云，此时就会有内网ip测试方法：走公网的话，源站被DDOS了，就访问不到了，建议走内网IP，然后把源站IP打进黑洞，网站正常访问，内网的话是不受任何影响{callout color="#4da6f0"}为什么推荐百度云加速？{/callout}你用其他CDN也一样，免费里面国内的，我只推荐百度，付费的话可以有其他选择{callout color="#4da6f0"}如果CDN被DDOS打死会怎么样？{/callout}CDN被打死，他们也就不用做CDN了，而且CDN节点多，就算被DDOS打死一个节点，也基本不会有影响，CDN提供商的客服员工，他们会负责处理这些DDOS攻击。另外，这只是设置中间源防，cc攻击仍然没有解决，cdn一般可以防御cc，自行百度|･ω･｀)

简单使用Express-Web应用框架 Express是基于nodejs的web应用框架（同时也是node的第三库），同时也是很多web应用框架的底层库安装npm install express --save或者安装express-generator脚手架npm install -g express-generator脚手架：初始化项目（demo是项目名）express demo安装依赖npm install运行npm start如果不使用脚手架（main.js）const express = require("express") const app = express() app.get('/',function(req,res){ res.end("hallo world!") }) app.listen(3000)运行node main.js或者（监视nodejs应用中的任何更改并自动重启服务）nodemon main.js访问 localhost:3000 静态文件管理（必须通过/src才能访问src文件夹的静态文件）app.use('/src',express.static('src'))解决跨域问题（依赖于cors模块）app.use(require('cors')())Express连接MongoDB（mongoose）npm install mongooseconst mongoose = require('mongoose') mongoose.connect('mongodb://localhost:27014/test',{useNewUrlParser: true}) const testdb = mongoose.model('testdb',new mongoose.Schema({ _id: Number, title: String })) /*testdb.inserMany([ {_id: 1, title: "abc"}, {_id: 2, title: "xyz"} {_id: 3, title: "abcxyz"} ])*/ app.get('/test',async function(req,res){ res.send(await testdb.find()) })查询MongoDB数据app.get('/test',async function(req,res){ // const data = await testdb.find().skip(1).limit(2) /* const data = await testdb.find().where({ title: 'abc' */ const data = await testdb.find().sort({ _id: -1 }) res.send(data) })skip(1)跳过多少条，limit(2)显示多少条，where()可指定查询某个字段为某个值的数据，sort()表示排序的顺序（1为正序，-1为倒序）app.get('/test/:id',async function(req,res){ const data = await testdb.findById(req.params.id) res.send(data) })访问 localhost:3000/test/2 注意：req和res的区别，req是客户端请求，res是服务端响应插入数据到MongoDB中app.use(express.json()) // 通过express.json()中间件，解析body中的json数据 app.post('/admin' async function(req,res){ const data = req.body // 获取前端post请求的body数据 const dataMain = await testdb.create(data) // body数据create到MongoDB数据库中 res.send(dataMain) })修改MongoDB数据app.put('/admin/:id' async function(req,res){ const data = await testdb.findById(req.params.id) // 寻找目标id data.title = req.body.title // 将请求body的title赋值到数据库中的目标id的title await data.save() // 保存到数据库中 res.send(data) })删除MongoDB数据app.delete('/admin/:id' async function(req,res){ const data = await testdb.findById(req.params.id) // 寻找目标id await data.remove() // 从数据库中删除该数据 res.send({ code: 200 }) })