搜索到
107
篇与
的结果
-
tsconfig.json配置项备忘 tsconfig.json 是放在项目根目录，用来配置一些编译选项等。当我们使用 tsc 命令编译项目，且没有指定输入文件时，编译器就会去查找 tsconfig.json 文件。如果在当前目录没找到，就会逐级向父文件夹查找。我们也可以通过在 tsc 命令中加上–project 参数，来指定一个包含 tsconfig.json 文件的目录。如果命令行上指定了输入文件时，tsconfig.json 的配置会被忽略tsconfig 一级配置项{ // compileOnSave 的值是 true 或 false。如果设为 true，在我们编辑了项目中文件保存的时候，编辑器会根据 tsconfig.json 的配置重新生成文件，不过这个要编辑器支持 "compileOnSave": true, // files 可以配置一个数组列表，里面包含指定文件的相对或绝对路径。编译器在编译的时候只会编译包含在 files 中列出的文件。如果不指定，则取决于有没有设置 include 选项；如果没有 include 选项，则默认会编译根目录以及所有子目录中的文件。这里列出的路径必须是指定文件，而不是某个文件夹，而且不能使用*、?、**/等通配符。 "files": [], // include 也可以指定要编译的路径列表，但和 files 的区别在于，这里的路径可以是文件夹，也可以是文件，可以使用相对和绝对路径，而且可以使用通配符。比如./src即表示要编译 src 文件夹下的所有文件以及子文件夹的文件。 "include": [], // exclude 表示要排除的、不编译的文件，它也可以指定一个列表，规则和 include 一样，可以是文件可以是文件夹，可以是相对路径或绝对路径，可以使用通配符 "exclude": [], // extends 可以通过指定一个其它的 tsconfig.json 文件路径，来继承这个配置文件里的配置，继承来的文件配置会覆盖当前文件定义的配置。TS 在 3.2 版本开始，支持继承一个来自 Node.js 包的 tsconfig.json 配置文件 "extends": "", "compilerOptions": { "target": "dist", } }重点配置项是 compilerOptions ，它决定了tsc会如何编译目标文件，生成到什么地方，它的常用配置项如下：targettarget 用于指定编译之后的版本目标，可选值有：ES3(默认值)、ES5、ES2015、ES2016、ES2017、ESNEXT。如果不配置 target 项，默认是讲代码转译为 ES3 的版本，如果设为 ESNEXT，则为最新 ES 规范版本。modulemodule 用来指定要使用的模块标准，可选值有commonjs、amd、system、umd、es2015(或写 es6)。如果不设置 module 选项，则如果 target 设为 ES6，那么 module 默认值为 ES6，否则是 commonjs。liblib 用于指定要包含在编译中的库文件。如果你要使用一些 ES6 的新语法，你需要引入 ES6 这个库，或者也可以写 ES2015。如果没有指定 lib 配置，默认会加载一些库，而加载什么库是受 target 影响的。如果 target 为 ES5，默认包含的库有DOM、ES5和ScriptHost；如果 target 是 ES6，默认引入的库有DOM、ES6、DOM.Iterable和ScriptHost。allowJsallowJs 设置的值为 true 或 false，用来指定是否允许编译 JS 文件，默认是 false，即不编译 JS 文件。checkJscheckJs 的值为 true 或 false，用来指定是否检查和报告 JS 文件中的错误，默认是 false。declarationdeclaration 的值为 true 或 false，用来指定是否在编译的时候生成响应的".d.ts"声明文件。如果设为 true，编译每个 ts 文件之后会生成一个 js 文件和一个声明文件。但是 declaration 和 allowJs 不能同时设为 true。sourceMapsourceMap 的值为 true 或 false，用来指定编译时是否生成.map 文件。outFileoutFile 用于指定将输出文件合并为一个文件，它的值为一个文件路径名，比如设置为"./dist/main.js"，则输出的文件为一个 main.js 文件。但是要注意，只有设置 module 的值为 amd 和 system 模块时才支持这个配置。outDiroutDir 用来指定输出文件夹，值为一个文件夹路径字符串，输出的文件都将放置在这个文件夹。rootDir用来指定编译文件的根目录，编译器会在根目录查找入口文件，如果编译器发现 1 以 rootDir 的值作为根目录查找入口文件并不会把所有文件加载进去的话会报错，但是不会停止编译。removeCommentsremoveComments 值为 true 或 false，用于指定是否将编译后的文件中的注释删掉，设为 true 的话即删掉注释，默认为 false。noEmit是否不生成编译文件，不是很明白这个选项拿来干什么。importHelpersimportHelpers 的值为 true 或 false，指定是否引入 tslib 里的辅助工具函数，默认 Wie。isolatedModulesisolatedModules 的值为 true 或 false，指定是否将每个文件作为单独的模块，默认为 true，它不可以和 declaration 同时设定。第二类是和严格类型检查相关的，开启了这些检查如果有错会报错：noImplicitAnynoImplicitAny 的值为 true 或 false，如果我们没有为一些值设置明确的类型，编译器会默认这个值为 any 类型，如果将 noImplicitAny 设为 true，则如果没有设置明确的类型会报错，默认值为 false。alwaysStrictalwaysStrict 的值为 true 或 false，指定始终以严格模式检查每个模块，并且在编译之后的 JS 文件中加入"use strict"字符串，用来告诉浏览器该 JS 为严格模式。strictNullChecksstrictNullChecks 的值为 true 或 false，当设为 true 时，null 和 undefined 值不能赋值给非这两种类型的值，别的类型的值也不能赋给它们。 除了 any 类型，还有个例外就是 undefined 可以赋值给 void 类型。strictFunctionTypesstrictFunctionTypes 的值为 true 或 false，用来指定是否使用函数参数双向协变检查。还记得我们讲类型兼容性的时候讲过函数参数双向协变的这个例子：let funcA = function(arg: number | string): void {}; let funcB = function(arg: number): void {}; funcA = funcB; 如果开启了 strictFunctionTypes，这个赋值就会报错，默认为 false strictPropertyInitializationstrictPropertyInitialization 的值为 true 或 false，设为 true 后会检查类的非 undefined 属性是否已经在构造函数里初始化，如果要开启这项，需要同时开启 strictNullChecks，默认为 false。strictBindCallApplystrictBindCallApply 的值为 true 或 false，设为 true 后会对 bind、call 和 apply 绑定方法参数的检测是严格检测的，如下面的例子：function foo(a: number, b: string): string { return a + b; } let a = foo.apply(this, [1]); // error Property '1' is missing in type '[number]' but required in type '[number, string]' let b = foo.apply(this, [1, 2]); // error 不能将类型“number”分配给类型“string” let ccd = foo.apply(this, [1, "a"]); // right let ccsd = foo.apply(this, [1, "a", 2]); // rightstrictstrict 的值为 true 或 false，用于指定是否启动所有类型检查，如果设为 true 则会同时开启前面这几个严格类型检查，默认为 false。第三类为额外的一些检查，开启了这些检查如果有错会提示不会报错：noUnusedLocalsnoUnusedLocals 的值为 true 或 false，用于检查是否有定义了但是没有使用的变量，对于这一点的检测，使用 ESLint 可以在你书写代码的时候做提示，你可以配合使用。它的默认值为 false。noUnusedParametersnoUnusedParameters 的值为 true 或 false，用于检查是否有在函数体中没有使用的参数，这个也可以配合 ESLint 来做检查，它默认是 false。noImplicitReturnsnoImplicitReturns 的值为 true 或 false，用于检查函数是否有返回值，设为 true 后，如果函数没有返回值则会提示，默认为 false。noFallthroughCasesInSwitchnoFallthroughCasesInSwitch 的值为 true 或 false，用于检查 switch 中是否有 case 没有使用 break 跳出 switch，默认为 false。接下来是模块解析相关的：moduleResolutionmoduleResolution 用于选择模块解析策略，有"node"和"classic"两种类型，我们在讲模块解析的时候已经讲过了。baseUrlbaseUrl 用于设置解析非相对模块名称的基本目录，这个我们在讲《模块和命名空间》的“模块解析配置项”一节时已经讲过了，相对模块不会受 baseUrl 的影响。pathspaths 用于设置模块名到基于 baseUrl 的路径映射，类似webpack的alias，比如这样配置：{ "compilerOptions": { "baseUrl": ".", // 如果使用paths，必须设置baseUrl "paths": { "jquery": ["node_modules/jquery/dist/jquery"] // 此处映射是相对于"baseUrl" } } }还有当我们要为没有声明文件的第三方模块写声明文件时，我们可以先如下设置：{ "compilerOptions": { "baseUrl": ".", // 如果使用paths，必须设置baseUrl "paths": { "*": ["./node_modules/@types/*", "./typings/*"] } } }然后在 tsconfig.json 文件所在的目录里建一个 typings 文件夹，然后为要写声明文件的模块建一个同名文件夹，比如我们要为 make-dir 这个模块写声明文件，那么就在 typings 文件夹下新建一个文件夹，命名为 make-dir，然后在 make-dir 文件夹新建一个 index.d.ts 声明文件来为这个模块补充声明。rootDirsrootDirs 可以指定一个路径列表，在构建时编译器会将这个路径列表中的路径内容都放到一个文件夹中，一般我们会写 dist。typeRootstypeRoots 用来指定声明文件或文件夹的路径列表，如果指定了此项，则只有在这里列出的声明文件才会被加载。typestypes 用来指定需要包含的模块，只有在这里列出的模块声明文件才会被加载进来。allowSyntheticDefaultImportsallowSyntheticDefaultImports 的值为 true 或 false，用来指定允许从没有默认导出的模块中默认导入。source map 相关配置项：sourceRootsourceRoot 用于指定调试器应该找到 TypeScript 文件而不是源文件位置，这个值会被写进.map 文件里。mapRootmapRoot 用于指定调试器找到映射文件而非生成文件的位置，指定 map 文件的根路径，该选项会影响.map 文件中的 sources 属性。inlineSourceMapinlineSourceMap 值为 true 或 false，指定是否将 map 文件的内容和 js 文件编译在同一个 js 文件中。如果设为 true，则 map 的内容会以//# sourceMappingURL=然后接 base64 字符串的形式插入在 js 文件底部。inlineSourcesinlineSources 的值是 true 或 false，用于指定是否进一步将.ts 文件的内容也包含到输出文件中experimentalDecoratorsexperimentalDecorators 的值是 true 或 false，用于指定是否启用实验性的装饰器特性，我们在讲装饰器的时候已经学习过了。emitDecoratorMetadataemitDecoratorMetadata 的值为 true 或 false，用于指定是否为装饰器提供元数据支持。关于元数据，也是 ES6 的新标准，可以通过 Reflect 提供的静态方法获取元数据，如果需要使用 Reflect 的一些方法，需要引入 ES2015.Reflect 这个库。 -
oh my zsh 安装问题和主题的使用方法 Oh my zsh 常用安装方法sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"这个命令的执行原理是：先下载install脚本，再执行这个脚本。脚本中会克隆 oh my zsh 的仓库，通常情况下执行到这就报错了。错误提示包含的主要内容：git clone of oh-my-zsh repo failed出现这个问题很常见，网上一搜就能搜到解决办法。解决办法如下# step 1 将代码clone到本地 git clone https://github.com/ohmyzsh/ohmyzsh.git ~/.oh-my-zsh # step 2 cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc # step 3 chsh -s $(which zsh) # step 4 # 退出终端，重新打开即可安装成功效果如下oh my zsh 安装效果主题的使用首先备注几个常用目录：配置文件地址 ~/.zshrc主题存放目录 ~/.oh-my-zsh/themes插件存放地址 ~/.oh-my-zsh/plugins所有主题下载地址 https://github.com/ohmyzsh/ohmyzsh/wiki/Themes主题配置方法使用vim打开配置文件 vim ~/.zshrc找到 ZSH_THEME 配置项，直接修改后面的值就行了，比如我使用 amuse 主题，要使用什么主题就从上面的github仓库中找到对应的名称修改即可 # If you come from bash you might have to change your $PATH. # export PATH=$HOME/bin:/usr/local/bin:$PATH # Path to your oh-my-zsh installation. export ZSH="$HOME/.oh-my-zsh" # Set name of the theme to load --- if set to "random", it will # load a random theme each time oh-my-zsh is loaded, in which case, # to know which specific one was loaded, run: echo $RANDOM_THEME # See https://github.com/ohmyzsh/ohmyzsh/wiki/Themes ZSH_THEME="amuse" # Set list of themes to pick from when loading at random #... 其他内容刷新配置使其生效 source ~/.zshrc , 当然，你也可以重启电脑除了上面的固定主题的方法，还可以使用随机主题主题设置为：ZSH_THEME="random"这样每次打开终端时，主题都是随机的。PS：下一次打开终端时，会输出形如[oh-my-zsh] Random theme 'amuse' loaded的语句，'amuse'即主题名称，如果你喜欢这个主题，可以把它设为固定主题插件的使用oh-my-zsh 内置了很多插件，可以直接使用，也可以到网上下载别人开发的插件到插件目录，然后配置使用1、使用内置的插件在插件目录（~/.oh-my-zsh/plugins）找到要使用的插件的名称在配置文件的 plugins=(git docker zsh-autosuggestions) 括号中加入要使用的插件，注意：插件名称使用空格分隔，那就要求，插件名称肯定不能包含空格2、使用其他生态插件我们以命令行错误提示插件 zsh-syntax-highlighting 为例从github拉取插件项目到我们的插件目录或者直接下载代码拷贝到插件目录 git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting配置文件加入插件 plugins=(git docker zsh-autosuggestions zsh-syntax-highlighting)刷新配置使其生效 source ~/.zshrc , 当然，你也可以重启电脑其他适用插件推荐autojump插件功能：实现目录间快速跳转，当你在你的命令行打开过很多目录后，想去哪个目录直接 j + 目录名，就可以跳转到这个目录名所在的路径，而不用cd完整路径！安装步骤-此安装步骤演示了使用 brew 安装的方法，和上面的从网络拉取代码到插件目录的方法等效在终端输入：brew install autojump 输出：==> Pouring autojump-22.5.3_3.all.bottle.3.tar.gz ==> Caveats Add the following line to your ~/.bash_profile or ~/.zshrc file: [ -f /opt/homebrew/etc/profile.d/autojump.sh ] && . /opt/homebrew/etc/profile.d/autojump.sh If you use the Fish shell then add the following line to your ~/.config/fish/config.fish: [ -f /opt/homebrew/share/autojump/autojump.fish ]; and source /opt/homebrew/share/autojump/autojump.fish Restart your terminal for the settings to take effect. zsh completions have been installed to: /opt/homebrew/share/zsh/site-functions ==> Summary ???? /opt/homebrew/Cellar/autojump/22.5.3_3: 20 files, 170.9KB ==> Running `brew cleanup autojump`... Disable this behaviour by setting HOMEBREW_NO_INSTALL_CLEANUP. Hide these hints with HOMEBREW_NO_ENV_HINTS (see `man brew`).根据提示，在~/.zshrc文件中加入： [ -f /usr/local/etc/profile.d/autojump.sh ] && . /usr/local/etc/profile.d/autojump.sh刷新配置使其生效 source ~/.zshrc , 当然，你也可以重启电脑
-
vscode编写vue3项目代码提示缓慢问题处理 在使用vscode + volar开发vue3项目时，开发了一段时间，尤其是在新建了很多次vue文件后，编辑器就会出现代码自动补全或者错误提示缓慢，或者根本不能提示的问题，每次遇到这种情况都要通过重启vscode或者 reload window 来解决，非常的头疼。试了很多方式来解决，最后网上找到通过开启Volar Takeover *模式解决。Vue3官网 https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode 有关于 Volar Takeover 的详细介绍，为了优化性能，Volar 提供了一个叫做“Takeover 模式”的功能。在这个模式下，Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。要开启 Takeover 模式，你需要执行以下步骤来在你的项目的工作空间中禁用 VSCode 的内置 TS 语言服务：在当前项目的工作空间下，用 Ctrl + Shift + P (macOS：Cmd + Shift + P) 唤起命令面板。输入 built，然后选择“Extensions：Show Built-in Extensions”。在插件搜索框内输入 typescript (不要删除 @builtin 前缀)。点击“TypeScript and JavaScript Language Features”右下角的小齿轮设置图标，然后在下拉菜单中选择“Disable (Workspace)”。重新加载工作空间（重启vscode或者reload window）。Takeover 模式将会在你打开一个 Vue 或者 TS 文件时自动启用。
-
chrome浏览器扩展v3版本配置项整理备忘 manifest.json配置文件{ //chrome插件的版本 "manifest_version": 3, //插件名称 "name": "ChromeName", //插件版本号 "version": "1.0.0", //插件描述，Plugin_Desc是多语言的key，chrome插件支持多语言配置，__MSG_xxx__ "description": "__MSG_Plugin_Desc__", //默认语言(如果当前浏览器设置的语言不存在多语言配置文件，则默认中文)，Chrome插件的多语言只能根据当前浏览器设置的语言来设定，无法通过代码更改语言 "default_locale": "zh_CN", //内容安全政策，V2的value是字符串，V3是对象 "content_security_policy": { //原文：此政策涵盖您的扩展程序中的页面，包括 html 文件和服务人员；具体不是很明白，但是参数值得是self，即当前自己 "extension_pages": "script-src 'self'; object-src 'self'", //原文：此政策涵盖您的扩展程序使用的任何[沙盒扩展程序页面]；具体不是很明白，但是参数值得是self，即当前自己 "sandbox": "sandbox allow-scripts; script-src 'self'; object-src 'self'" }, //key，发布插件后会给一个key，把那个key的值放这里 "key": "xxx", //icon，浏览器扩展程序管理里面的图标、浏览器右侧插件图标点开的下拉菜单展示的已开启插件的图标、以及插件详情页的标签卡的那个小图标 "icons": { "16": "static/img/logo-16.png", "19": "static/img/logo-19.png", "38": "static/img/logo-38.png", "48": "static/img/logo-48.png", "128": "static/img/logo-128.png" }, //背景页，后台脚本引入，v2是scripts:[xxx,xxx]，可以引入多个js文件，v3是service_worker：'xxx'，只能引入一个js，v3版最大的改动应该就是这里了，扩展程序管理界面的插件的那个“背景页”也将变成“Service Worker”，改动之后background.js将和浏览器完全分离，即无法调用window和ducoment对象 //可以看介绍： //1、//developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#background-service-workers； //2、//developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/ "background": { "service_worker": "background.js" }, //注入脚本，值是个数组对象，可以有多个对象 "content_scripts": [ //每个对象代表一个注入的配置 { //需要在指定页面注入的js脚本文件 "js": [ "xxx.js", "xxx.js", ], //需要注入js脚本文件的指定页面 "matches": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ], //不允许注入js脚本文件的指定页面 "exclude_matches": ["https://*.xxx.com/*"], //什么时候注入的js脚本，document_start=页面加载开始时，document_end=页面加载结束时 "run_at": "document_end" } ], //API权限，需要使用某些API时需要设置该API权限才行 "permissions": [ "contextMenus", //自定义创建右键菜单API "tabs", //tab选项卡API "storage", //缓存API "webRequest", //监听浏览器请求API ... ], //主机权限，在背景页backgroud.js里面或者popup页面走请求时，请求域名的白名单权限，如果没添加的则请求会失败 "host_permissions": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ], //动作API，原文：在 Manifest V2 中，有两种不同的 API 来实现操作： `"browser_action"` 和 `"page_action"` . //这些 API 在引入时扮演了不同的角色，但随着时间的推移它们变得多余，因此在 Manifest V3 中，我们将它们统一为单个 `"action"` API； //配置上action:{}，可以是空对象，但是action这个配置得有，不然的话扩展程序管理界面的“Service Worker”将显示无效， //且无法点开“Service Worker”的开发者工具控制台以及点击插件图标时触发的这个方法会报错：chrome.action.onClicked.addListener， "action": { }, //通过网络访问的资源，v2是提供一个数组，v3得提供数组对象，每个对象可以映射到一组资源到一组 URL 或扩展 ID "web_accessible_resources": [{ //允许访问的资源路径，数组传多个参数 "resources": ["*/img/xxx.png", "*/img/xxx2.png"], //允许访问资源的页面 "matches": [ "https://*.csdn.net/*", "https://*.xxx.com/*" ] }] }消息监听1、插件内部发送消息//onMessage消息监听 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { console.log(request.text); //打印出来的值：“我是个测试内容” sendResponse('触发成功了'); //返回一个内容到发送消息的回调函数中 }); //发送消息，触发上面的onMessage chrome.runtime.sendMessage('', {text: '我是个测试内容'}, function (msg) { console.log(msg); //打印的内容是：“触发成功了” });2、除了在插件内部contenscript background 和 popup之间传递消息以外，其他网站也可以给插件发送消息。方法如下首先，需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息，相当于白名单，只有在白名单中的站点发送的消息，扩展才会监听//onMessageExternal消息监听 chrome.runtime.onMessageExternal.addListener(function (request, sender, sendResponse) { console.log(request.text); //打印出来的值：“我是个测试内容” sendResponse('外部触发成功'); //返回一个内容到发送消息的回调函数中 }); //发送消息，触发上面的onMessageExternal //第一个参数是插件Id，指定要发送给哪个插件 //第二个参数是想要传给插件的数据信息 //第三个是让插件那边调用的回调函数，触发回来 chrome.runtime.sendMessage('chromeId', {text: '我是个测试内容'}, function (msg) { console.log(msg); //打印的内容是："外部触发成功" });内部发送sendMessage不会触发到onMessageExternal,外部发送sendMessage不会触发到onMessage
-
react 项目构建时构建失败提示XXXcannot be used as a JSX component react 项目构建时构建失败，报错信息如下[2023-06-06 11:12:51]TS2786: 'StatusTip' cannot be used as a JSX component. [2023-06-06 11:12:51] Its type 'FunctionComponent> & { LoadingTip: ForwardRefExoticComponent>; EmptyTip: ForwardRefExoticComponent<...>; FoundTip: ForwardRefExoticComponent<...>; ErrorTip: ForwardRefExoticComponent<...>; }' is not a valid JSX element type. [2023-06-06 11:12:51] 29 | <> [2023-06-06 11:12:51] 30 | <CommonHeader /> [2023-06-06 11:12:51] > 31 | <StatusTip style={{ position: 'absolute', ...loadingStyle, top: '45%' }} status="loading" /> [2023-06-06 11:12:51] | ^^^^^^^^^ [2023-06-06 11:12:51] 32 | </> [2023-06-06 11:12:51] 33 | ); [2023-06-06 11:12:51] 34 | } [2023-06-06 11:12:51]src/common/LazyLoading.tsx:36:13错误信息其实很明确，因为项目原来是好好的，在流水线中构建，突然出现的问题，肯定是构建环境问题，报错内容大概是说函数的返回值类型不能用作react组件，所以判断是ts的类型校验和我们原有项目的react版本不兼容，所以通过同步ts的版本和react的类型声明文件的版本解决yarn add -D @types/react@latest @types/react-dom@latest
-
-
a 标签的 rel 属性 定义a 标签的 rel 属性用于指定当前文档与被链接文档的关系。用于a标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 a 标签中同时使用。属性值noopener用于浏览器安全防护，防止钓鱼攻击。指示浏览器打开目标文档而不授予目标文档打开源文档的访问权限，打开添加了 rel=“noopener” 的链接，window.opener 会为 null。当打开不受信任的链接时，这个属性特别有用，可以确保目标文档无法通过Window.opener属性来篡改源文档，同时仍提供 Referer HTTP标头（除非同时使用noreferrer）。注意：使用noopener时，在决定是否打开新窗口/选项卡方面，除_top，_self和_parent 以外的非空目标名称都被视为_blank 。noreferrer浏览器导航到另一个页面时，阻止HTTP header将当前页面地址或任何其他值作为Referrer发送。可以使用 rel=“noreferrer” 禁用 HTTP 头部的 Referer 属性。nofllow用于指定搜索引擎不要跟踪链接。不要将该链接计⼊权重。例如⼀些⾮本站的链接，不想传递权重，但是⼜需要加在页⾯中的像 统计代码、备案号链接、供⽤户查询的链接等等。
-
windows系统下npm全局命令无法执行解决办法 如题，一般我们刚安装的windows操作系统，前往nodejs官网下载nodejs安装包后，windows下默认没有node和npm指令。这是因为我们的windows系统还没有添加nodejs环境变量，所以找不到路径。这时候需要将nodejs的安装路径添加到环境变量的 Path 变量中。如我的路径C:\Program Files\nodejs这时候，再回到cmd或者powershell，命令行就可以执行 node 命令了。但是还不能执行使用npm安装的全局包的命令。如 cnpm,nvm,nrm 等，解决办法如下1、使用 npm config get prefix 找到npm全局包的安装路径，如我的电脑输出路径为C:\Users\Administrator\AppData\Roaming\npm将这个路径也添加到环境变量 Path 中，重启cmd或powershell命令行工具就可以了。如果进行了上面的配置还是不行，并且控制台打印如下内容[](//upload-images.jianshu.io/upload_images/24769119-157c81028621d8b8.png?imageMogr2/auto-orient/strip|imageView2/2/w/979/format/webp)这是因为windows的安全策略禁用了当前目录下的命令解决方案如下1、在系统中 搜索框 输入 PowerShell 或者 右击任务栏的电脑图标，找到 Windows PowerShell（管理员）；2、点击“管理员身份运行”；3、输入 set-ExecutionPolicy RemoteSigned 回车；4、根据提示内容，输入A跳过后面的步骤确认，回车等待执行结束;5、重启控制台 输入 cnpm --version 执行就可以成功了。
-
使用ua-parser库处理userAgent判断微信授权登录支持的浏览器 平时我们在js中判断浏览器名称和版本都是通过解析userAgent字符串来判断，但是自己挨着用字符串判断始终不能保证处理的准确性，这种时候就可以考虑找找社区有没有比较成熟的解析库了，成熟的库优势就是经过比较漫长的迭代沉淀，且根据用户反馈做了更多的优化调整。对于ua解析库，比较成熟的就是 ua-parser 了，ua-parser 有很多语言版本，支持 python php golang 等，前端直接使用 ua-parser-js 就可以了import UAParser from 'ua-parser-js'; const WECHAT_SUPPORT_DEVICE = [ { // 微信内 webview browser: 'wechat', }, { // uc浏览器 browser: 'ucbrowser', }, { // qq 浏览器 browser: 'qqbrowser', }, { // ios safari 浏览器 browser: 'mobile safari', os: 'ios', }, ]; function isWechatSupportDevice(): boolean { const parser = new UAParser(navigator.userAgent); // you need to pass the user-agent for nodejs const parserResults = parser.getBrowser(); const browserName = parserResults.name; console.log(browserName); const isValid = WECHAT_SUPPORT_DEVICE.some((item) => item.browser === browserName.toLowerCase()); return isValid; },
-
GitHub 代码库收藏 地址：https://huggingface.co/spaces/LiquidAI/LFM2-WebGPU?v3=AI工具站引擎，可以快速开发纯前端工具地址：https://github.com/drawdb-io/drawdb在线数据库设计，可罗拉拽设计数据表的字段，索引，关联关系等地址：https://github.com/trekhleb/javascript-algorithms算法和数据结构是软件开发的支柱。顾名思义，这个代码库中包含许多流行算法和数据结构的 JavaScript 示例。每个算法和数据结构都有单独的 README 文件，其中包含相关的说明以及进一步的参考资料。这个代码库的 Star 数超过 15.5 万个，也是 GitHub 上 Star 数最多的代码库之一。地址：https://github.com/airbnb/javascript这个代码库来自 Airbnb。编程是一门艺术，而开发人员是艺术家，没有艺术家想把作品搞得一塌糊涂。这个代码库中提供了你可以在编程过程中遵循的最佳实践，GitHub 上的 Star 数超过 12.9 万个。地址：https://github.com/ryanmcdermott/clean-code-javascript" 代码的整洁性 " 是 Robert C. Martin 的著作《代码整洁之道》（Clean-code） 中提出的最著名的软件工程原则之一。这个代码库是 JavaScript 版的《代码整洁之道》，是使用 JavaScript 编写可读、可重用和可重构软件的指南，GitHub 上的 Star 数为 7.5 万个。地址：https://github.com/lydiahallie/javascript-questions这个代码库包含大量（高级）JavaScript 问题及其说明。你可以通过这个代码库测试一下自己的 JavaScript 水平，复习一下 JavaScript 知识，或者为编程面试做准备。GitHub 上的 Star 数为 4.95 万个。地址：https://github.com/leonardomso/33-js-concepts这个代码库旨在帮助开发人员掌握 JavaScript 中的概念。虽然学习这些概念不是必须的，但对未来的学习有很多裨益。这个代码库在 GitHub 上 Star 数为 5.3 万。地址：https://github.com/elsewhencode/project-guidelines虽然开发新项目令人激动万分，但对维护人员来说是一个潜在的噩梦。这个代码库包含一系列 JavaScript 项目的最佳实践。这个代码库在 GitHub 上有 2.75 万个 Star。地址：https://github.com/30-seconds/30-seconds-of-code这个代码库收集了各种 ES6 辅助函数的 JavaScript 片段，包含有关如何处理原语、数组和对象的说明，以及算法、DOM 操作函数和 Node.js 实用程序。GitHub 上的 Star 数为 10.5 万个。
