搜索到
107
篇与
的结果
-
前端常用框架或库收集整理 前端常用框架或库收集整理webcomponenthybrids webcomponent 组件定义库，api简洁好用 https://www.npmjs.com/package/hybridsReact 常用组件react-use 常用的自定义 hooks 合集react-hook-form 最常用 react 表单处理hooks，用来做表单验证处理，提交等react-cool-img react图片懒加载react-cool-inview react元素块内容进入页面可视区域监听组件，类似于react-dnd 拖放效果组件react-sortable-tree 可以排序的树形组件@uiw/react-md-editor md 编辑器，可以自定义控件，如上传等shepherdjs 网站新手引导框架 也有react 组件 https://shepherdjs.dev/docs/react-files-uploading react 文件上传组件 https://www.npmjs.com/package/react-files-uploadingreact-images-uploading react 图片上传组件 https://www.npmjs.com/package/react-images-uploadingreact-intersection-observer react 图片和dom懒加载 https://github.com/thebuilder/react-intersection-observerreact-share 网站分享快速生成按钮和图表的组件鼠标特效库 https://cursify.vercel.app/components/spotlight-cursorNodeJscheerio 用jquery语法来解读提取html文本内容的爬虫内容分析库ora 命令行loading工具consola 命令行人机交互输入工具，可以异步执行多个输入，单选，多选，确认 操作commander 命令行工具，注册命令，指定命令的说明，可选参数，以及要执行的代码，一般配合上面的 consola 来实现命令行工具sharp 图片合成和处理工具，可以修改图片大小，滤镜，网图片上加文字，图片等UI 组件库ElementUI vue 框架使用最多的组件库Framework7 支持所有主流前端框架，三端都有组件库JS 绘图jsplumb 拓扑图绘制框架fabricjs canvas库，支持画图，绑定操作，事件等，让canvas变简单leafer.js 国产 canvas库，支持画图，绑定操作，事件等，让canvas变简单ECharts 不用多说，无人不知，无人不晓Cytoscape.js 主要用来画连线图，如关系图谱JS 动画Tween.js 一个简单的 JavaScript 补间（比如css3的ease-in）动画库Snap.svg 绘制svg的类库，超级简单方便的apiAnime.js 类似jquery和jquery-ui的动画库，直接操作domwaypoint.js jquery监听dom进入浏览器可是窗口区域插件parallax.js 视距差效果JS工具函数html-to-text 将html内容转换成纯文本去除富文本内容字符串格式处理工具，支持多层级处理驼峰，下划线，大驼峰等的转换 https://www.npmjs.com/package/humps音视频相关webm-muxer/mp4-muxer 音视频录制并生成视频工具库 https://www.npmjs.com/package/webm-muxerjs-audio-recorder https://www.npmjs.com/package/js-audio-recorder 音频录制，支持录制时的声波显示等，非常强大代码编辑器Ace editor Ace是一个用JavaScript编写的嵌入式代码编辑器。它与Sublime，Vim和TextMate等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和JavaScript应用程序中。作为与codemirror同类的现代编辑器，ACE同样拥有mode进行语法解析，实现编辑器的智能感知型功能。CodeMirror 是一个用JavaScript为浏览器实现的多功能文本编辑器。它专门用于编辑代码，并附带一些实现更高级编辑功能的语言模式和插件。其核心仅提供编辑器功能，其他功能通过丰富的API和插件实现。CodeMirror的使用基于特定的程序语言模式(mode)，它对特定的语言进行语法解析(parse)，使编辑器能够在解析结果基础上进行语法高亮，实现具有上下文感知(context-aware)的代码补全、缩进等功能。monaco editor monaco是VS Code的代码编辑器，同时也是一个开源代码编辑器，可以嵌入到Web应用程序中xterm.js 快速实现网页版的命令行工具，支持快速创建ws连接到服务器常用命令行工具yalc 将本地开发的npm包管理起来，其他项目可以快速本地调试它，类似 npm linkmole mac电脑清理和管理工具cloc 代码行数统计，可以统计目录，支持很多种语言jq 解析json对象的文本内容，摒弃传统的正则匹配写文档的框架vitepress vue官网文档的写作工具dumi 阿里的文档编写打包工具docsify 可以不用build，直接将md加载成html文档storybook 写文档的基础上，可以加入demo内容，类似ant组件使用文档社区整理常用库10个按钮特效 http://www.adobeedu.com/%E8%BF%9910%E4%B8%AA%E6%8C%89%E9%92%AE%EF%BC%8C%E6%8A%8A-css-hover-%E7%9A%84%E5%88%9B%E6%84%8F%E5%8F%91%E6%8C%A5%E5%88%B0%E6%9E%81%E8%87%B4%E4%BA%86/HTML5+CSS3 最酷的 loading 效果收集 https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html网站评论或留言平台cudis 简单的留言工具，可以使用官方接口，也可以自己部署 https://cusdis.com/artalk https://artalk.js.org/ 支持递归评论，讨论内容，开源免费下载本地部署上面两个都是全免费的Remark42 https://remark42.com/demo/ 和上面的一样，可以嵌套评论，需要登录，支持常见的三方登录Disqus 家喻户晓了，但是有广告，不想广告就付费Utterances https://utteranc.es/ 完全基于github issue系统的评论系统，只支持github登录 -
webpack5.x+React18搭建移动端项目 webpack5.x+React18搭建移动端项目项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic在项目开发中，每开始一个新项目我都是使用现有的脚手架，这非常便于快速地启动一个新项目，而且通用的脚手架通常考虑地更加全面，也有利于项目的稳定开发；不过对于一个小项目，根据需求自己搭建可能会更好，一方面小项目不需要脚手架那么丰富的功能，另一方面可以提高对项目的掌控度以方便后期的扩展本项目基于公司内一个移动端项目搭建，旨在搭建一个快速，高效，灵活的前端开发环境。项目中使用了最新版本的webpack构建工具，最新版本的react前段框架和react-router6.x特性搭建，通过本项目，可以可以熟悉和巩固以下基础技能webpack5构建原理和基本配置，以及打包性能的提升和使用方法react18的feature，如，根组件的创建方式等const root = createRoot(document.getElementById('root') as Element); root.render(<RouterProvider router={router} />);react-router6 的新特性和单文件路由的使用方式wecpack5 中配置移动端响应式方案 rem布局的方法其他webpack插件和loader的使用项目仓库地址 https://github.com/MarvenGong/webpack5-react18-ts-basic接下来，详细说明项目中的各个配置环境webpack5的一个重要特性，会根据配置的mode属性是develop还是production来判断是否需要开启构建优化，这个优化过程是指对构建产品的优化，如js uglify,压缩，tree-shaking 等等，所以，我们的开发环境，是可以不用用到那些优化操作的，那么就需要把mode指定成 develop 这样可以在我们保存代码后，获得更快的热更新速度，我这里为了简单，直接在npm script中制定env，在webpack.js中使用package.json 中的scripts"scripts": { "serve": "cross-env NODE_ENV=development webpack serve --config webpack.config.js", "dev": "npm run serve", },PS: 切忌在NODE_ENV=development顺手写上&&写上了就设置不上了webpack.config.js 中使用环境变量const isDev = process.env.NODE_ENV === 'development'; mode: isDev ? 'development' : 'production',基础配置1、entry入口，配置webpack构建的入口文件我这里使用了package.json 中的name属性的值作为主文件的名称entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), },2、output 制定输出文件路径和文件名output: { // 开发环境不使用hash文件名 filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, // 输出文件前会先清空目标目录的文件 },3、stats 指定webpack在控制台的输出内容stats: { all: false, assets: true, errors: true, assetsSort: '!size', // 按照文件大小倒序 entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', },4、devServer 配置本地开发服务器，如端口，代理等，此处不做详细说明，5、devtool 制定sourcemap文件生成方式devtool: isDev ? 'inline-source-map' : 'source-map', // 开发环境直接打包到js文件中，现网环境打包到独立文件，我的处理方式是在自动化部署工具中将sourcemap文件保存到特定地方，线上排查的时候使用6、resolve 配置6-1 extensions 指定webpack需要处理的文件扩展名类型6-2 alias 路径别名，注意要去 tsconfig 中相应配置，否则代码中会报ts错误项目使用的loader处理module说明ts-loader 处理typescript 语法以及es6特性（包含了babel-loader）style-loader 处理样式资源到html中，开发环境使用MiniCssExtractPlugin.loader 处理样式资源到单独的样式文件中，生产环境使用css-loader 让我们可以在js(x)或者ts(x)中使用import语句导入样式文件 如 import ‘./style.less’postcss-loader 对css进行编译处理，本项目主要用来处理 px2rem 将我们的样式中的px转为rem（只能针对import导入的样式文件，行内样式不生效）less-loader less编译为cssurl-loader 处理图片和字体等资源，小于limit则编码，大于则处理路径，包含了 file-loader（file-loader 主要作用是使我们可以在js(x)或者ts(x)中使用import语句导入静态资源文件 import ‘./xxx.png’）使用到的plugins做打包后处理说明copy-webpack-plugin 拷贝 public下的静态资源到 dist 目录clean-webpack-plugin 清理打包目标目录，防止重复文件WebpackBar 美化打包进度显示的插件HtmlWebpackPlugin 处理我们的构建产物到指定的html中，重中之重MiniCssExtractPlugin 压缩我们的css文件，只在生产环境使用好了，有了上面的介绍，就可以直接看我们的webpack配置文件了主webpack.config.js// @ts-nocheck const path = require('path'); const tsImportPluginFactory = require('ts-import-plugin'); const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const smp = new SpeedMeasurePlugin(); const fs = require('fs'); const packageJson = require('./package.json'); const optimization = require('./webpack-configs/optimization'); const config = require('./webpack-configs/config'); const plugins = require('./webpack-configs/plugins'); const isDev = process.env.NODE_ENV === 'development'; const SMP_SWICTH = false; console.log('-------当前环境-------', process.env.NODE_ENV); const wrapConfig = (isDev && SMP_SWICTH) ? smp.wrap : (config) => config; module.exports = wrapConfig({ target: 'web', mode: isDev ? 'development' : 'production', entry: { [packageJson?.name]: path.resolve(__dirname, './src/app.tsx'), }, output: { filename: isDev ? '[name].js' : '[name].[hash].js', path: path.resolve(__dirname, './dist'), publicPath: '/', clean: true, }, // infrastructureLogging: { // level: 'error' // }, stats: { all: false, assets: true, errors: true, assetsSort: '!size', entrypoints: true, modules: false, assetsSpace: 1000, preset: 'minimal', }, devServer: { ...config.dev, historyApiFallback: true, // static: { // directory: path.join(__dirname, './public'), // }, watchFiles: './src/**/*', }, devtool: isDev ? 'inline-source-map' : 'source-map', resolve: { alias: { '@src': path.resolve(__dirname, './src'), '@tea/app': path.resolve(__dirname, './app'), }, extensions: ['.ts', '.tsx', '.js', 'less'], }, module: { rules: [ { test: /\.(jsx|tsx|js|ts)$/, loader: 'ts-loader', options: { transpileOnly: true, getCustomTransformers: () => ({ before: [ tsImportPluginFactory([ { style: false, libraryName: 'lodash', libraryDirectory: null, camel2DashComponentName: false, }, { style: true }, ]), ], }), compilerOptions: { module: 'esnext', }, }, exclude: /node_modules/, }, { test: /\.(le|c)ss$/, use: [ isDev ? 'style-loader' : MiniCssExtractPlugin.loader, // 现网环境才提取css到一个文件中 { loader: 'css-loader', // 使用import语句导入样式 }, { loader: "postcss-loader", options: { postcssOptions: { config: './postcss.config.js', }, sourceMap: true, } }, { loader: 'less-loader', // 转less为css options: { lessOptions: { modifyVars: { '@body-background': '#f5f5f5', }, javascriptEnabled: true, }, }, }, // { // loader: 'style-resources-loader', // options: { // patterns: path.resolve(__dirname, './src/styles/common.less'), // 全局引入公共的scss 文件 // }, // }, ], }, { test: /\.(png|jp(e)?g|gif|woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'url-loader', // 处理图片和字体等资源，小于limit则编码，大于则处理路径，包含了 file-loader options: { limit: 8192, }, }, ], }, ], }, watchOptions: { // 设置不监听的⽂件或⽂件夹，默认为空 ignored: /node_modules/, // ⽂件改变不会⽴即执⾏，⽽是会等待300ms之后再去执⾏ aggregateTimeout: 300, // 原理是轮询系统⽂件有⽆变化再去更新的，默认1秒钟轮询1000次 poll: 1000, }, plugins, optimization: !isDev ? optimization : {}, }); 在根目录下的wenpack-configs 目录中的下面三个拆出来的jswebpack 插件配置 plugins.jsconst path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const WebpackBar = require('webpackbar'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const chalk = require('chalk'); const webpack = require('webpack'); const isDev = process.env.NODE_ENV === 'development'; const config = require('./config'); module.exports = [ new CopyWebpackPlugin({ patterns: [ { from: path.resolve(__dirname, '../public/px2rem-hike.js') } ], }), new CleanWebpackPlugin({ dry: false, // 是否打印删除的内容 }), // 热更新替换 new webpack.HotModuleReplacementPlugin(), // @ts-ignore new WebpackBar({ name: '能碳工场移动端h5', color: '#0049b0', // 默认green，进度条颜色支持HEX basic: true, // 默认true，启用一个简单的日志报告器 reporter: { change() { console.log(chalk.blue.bold('文件修改，重新编译...')); }, afterAllDone(context) { console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 编译完成')); isDev && console.log(chalk.bgBlue.white(' 能碳工场移动端 ') + chalk.green(' 开发预览地址：http://127.0.0.1:' + config.dev.port)) }, }, }), new HtmlWebpackPlugin({ minify: false, chunks: 'all', template: path.resolve(__dirname, '../public/index.html'), filename: 'index.html' }), new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|ja|ko/), ].concat(isDev ? [] : [new MiniCssExtractPlugin({ filename: '[name].[hash].css', })])webpack优化配置 optimization.jsconst CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); module.exports = { minimize: true, minimizer: [ new CssMinimizerPlugin(), '...' // 压缩css 和 js ], splitChunks: { chunks: 'async', cacheGroups: { defaultVendors: { test: /[\\/]node_modules[\\/]/, priority: -10, reuseExistingChunk: true, }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, }, }, }, }; 其他常用需要修改配置 config.jsmodule.exports = { dev: { host: '0.0.0.0', port: 10010, hot: true, open: false, client: { overlay: { errors: true, warnings: false, }, }, proxy: { '/api': { // logLevel: 'debug', changeOrigin: true, pathRewrite: { '^/api': '' }, target: 'http://30.168.123.79', }, }, } };
-
[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突 当我们使用webpack5.x打包项目时，在现网环境需要使用mini-css-extract-plugin将我们的样式打包到独立的样式文件中，使用官方推荐配置能正常运行const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // all options are optional filename: "[name].css", chunkFilename: "[id].css", ignoreOrder: false, // Enable to remove warnings about conflicting order }), ], module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { // you can specify a publicPath here // by default it uses publicPath in webpackOptions.output publicPath: "../", }, }, "css-loader", ], }, ], }, };但是当我们同时使用了 speed-measure-webpack-plugin 插件来打印各个module的打包时间时，就会出现无法正常打包的情况，报错信息如下：Webpack 5 fails as soon as I smp.wrap() my config, with the following error: ERROR in ..../Error.scss Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js): Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started at Object.pitch (.../node_modules/mini-css-extract-plugin/dist/loader.js:50:14)这时候我们需要去判断下，再不需要输出打包时间的情况下，不使用 smp 插件，如，我的方式const wrapConfig = isDev ? smp.wrap : (config) => config; module.exports = wrapConfig({ })
-
fabricjs马赛克笔刷 最近在做一个浏览器插件，其功能是截取当前网页的部分内容，然后像聊天工具截图那样编辑图片，其中的一个工具的给图片打马赛克。实际效果如下通过方案对比最终采用了自定义画笔的方式来实现而不是矩形区域框选的方案。代码如下：PS: 以下代码基于fabricjs 5.2.1 版本生成马赛克笔刷的工具函数 fabric-brush.tsimport { IMosaicPatternBrush } from '@/types/fabric-shim'; import { fabric } from 'fabric'; const mosaicify = (imageData: ImageData) => { const { data } = imageData; const iLen = imageData.height; const jLen = imageData.width; let index; let i; let j; let r; let g; let b; let a; let _i; let _j; let _iLen; let _jLen; // const { blockSize } = this; const blockSize = 20; for (i = 0; i < iLen; i += blockSize) { for (j = 0; j < jLen; j += blockSize) { index = (i * 4 * jLen) + (j * 4); r = data[index]; g = data[index + 1]; b = data[index + 2]; a = data[index + 3]; _iLen = Math.min(i + blockSize, iLen); _jLen = Math.min(j + blockSize, jLen); for (_i = i; _i < _iLen; _i++) { for (_j = j; _j < _jLen; _j++) { index = (_i * 4 * jLen) + (_j * 4); data[index] = r; data[index + 1] = g; data[index + 2] = b; data[index + 3] = a; /* data[index] = 0; data[index + 1] = 0; data[index + 2] = 0; */ } } } } }; export const mosaicBrush = (fabricCanvas: fabric.Canvas): IMosaicPatternBrush => { const squareBrush: IMosaicPatternBrush = new fabric.PatternBrush(fabricCanvas); // getPatternSrc 取得要重复绘製的图形 Canvas squareBrush.getPatternSrc = function() { // 创立一个暂存 canvas 来绘製要画的图案 const cropping = { left: 0, top: 0, width: fabricCanvas.width, height: fabricCanvas.height, }; const imageCanvas = fabricCanvas.toCanvasElement(1, cropping); const imageCtx: any = imageCanvas.getContext('2d'); const imageData = imageCtx.getImageData(0, 0, imageCanvas.width, imageCanvas.height); mosaicify(imageData); imageCtx.putImageData(imageData, 0, 0); const patternCanvas = (fabric as any).document.createElement('canvas'); // 这里的ceateElement一定要使用fabric内置的方法 const patternCtx: any = patternCanvas.getContext('2d'); patternCanvas.width = fabricCanvas.width || 0; patternCanvas.height = fabricCanvas.height || 0; patternCtx.drawImage( imageCanvas, 0, 0, imageCanvas.width, imageCanvas.height, cropping.left, cropping.top, cropping.width, cropping.height ); return patternCanvas; }; return squareBrush; }; 使用// 生成马赛克画笔实例 const brush: IMosaicPatternBrush = mosaicBrush(fabIns); // 这里不能少，否则画出来的内容不会生效，会被其他内容覆盖 brush.source = brush.getPatternSrc.call(brush); // 设置画笔 fabIns.freeDrawingBrush = brush;
-
less循环生成n个样式类 在组件化项目开发中，有时候会遇到这种情况，三方组件不支持通过style属性来自定义样式，只能通过className 来指定class样式类名（如，ant 的 Table 组件），这时候就会有个问题，如果我们希望指定的是动态的高度或者宽度，且这个值是不固定的任意值，我们就无法知道应该指定哪个class名了。这里我采用了一个妥协方案，使用less的循环，事先生成n多个class，在使用的时候，动态匹配这些class中的对应值就行了，如下，使用less生成1-200的高度class。.generate-height(@n, @i: 1) when (@i =< @n) { .height-@{i} { // height: (@i * 100% / @n); height: 1px * @i; } .generate-height(@n, (@i + 1)); }生成的css内容如下：.height-1 { height: 1px; } .height-2 { height: 2px; } .height-3 { height: 3px; } .height-4 { height: 4px; } .height-5 { height: 5px; } .height-6 { height: 6px; } .height-7 { height: 7px; } .height-8 { height: 8px; } .height-9 { height: 9px; } .height-10 { height: 10px; } /*..此处省略11-198..*/ .height-198 { height: 198px; } .height-199 { height: 199px; } .height-200 { height: 200px; } 注意，height的单位最好放到变量前面使用方式：<Table size='small' tableLayout='fixed' loading={dataLoading} pagination={false} dataSource={dataList} style={{ width: '100%', border: borderInfo }} columns={tableColumns} // 读取变量设置class rowClassName={(record, index) => `height-${properties?.cellHeight}`} ></Table>
-
vscode配置备份 { "editor.fontFamily": "'Courier New', Menlo, Monaco, monospace", "editor.tabSize": 2, "editor.fontSize": 14, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "javascriptreact", "html", "vue", "typescript", "typescriptreact"], "explorer.compactFolders": false, "workbench.tree.indent": 12, "workbench.editor.enablePreview": false, "sync.gist": "ac382393a32ea171d130f70b8ed60f4b", "typescript.updateImportsOnFileMove.enabled": "always", "javascript.updateImportsOnFileMove.enabled": "always", "prettier.eslintIntegration": true, "window.zoomLevel": 1, "workbench.iconTheme": "material-icon-theme" }
-
使用webpack打包对外lib时import取到的是空对象或undefined 首先，webpack默认认为你现在正在开发的是一个应用而不是一个对外使用的库，所以默认打包结构是一个闭包，然后模块是作为闭包的参数列表，是个数组，每一项也是个匿名函数也就是说，你在代码中 export 暴露出的对象，都在闭包中，所以也就不会对外暴露对象。解决方案：修改webpack配置文件，在 output 配置中加入如下配置library: 'libName', // libName 为对外暴露的库名称 libraryTarget: 'umd' // 定义模块运行的方式，将它的值设为umd参考官方文档：Output | webpack我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=24299ll4gdokg
-
使用docker搭建一个简单的nginx服务 操作步骤1、在任意目录位置创建Dockerfile 文件，输入如下内容FROM ubuntu/nginx COPY ./index.html /var/www/html/index.html CMD ["nginx", "-g", "deamon off;"]2、 在当前目录新建一个html文件作为静态页面3、 在当前目录执行 docker build -t test:v0.1 . 等待构建完成4、 执行docker images 查看镜像是否构建成功5、 执行docker run -d -p 8082:80 test:v0.16、 在浏览器访问 127.0.0.1：8082 验证是否能访问到上面新建的那个html内容涉及到的内容解释1、 Dockerfile 文件中a、 FROM 指定构建的基础镜像 b、 COPY 将当前空间（Dockerfile所在目录）的文件拷贝到镜像内容中，此处拷贝的是nginx的默认的静态页面地址 c、 CMD 指定执行docker run 指令时默认执行的命令，这里启动nginx2、 Docker 命令a、 docker build -t 指定镜像的tag信息，后续使用镜像的时候讲作为name使用 b、 docker run -d 表示在后台运行docker c、 docker run -p 指定端口映射，这里表示外部端口 8082 映射到当前启动后的容器（container）的80 端口（也就是上面启动的nginx）
-
js复制和粘贴内容 复制-将指定内容添加到粘贴板/** * copyToClip * @param content * @param callback */ export const copyToClip = (content: string, callback?: () => void) => { var aux = document?.createElement?.('input'); aux?.setAttribute?.('value', content); document?.body?.appendChild?.(aux); aux?.select(); document?.execCommand('copy'); document?.body?.removeChild?.(aux); return callback?.(); };粘贴 js不能直接读取粘贴板内容，下面的代码在多数环境下不生效const text = await navigator?.clipboard?.readText?.();我们采取变通的方案来处理。1、在页面中添加一个input输入框，将其绝对定位到页面中不可见的位置<input type='text' id='text-all' key='text-all' onPaste={(e) => handlePaste(e)} style={{ position: 'absolute', top: -10000, zIndex: 10000 }} />监听到ctrl-v事件时，先让上面的input获得焦点，再手动触发他的paste事件，这时input会填充粘贴板中的内容const hideInput: HTMLInputElement = document.getElementById('text-all') as any; hideInput?.focus(); hideInput?.dispatchEvent(new Event('paste', { bubbles: true }));给这个input添加onPaste事件，在事件处理函数中获取input的内容，或者获取粘贴板的内容const clipboardData = e?.clipboardData || e.originalEvent?.clipboardData;
-
![[webpack踩坑路之]css提取插件mini-css-extract-plugin和speed-measure-webpack-plugin冲突](https://blog.fastmock.site/usr/themes/Joe-master/assets/thumb/6.jpg)
