随笔分类 - 前端
摘要：import()异步加载模块 在webpack中, 调用import()函数可以将依赖模块进行切割, 打包为非入口点文件, 这是通过Promise+ajax完成的. 请求路径是相对路径, 对于单页应用来说没有问题. 非入口点文件的命名由webpack.config.output.chunkFilen
阅读全文
摘要：gmisuy g 全局搜索。 i 不区分大小写搜索。 m 多行搜索。 s 允许 . 匹配换行符。 u 使用unicode码的模式进行匹配。 y 执行“粘性(sticky)”搜索,匹配从目标字符串的当前位置开始。 g-global m-multiline g: 表示全局模式(global), 匹配到一
阅读全文
摘要：判断字符串不包含某个串 // 匹配不包含str的串 /(?!str)/ 说实话并没有太大用途, 正则是用来判断含有, 而不是判断不含, 这是自动机的原理和机制. 不含的逆命题就是含有, 因此这种问题大都是可以用相反的思路解决的. 全局替换避免贪婪替换 一个实战过程中遇到的问题: 在编写Code组件的
阅读全文
摘要：JSX 之前提到JSX中组件和React元素的使用方法: 现在是时候理解什么是类组件, 什么是函数组件了. 类组件 函数组件
阅读全文
摘要：css-loader 和 style-loader css-loader解析相应的css文件中@import和url()函数的依赖关系, 将依赖进行require, 这些依赖依然被相应的模块加载器处理后, 再由file-loader处理, 最后将资源的dist路径返回给css-loader进行替换.
阅读全文
摘要：关键帧 https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes 起始/结束状态 一个动画就是从from → to的过程, 这两个状态称为起始和结束状态. 也叫0% → 100%. 如果一个关键帧规则没有指定动画的开始或结束状态，浏览器将
阅读全文
摘要：文档 https://reactrouter.com/web/guides/quick-start → 安装react-router-dom npm install -S react-router-dom react-router是基础包, 现在React-Router也分为web和native两个
阅读全文
摘要：安装依赖 使用@babel/core babel从7.0 之后，包名升级为 @babel/core。 和 vue-cli 升级到 @vue/cli 一样, @babel是一个group标记, 该组织发布的包在一个子目录下: 这样一来, 要查询官方包, 只需要执行npm search @babel就可
阅读全文
摘要：webpack标准模块 webpack通常由webpack, webpack-cli, webpack-dev-server三个模块组成, 它们的依赖模块中有一些模仿了Node.js标准模块, 包括但不限于 os path querystring 这非常方便, 因为有很多Node.js标准模块的功能
阅读全文
摘要：React <!-- React --> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <!-- ReactDOM --> <script crossorigin src
阅读全文
摘要：codesandbox.io 使用Github账号登录codesandbox.io, 点击浏览器右上角+号安装Chrome扩展应用, 我们就有了一个和本地VS Code一样体验的IDE, 还能在桌面快捷方式快速打开应用: 启用VIM扩展 在Chrome应用中我们可以使用全部的VIM按键, ^W再也不
阅读全文
摘要：提案与示例 https://github.com/css-modules/css-modules https://github.com/css-modules/webpack-demo 启用css-loader的模块化功能 css-loader的模块化功能默认是关闭的, 需要在查询字符串中使用mod
阅读全文
摘要：CSS Modules Github: https://github.com/css-modules/css-modules
阅读全文
摘要：严格模式 StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。 https://zh-hans.reactjs.org/docs/strict-mode.html#warni
阅读全文
摘要：类字段提案 https://github.com/tc39/proposal-class-fields https://wenjun.me/2019/07/public-class-fields.html Webpack 内置的js打包程序不支持类字段, 然而Chrome和FF已原生支持.... g
阅读全文
摘要：throttle节流 _.throttle(event => { $('#volume_progress_percent').css({ width: `${event.data.percent}%` }); // 更新bootstrap进度条UI }, 80, { leading: true, t
阅读全文
摘要：全局属性globalThis 根据MDN描述: 在以前，从不同的 JavaScript 环境中获取全局对象需要不同的语句。 在 Web 中，可以通过 window、self 或者 frames 取到全局对象，但是在 Web Workers 中，只有 self 可以。在 Node.js 中，它们都无法
阅读全文
摘要：脚本运行在Web中 使用以下代码即可获取: globalThis.document.currentScript.src document.currentScript返回的是当前执行的script元素；然后调用script元素的src属性即可获取脚本文件的绝对路径。 脚本运行在WebWorker中 W
阅读全文
摘要：file-loader作用 用来将文件原封不动地移动到dist目录中, dist目录由webpack配置中的webpack.config.output.path属性指定. name参数及其内置变量 可以为file-loader指定name参数, 以指定文件存放到webpack.config.outp
阅读全文
摘要：三种平台及判断方法 https://www.cnblogs.com/develon/p/13607146.html 源码 /** * 判断运行平台 * 第一种方法, 判断globalThis.constructor.name的值: * Window、DedicatedWorkerGlobalScop
阅读全文
浙公网安备 33010602011771号