首页
更多应用
Search
1
修改iview的标签为i-的形式而不是驼峰的形式
2,733 阅读
2
PHP微信和企业微信签名
2,423 阅读
3
在VUE中怎么全局引入sass文件
2,176 阅读
4
vscode硬件占用较高解决方案
1,910 阅读
5
解决Macos下storm系列IDE卡顿的问题
1,859 阅读
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
登录
/
注册
Search
标签搜索
react
js
vue
nodejs
vscode
项目
代码
webpack
工具
nginx
小程序
css
fastmock
http
vue-cli3
eslint
git
浏览器
const
true
fastmock技术社区
累计撰写
95
篇文章
累计收到
9
条评论
首页
栏目
默认分类
JS
VUE
CSS
mac使用技巧
React
fastmock
页面
更多应用
搜索到
52
篇与
的结果
2024-02-26
安装npm依赖时报node版本不支持问题解决办法
安装npm依赖时报如下错误[2024-02-26 18:00:32]error webpack-dev-middleware@7.0.0: The engine "node" is incompatible with this module. Expected version ">= 18.12.0". Got "16.15.1" [2024-02-26 18:00:32]error Found incompatible module. [2024-02-26 18:00:32]info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command. [2024-02-26 18:00:32]The command "yarn" exited with 1.手动删除 node_modules 目录并且清空了npm缓存 npm cache clean --force 重新安装还是不行执行以下命令,禁止npm扫描所有包的 engine -> node 选项yarn config set ignore-engines true
2024年02月26日
36 阅读
0 评论
0 点赞
2024-02-26
nginx配置返回文本或json的方法
有些时候请求某些接口的时候需要返回指定的文本字符串或者json字符串,如果逻辑非常简单或者干脆是固定的字符串,那么可以使用nginx快速实现,这样就不用编写程序响应请求了,可以减少服务器资源占用并且响应性能非常快先看返回固定的文本和json,都是在server中配置location拦截即可,配置示例如下:固定文本:location ~ ^/get_text { default_type text/html; return 200 'This is text!'; }固定json:location ~ ^/get_json { default_type application/json; return 200 '{"status":"success","result":"nginx json"}'; }保存后重新载入配置即可生效,注意:default_type必须要添加,否则浏览器会当成不识别的文件进行下载另外也可以简单的根据请求的URL返回不同的字符串,示例如下:location ~ ^/get_text/article/(.*)_(\d+).html$ { default_type text/html; set $s $1; set $d $2; return 200 str:$s$d; }这样可以简单截取url中的字符串,当然也可以用(.*)匹配所有的,实际中根据不同需求定义即可上面的就是一些简单的案例,在服务器环境中对于简单的处理,充分使用nginx可以省去一些编程工作另外补充一下中文显示的问题,因为Linux下采用的是utf-8的字符编码,默认情况下我们的浏览器在服务器没有指定编码或者静态页面没有声明编码的情况下会以GBK的编码去渲染页面,这样默认情况下返回中文的话浏览器用gbk来解析utf-8编码,显然会出现乱码,这时要在nginx location块中主动添加header来输出正确编码,添加内容为: add_header Content-Type 'text/html; charset=utf-8'; 这样浏览器就知道我们使用的是哪种编码了,或者把add_header这行换成 charset utf-8; 也是可以的原文链接:https://www.cnblogs.com/freeweb/p/5944894.html声明:本文内容来源于网络,版权归原作者所有
2024年02月26日
19 阅读
0 评论
0 点赞
2023-12-21
linux常用命令备忘
linux常用命令备忘进程管理相关查看指定名称的应用进程状态ps aux | grep node查看指定端口占用情况netstat -anp | grep 8080 或 lsof -i:80VIM显示行号,预览模式下(如果在编辑模式先按ESC退出编辑模式)输入:set nu跳转到指定行:预览模式下输入 :12 跳转到第 12 行跳转行尾:预览模式下,直接输入 $ 跳转到当前光标所在行行尾跳转行尾:预览模式下,直接输入 ^ (shift+6) 跳转到当前光标所在行行尾nginx 日志查询相关统计指定日志文件下的 ip 数量awk '{ ip_count[$1]++ } END { print length(ip_count) }' /var/log/nginx/access.log打印所有访问ipawk '{ ip_count[$1]++ } END { print "Unique IP Count:", length(ip_count); for (ip in ip_count) print ip }' /var/log/nginx/access.log根据访问 ip 统计 UVawk '{print $1}' access.log|sort | uniq -c | wc -l查询访问量最频繁的 IPawk '{print $1}' access.log|sort | uniq -c |sort -n -k 1 -r|moremacos 相关显示隐藏文件defaults write com.apple.finder AppleShowAllFiles -bool true使用brew启动引用brew services list 打印所有可用服务后使用 brew services start redis-2.6 启动服务,其他服务同理Docker 相关将本地docker镜像导出保存到指定压缩文件docker save -o ~/Documents/my-project.tar my-project:v3将压缩文件的docker镜像导入到本地镜像仓库docker load --input ~/Documents/my-project.tar镜像上传到在线镜像源先将本地镜像生成一个包含完整镜像源地址的tag,docker tag my-project:v3 xxx.dockerhub.com/namespace/my-project:v3然后推送这个tagdocker push xxx.dockerhub.com/namespace/my-project:v3
2023年12月21日
30 阅读
0 评论
1 点赞
前端性能优化之webpack打包优化
前端工程化彻底盛行的今天,我们已经习惯使用打包工具来帮助我们打包代码到最终能在浏览器运行的js或者css代码,这样我们就可以在编写代码时放心地使用所有的高级语法,其中最让前端coder感到爽快的就是 import export,我们不再需要像以前一样在html里面放很多很多script。或者使用amd。cmd,requirejs工具来写模块引用的代码,这些方便,也让我们很容易忽略一个问题,就是打包的产物的大小,当一个项目足够大时,我们的js甚至可以达到几MB到几十MB,所以,今天就来总结下关于减小构建产物体积,来达到减少首屏加载时间的内容webpack 官方自带的优化策略 https://www.webpackjs.com/configuration/optimization/这里以react项目为例,列举需要优化的构建项一、使用代码拆分,让我们的页面代码构建到单独的js,首次访问页面的时候才加载这块jsmodule.exports = { optimization: { { usedExports: true, concatenateModules: false, chunkIds: 'deterministic', runtimeChunk: true, // 将运行时依赖单独打包-运行时依赖如我们使用的async await语法所需的降级兼容代码 设置为 'single' 则所有的runtime依赖打包到一个文件 // 使用代码拆分 参考文档 https://www.51cto.com/article/689344.html splitChunks: { chunks: 'async', // webpack 打包chunk分为 entry chunk 和async chunk两种,配置文件中的entry配置的主包是默认拆分的,多个入口,多个 main chunk。async chunk就是使用import('./xxx.js') 一步模块加载方法加载的模块。那么 chunks选项就是指定这两种chunk哪些需要分包的,`initial` 只分包主包, async 只分包异步加载的包。all 分包上面两种包,这里要注意的就是all有时候会理解成“所有”就会以为所有使用了import './xxx.js'引入的包都会被分包 minSize: 20, // 超过了这个大小的包才会被拆分 minRemainingSize: 0, minChunks: 1, // 被引用次数大于这个数的包才会被拆分,这里要注意的是,被引用是只命中entry chunk 和 async chunk 的引用者才算 maxAsyncRequests: 30, maxInitialRequests: 30, enforceSizeThreshold: 100, // 超过这个大小的包,不管有没有命中上面的配置,都分包 // 对指定规则的文件使用特定的分包策略 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, // 匹配文件路径 type:/\.json$/, // 匹配文件类型 idHint:'vendors',// 用于设置 Chunk ID,它还会被追加到最终产物文件名中,例如 idHint = 'vendors' 时,输出产物文件名形如 vendors-xxx-xxx.js minChunks: 1, minSize: 0, priority: 2 // 设置优先级,如果文件命中多个groups策略,优先使用这个配置数字较大的规则组 } } } } } }接下来,在react路由里,将组件引入代码 import Xxxx from '@src/routes/Xxxx' 修改为如下引用方式//该组件是动态加载的 千万注意,因为组件是动态加载的,那么。就有可能出现加载失败或者加载错误的情况,所以需要使用 Suspense 组件来包裹,组件还未加载,显示fallback中的内容,组件加载完成,显示组件,加载失败会throw一个error,防止页面崩溃 const Home = React.lazy(() => import('./Home')); function Layout() { return ( // 显示 <Spinner> 组件直至 Home 加载完成 <React.Suspense fallback={<Spinner />}> <div> <Home /> </div> </React.Suspense> ); }上面的分包策略的理解注释中的内容提到了分包的条件和规则,那么,为了尽可能减小我们的主包的大小,我们就要尽可能减少在我们的 entry 选项中指定的入口文件中对其他模块的引用,或者使用异步模块引用的方式,常见的几个优化项目为优化使用到的工具的引用,将必要的工具引用单独提到一个文件中,避免打包其他没用到的代码到主包有些应用初始化相关但是跟主应用无关的代码,使用异步模块加载,如下// app.ts (async () => { const {default: AppInit} = await import('./app-init'); aegis = AppInit.tam(); AppInit.dataInsight(); AppInit.chunkError(); })();如果在入口文件中有react或者vue路由使用的组件,使用react或vue提供的异步路由方法引入使用二、将三方库通过CDN引入而不打包到我们的代码包默认情况下,我们一般都会将我们所需要的依赖,例如react,moment,axios等三方包通过npm或yarn安装到本地,然后直接import进来使用,这种方式势必就会将这些第三方包打包到我们自己的js中,且因为这些库本身体积就较大,所以会导致我们打包出来的js非常大,而且,当我们使用了chunk切分后,各个chunk都会单独打包进去这些依赖内容。针对这种情况,webpack提供了 externals 选项来让我们可以从外部获取这些扩展依赖,首先,我们需要通过script标签的形式来引入我们需要使用的三方库,有两种方式,一种是手动在 html-webpack-plugin 的html模板文件或者content内容中加入script标签,第二种是使用html-webpack-tags-plugin插件,通过配置的方式往html内容中动态插入script标签,这里推荐后者,原因是方便写判断逻辑,而不是在html中通过ejs模板语法来写判断逻辑然后,配置externals选项告诉webpack当我们使用import语句导入模块时,实际使用的是是什么内容(一般三方库都会导出一个包含了所有他包含内容的全局变量)const assetsPath = 'https://static.xxx.com/js'; module.exports = { externals: isDev ? {} : { // 排除不打包 'react': 'React', 'react-dom': 'ReactDOM', 'react-router': 'ReactRouter', 'react-router-dom': 'ReactRouterDOM', 'axios': 'axios', 'moment': 'moment', 'moment-timezone': 'moment', 'lodash': '_', }, plugins: [ ...config.plugins, new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn|ja|ko/), new webpack.DefinePlugin(envKeys), // 开发环境不使用这种方式,因为会影响本地开发的热更新 new HtmlWebpackTagsPlugin({ tags: isDev ? [] : [ { type: 'js', path: '/react-16.11.0.production.min.js', attributes: { defer: 'defer' }, // defer: load完成后不立即执行,等带页面DOMLoaded事件执行前执行,等价于把script放到所有dom之后 publicPath: assetsPath, append: false, }, { type: 'js', path: '/react-dom-16.11.0.production.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/react-router-5.2.1.min.js ', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/react-router-dom-5.2.1.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/axios-0.26.0.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/moment.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/lodash-4.17.21.min.js ', attributes: { defer: 'defer' }, publicPath: assetsPath, append: false, }, { type: 'js', path: '/moment-timezone-with-data-10-year-range.min.js', attributes: { defer: 'defer' }, publicPath: assetsPath, append: true, }, ], }), new CopyWebpackPlugin({ patterns: [ { from: 'public', globOptions: { ignore: ['**/index.html'], }, to: 'dist', }, ], }), ].concat(!isDev ? [new BundleAnalyzerPlugin({analyzerPort: 8889, analyzerMode: 'static'})] : []), }
2023年12月14日
73 阅读
0 评论
0 点赞
2023-12-11
记录在TS项目中使用eslint规范代码时遇到的问题
一、代码无法识别 as 表达式报错内容:as语句无法识别,导致(window as any).hello这种语句报错问题原因:eslint 在检测代码时,会先将代码转换为 AST 对象 而这个转换过程需要指定的解析器才能完成,eslint 默认使用的是babel解析器,而babel解析器里没有包含ts语法内容的解析器,所以,我们需要使用ts为eslint开发的解析器解决方法:确保安装了eslint以及ts eslint解析器 npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin修改eslint配置文件 .eslintrc.js 中的解析器的配置项,配置内容如下module.exports = { root: true, env: { browser: true, mocha: true, node: true, es6: true, commonjs: true }, plugins: [ '@typescript-eslint/eslint-plugin', // 加载插件,使其对代码进行处理 'react', 'import' ], parser: '@typescript-eslint/parser', // 指定AST解析器为ts的eslint解析器 // ... 其他配置 }二、在interface或者type类型声明中,函数生命中的参数类型表达式报 'xxx' is defined but never used.eslintno-unused-vars报错内容:在interface或者type类型声明中,函数生命中的参数类型表达式报 'xxx' is defined but never used.eslintno-unused-vars报错原因:eslint在执行 no-unused-vars 规则检测时,使用的是默认的检测规则,也就是 js 的变量检测规则解决方法:禁用默认的no-unused-vars改为 @typescript-eslint/no-unused-vars 这个规则会排除interface或者type类型声明中的无函数体函数的检测,更改后的rules内容rules: { 'react/jsx-filename-extension': [ 'error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] } ], // ... 其他配置 'eol-last': 2, // 文件以单一的换行符结束 // 'no-unused-vars': [1, { vars: 'all', args: 'after-used' }], // 不能有声明后未被使用的变量或参数 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': ['error'], // ... 其他配置 }
2023年12月11日
49 阅读
0 评论
1 点赞
2023-12-01
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 这个库。
2023年12月01日
129 阅读
0 评论
0 点赞
2023-11-22
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 , 当然,你也可以重启电脑
2023年11月22日
186 阅读
0 评论
0 点赞
2023-06-30
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
2023年06月30日
555 阅读
0 评论
1 点赞
2023-03-24
webpack打包优化整理
设置mode属性为 production启动内置优化,如js压缩,代码丑化减少体积,css压缩等treeshaking去掉无用代码https://zhuanlan.zhihu.com/p/529044034
2023年03月24日
198 阅读
0 评论
0 点赞
2023-03-21
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用于指定搜索引擎不要跟踪链接。不要将该链接计⼊权重。例如⼀些⾮本站的链接,不想传递权重,但是⼜需要加在页⾯中的像 统计代码、备案号链接、供⽤户查询的链接等等。
2023年03月21日
256 阅读
0 评论
0 点赞
1
2
...
6