⑥②专栏

nexus搭建npm私有镜像

lw001x — Thu, 02 Nov 2023 13:41:07 +0800

使用 npm-group 仓库，nexus会自动判断，hosted本地仓和 proxy代理仓哪个仓库存在要下载的包，并进行下载。使用hosted类型的仓库，将本地包打入私有镜像仓库，只保存在本地私有镜像仓库，proxy代理仓库不会有任何变化。创建一个名为 npm-group 的分组仓库，并本地hosted仓库和代理Proxy仓库放入分组。创建一个名为 npm-proxy 的代理仓库，可以将代理地址写淘宝镜像加快本地镜像的速度。通过上面的方法，创建了三个类型的仓库，每个仓库都有自己的使用方式。

浏览器 Experimental third-party storage partitioning（实验性第三方存储分区）

lw001x — Wed, 11 Oct 2023 14:27:37 +0800

引起这个问题是chrome浏览器的新特性，Experimental third-party storage partitioning，引起的，只要是非同级且非同源的页面进行嵌套，那么非顶级的源存储与顶级的源存储之间的共享数据会进行隔离。如果你在使用iframe嵌套页面A后，嵌套页面A的存储数据和使用顶级打开的页面A的存储数据不通时，就是因为这个特性参数引起的，也就是说后续想使用postMessage跨域获取存储数据，就要考虑同源的问题了。在浏览器开发者工具的Application（应用程序）标签页的。

js和nodejs如何将文件切片和合并

lw001x — Sat, 12 Aug 2023 16:40:29 +0800

如果想在页面上操作文件，就需要使用到与文件相关的API接口，如Blob、File、FileList、FileReader、FileReaderSync，这几个就是操作文件常见的接口。Blob是实现文件切片的一个核心接口，因为它是一个不可变的类文件对象，可以使用Blob本身的slice方法，对文件本身进行切片。使用nodejs读取文件流，并对流进行切片合并等操作，就需要用到Buffer对象，可对文件流进行切片，并合并。

element-ui的el-table，使用sortablejs改造成可拖拽排序

lw001x — Sat, 27 May 2023 11:29:32 +0800

element-ui的el-table，使用sortablejs改造成可拖拽排序。

Vite+Vue+Electron环境搭建

lw001x — Sat, 29 Oct 2022 17:38:15 +0800

electron简单来说就是对html的一种封装，所以我们先来搭建vue的开发环境，这里使用vite，也可以使用vue-cli来快速搭建。

WebGIS地图相关学习笔记

lw001x — Mon, 24 Oct 2022 11:42:04 +0800

这里将记录学习gis地图相关内容的时候，如果碰到了不懂或不理解的知识点的时候，会记录在这里。

使用Canvas画出多个多边形Polygon

lw001x — Mon, 06 Jun 2022 15:00:15 +0800

使用Canvas画出多个多边形Polygon

btoa和atob在nodejs中应该怎么写？

lw001x — Mon, 18 Apr 2022 18:49:04 +0800

btoa 方法是将字符串进行base64编码 atob 方法是将已进行base64编码的字符串进行解码 // 对字符串进行base64编码 let res = btoa('123') console.log(res) // MTIz // 对base64编码进行解码 res = atob(res) console.log(res) // 123 btoa 和 atob两种全局方法在nodejs环境中也是可以使用的，但也是为了旧版 Web 平台 API 兼容，在新代码是最好不要使用，因为有可能

在React18中使用createRoot代替render

lw001x — Sat, 16 Apr 2022 09:26:34 +0800

在React18中使用createRoot代替render import * as ReactDOMClient from 'react-dom/client'; ReactDOMClient.createRoot(/*...*/); ReactDOMClient.hydrateRoot(/*...*/); 什么是 root? root就是指向React渲染dom树的一个最上层的数据结构。在旧的API中，root是不透明的，因为我们将它连接到DOM元素，并通过DOM节点访问它，从来不暴露给用

npm install 常用参数说明

lw001x — Thu, 14 Apr 2022 14:56:37 +0800

描述 npm install 是用来安装包和相关的依赖包的，如果存在package-loc文件，或是 shrinkwrap文件，yarn.lock文件，依赖包的安装将被其锁定，如果存在多个，则优先级如下： npm-shrinkwrap.json package-lock.json yarn.lock 命令 npm install [<@scope>/] npm install [<@scope>/]@

npm exec 命令详细说明

lw001x — Tue, 12 Apr 2022 22:30:43 +0800

npm exec命令是用来从本地或远程npm包中运行命令的。 npm exec -- [@] [args...] npm exec --package=[@] -- [args...] npm exec -c ' [args...]' npm exec --package=foo -c ' [args...]' # 别名: npm..

学习esbuild构建工具

lw001x — Tue, 12 Apr 2022 11:04:03 +0800

简介既然要学习如何使用esbuild，就说明已经知道，esbuild号称是打开了前端构建工具性能的新时代，最新流行的Vite也是使用esbuild进行了构建依赖。上图是使用不同的构建工具，构建10个three.js副本的bundle，包括sourcemap和minify压缩等操作，可以看出很明显差距。主要特点有哪些？不使用缓存进行快速构建 ES6和CommonJS模块 ES6模块的TreeShaking JavaScript和Go的API 支持TypeScript和JSX语法..

如何在VScode工具中配置eslint代码检查并动态提示

lw001x — Fri, 08 Apr 2022 21:06:22 +0800

ESLint 作为ECAMScript和JavaScript 代码识别检查工具，为我们在开发过程中提供了很大的帮助，也为我们在多人协作编程的时候，提供了统一的代码风格限制方式，减少了我们在多人编写并提交同一个文件的时候，尽量减少冲突的出现次数。如果只是一个人书写代码，也能为我们提供很好的代码规范。尽量在项目初始阶段就使用代码检查、代码风格的规范插件工具。使用npm安装ESLint 首先是安装eslint的插件包 npm install eslint --save-dev 然后我们可以使用命令

TypeError: this.cliEngineCtor is not a constructor，webstorm和eslint的版本纠结

lw001x — Fri, 01 Apr 2022 11:00:06 +0800

在webstorm里使用eslint的时候，会提示 TypeError: this.cliEngineCtor is not a constructor ，这样的一个错误，知道应该是版本的错误，但具体版本怎么区别，eslint的版本和webstorm的版本

一段代码，js动态创建脚本和样式

lw001x — Mon, 28 Mar 2022 22:07:31 +0800

1、动态创建引入外部脚本 function loadScript(url){ var script = document.createElement('script') script.type = 'text/javascript' script.src = url document.body.appendChild(script) } 2、动态创建页面内脚本 function loadScriptCode(code){ var codeNode = doc

一段代码，nodejs使用past-time将日期转换成昨天、今天、明天

lw001x — Fri, 03 Dec 2021 10:00:23 +0800

这里使用 past-time 插件。 npm i past-time const pastTime = require('past-time') let date = new Date() date.setMinutes(10) date.setSeconds(2) for (let i = 0; i < 12; i++) { let t1 = pastTime(date, {awaysShort: false, format: 'YYYY-MM-DD hh:mm:ss'})

flutter入坑，Expanded child isn‘t defined

lw001x — Thu, 19 Aug 2021 17:21:10 +0800

在使用idea进行flutter开发的时候，会发现文档上明明有的一些参数，在开发工具中却显示红色提示。这个时候我们就需要看一下，flutter使用的版本是不是太低了，因为flutter1和flutter2的版本有很大的不同。升级flutter后，还需要在idea中，改变Dart的版本支持，只需要改变上图的路径就可以了。 ...

小程序和H5页面如何实现图片的瀑布布局

lw001x — Tue, 27 Jul 2021 09:29:04 +0800

瀑布布局使用绝对定位的形式，这里使用waterfall-js来获取计算后的图片项的位置大小等信息，可以看到最终的效果图，示例代码可以参考https://gitee.com/orz365/waterfall-js 可以看到，图片上的图片等列的显示，都是不等高的，对于这种像流水一样的布局，可以称为瀑布流的布局，对于不同大小的图片，这种布局方式是一种不错的选择。我们使用一种js插件，waterfall-js插件，我们只要传入我们要展示的图片列表信息，它可以很快的计算出我们要展示的图片大小，并将图片的大.

Canvas学习，用Canvas画五子棋并进行简单判断输赢

lw001x — Thu, 17 Jun 2021 11:13:16 +0800

五子棋

grunt-babel中如何去掉use strict严格模式

lw001x — Wed, 02 Jun 2021 15:25:14 +0800

Install For Babel 7.x and grunt-babel v8 npm i --dev grunt-babel @babel/core @babel/preset-env For Babel 6.x and grunt-babel v7 $ yarn add --dev grunt-babel@7 babel-core babel-preset-env