- 博客(124)
- 收藏
- 关注
RSS订阅原创 使用ES6进行对象数组去重
之前使用new Set数组去重，只可以去重简单字符数组，或者数字数组等。Array.from(new Set(arr))即可。但是这种方案针对对象数组并不适用
2020-11-20 17:24:50
2047
1
原创 Antd的table筛选，表头columns的filters过滤清空
Form +Table 实现了自定义筛选菜单的功能。具体可以参考https://ant.design/components/table-cn/#components-table-demo-custom-filter-panel。但是此功能会有bug：选择相应的搜索条件后，点击“搜索”按钮，Table 会渲染相应的数据，且Table 表头也有自带的过滤功能（实际上是column的filters属性起的作用）；然后再点击“清除”按钮，所有的搜索条件和表头里filters过滤的条件都要被清除。但是 Ta.
2020-10-16 15:42:26
11767
2
原创 umi2升级到umi3，并接入qiankun
qiankun 是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。具体可看：https://qiankun.umijs.org/zh/guideumi3可以顺利接入qiankun。但是umi2着实有些麻烦。所以最终我采取升级umi2到umi3再接入。1. 升级umi2到umi3npm uninstall -S dva antdnpm uninstall -D umi-plugin-react npm install -D umi@..
2020-09-24 20:24:49
2266
原创 rollup打包踩坑经验
import babel from 'rollup-plugin-babel';import commonjs from '@rollup/plugin-commonjs';import replace from 'rollup-plugin-replace';import nodeResolve from 'rollup-plugin-node-resolve';import { uglify } from 'rollup-plugin-uglify';import { eslint } fr.
2020-09-08 14:53:21
7565
1
原创 Antd中Form表单的onChange事件中执行setFieldsValue不生效
如果在Form表单中onChange事件中，手写了一个setFieldsValue, 则不会生效。原因是因为：Form表单会在手写的onChange事件之后执行内部的setFieldsValue，所以会将我们之前手写的setFieldsValue给覆盖掉。解决方案：1. 使用setTimeout延时。此方案不推荐2. 使用getValueFromEvent. 是当onChange的时候，更改form表单的值的情景下使用<FormItem label="路由节点" {...nodelayo
2020-08-25 17:39:08
13695
1
原创 ant.design v4中经验总结
1. <Select>中如果一旦加了value属性，placeholder属性就会失效。解决方案：将默认的value值改成undefined即可
2020-06-28 18:15:08
298
原创 如何在下拉选择框中，选择的时候添加tips
<Select showSearch={true} onChange={selectInfo} placeholder="请输入名称搜索">{ serverList.map((item, index) => { return( <Option value={item} key={index} title={item}> <Popover overlayStyle={{ zIndex:.
2020-06-17 19:10:28
709
原创 antv/G2 v4使用遇坑之旅
1. 当container中指定是这个容器的id名时，如果要复用这个组件，那么会在当前id下创建多个一样的图表组件，且样式会乱掉。因为指明了当前id. 解决方案：改用refs去指定即可。this.chart = new Chart({ container: this.chartRef.current, autoFit: true, height: 220,});render() { return <div id="hitogram" ref={this.chartR
2020-06-16 17:59:51
4511
1
原创 FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory打包报错解决
对于庞大的项目而言，webpack打包会存在node内存溢出的问题。解决方案如下：webpack4:原先的："build": "webpack --mode production --config ./config/webpack.config.prod.js",更改后的："build": "node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --mode production --config ./
2020-06-02 17:47:17
479
原创 报错：Could not find a declaration file for module 'xxx'. 'xxx' implicitly has an 'any' type.
报错截图如下：除了遇到js引入的module报错，也会遇到类似于img引入时候报错，报错如下：而图片的引入是按照：// 引入import replyIcon from '../../images/reply.png';// render<img src={replyIcon} />报错的原因就是因为ts中这些module没有被声明。在根目录加一个...
2019-11-12 18:18:04
12709
原创 webpack系列笔记（10）webpack启动过程分析
实际的入口文件是：node_modules/webpack/bin/webpack.js打开这个webpack.js分析源码：根据源码分析：大致的过程如下：1. process.exitCode = 0; 正常执行返回2. 运行命令3. 判断依赖包是否已经安装上4. 判断cli和common是否其中一个已经安装上5. 如果两个都安装了。警告需要去除一...
2019-10-14 15:35:04
319
原创 webpack系列笔记（9）webpack构建速度和体积优化策略
初级分析：使用webpack内置的statsstats: 构建的统计信息package.json中使用stats:"scripts": { "build: stats":"webpack --env production --json > stats.json" }stats，颗粒度太粗，看不出问题所在。速度分析：使用speed-measure-webpack...
2019-10-14 15:29:28
610
原创 webpack系列笔记（8）冒烟、单元测试和测试覆盖率
冒烟测试（smoke testing）:冒烟测试是指对提交测试的软件在进行详细深入的测试之前而进行的预测试，这种预测试的主要目的是暴露导致软件需要重新的基本功能失效等严重问题。单元测试的工具：mochaUse // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to...
2019-10-14 15:16:29
652
原创 webpack系列笔记（7）优化构建命令行
优化构建命令：统计信息stats采用errors-only，只在发生错误时输出。这样就免了在控制台打印的很多的信息。可是实际操作的时候发现。errors-only在npm run build时，信息很少，没有打包成功的明显的命令。故此引入新的插件。npm i friendly-errors-webpack-plugin -D可以很明显的打印出来成功、警告和失败...
2019-10-14 15:10:45
335
原创 webpack系列笔记（6）实现SSR打包
总结，SSR（server render） 服务端渲染的核心就是减少请求1. 减少白屏时间2. 对SEO友好SSR的代码实现思路：1. 服务端：使用react-dom/server的renderToString方法将React组件渲染成字符串 服务端路由返回对应的模板2. 客户端打包出针对服务端的组件webpack ssr打包时...
2019-10-14 15:08:43
664
原创 webpack系列笔记（5）性能优化
移动端css px自动转换成rem:px2rem-loader:{ loader: 'px2rem-loader', options: { remUnit: 75, // 1个rem是多少px, 一般以750设计稿，vw/10是75 remPrecision: 8 // rem计算保留8个小数点 } }静态资源内联：css内联：方法一：借助s...
2019-10-14 15:07:14
436
原创 webpack系列笔记（4）hash
path: path.resolve(__dirname, 'dist')console.log(__dirname);打印出来是：/Users/wangrui/Desktop/wpDemos意思是：在当前根目录上创建一个dist文件夹，并且将打包出来的文件放进去运行脚本：./node_modules/.bin/webpack 在本地安装后可以执行这个命令进行打包...
2019-10-14 15:03:28
248
原创 git help --web log执行命令时报错fatal: '/usr/local/git/share/doc/git-doc': not a documentation directory.
在执行命令git help --web log时遇到提示fatal: ‘/usr/local/git/share/doc/git-doc’: not a documentation directory.解决方案：1. 升级最新的git版本：目前我用的git版本是v2.23.02. 按照以下的步骤进行输命令：如果您认为自己拥有Xcode 4提供的Apple Git...
2019-10-11 15:41:33
313
原创 报错：Registry returned 409 for PUT on http://registry.npm.taobao.org/ -/user/org.couchdb.user
先贴出报错：npm登录的时候，报错409.原因：镜像源切到了淘宝源，需要将淘宝源切回到npm.解决方法：nrm use npm.或者：npm login --registry http://registry.npmjs.orgnpm publish --registry http://registry.npmjs.org...
2019-09-01 19:51:45
2881
原创 报错：No coverage information was collected, exit without writing coverage information
先贴出报错：注意：我的mocha单元测试均通过，但是istanbul的测试覆盖率却无法生效。本地的test命令如下："scripts": { "test": "istanbul cover ./node_modules/.bin/_mocha", },安装的istanbul的版本是：v0.4.5, 官方安装的。解决方法：重新安装istanbul，...
2019-09-01 15:18:27
890
原创 报错：Invalid left-hand side in assignment 解决
先贴出报错：我本地的weback4 配置了eslint, 打包的时候没有报eslint报错，且打包成功。但是打包出来的html文件浏览器打开是空白。控制台打开报错是Uncaught RefrenceError: Invalid left-hand side in assignment. 大致的意思是表达式左边不合法，根据经验应该是某个等于号有问题。首先：打开source-map排错，web...
2019-08-25 09:59:08
5770
原创 报错：You do not have permission to publish "xxx". Are you logged in as the correct user? :xxx
先贴出来报错：发布npm包的时候，报了这个错。解决方案：将package.json中的name替换一个稍微自定义的名字即可。我之前用的是large-number, 很多人用过这个包名导致问题。用成large-my就好了。...
2019-08-23 19:24:05
3464
原创 webpack4已经配置了mini-css-extract-plugin, 但是却打包生成不了css文件。解决
mini-css-extract-plugin这个plugin将CSS提取到单独的文件中。它为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMaps的按需加载。我本地配置了这个plugin, 但是打包却依然没有css, 且打包并没有报错，很奇怪。原因已经找到：由于同时配置了这两个plugin, 导致冲突。html-inline-css-webpack-p...
2019-08-20 15:31:01
8315
原创 报错The code generator has deoptimised the styling of ...as it exceeds the max of 500KB.
先贴出报错：字面意思是：babel警告，代码生成器已经将这块js去除了styling, 因为他超过了500KB.解决方案：{ test: /.js$/, exclude: /node_modules/, use: 'babel-loader'},...
2019-08-20 13:59:08
31377
8
原创 报错Invalid options object. Style Loader has been initialised using an options object that does not .
先贴出报错：我用的webpack版本是：v4.36.1根据字面意思，style-loader中不存在上述的options选项。找到node_modules里面的style-loadr源码查看：const insert = typeof options.insert === 'undefined' ? '"head"' : typeof options.insert === ...
2019-08-19 18:02:10
4861
7
原创 移动端适配原理解析以及rem如何换算px
首先贴出目前手淘用的lib-flexible库源码：(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontS...
2019-08-19 15:16:26
628
原创 报错Replace Autoprefixer browsers option to Browserslist config.
browsers已经不再使用，采用overrideBrowserslist.或者使用browserslist key in package.json or ,browserslistrc file.
2019-08-15 20:53:25
6985
1
原创 报错：TypeError: CleanWebpackPlugin is not a constructor
// webpack版本：4.32.2 // 抛错原写法const CleanWebpackPlugin = require("clean-webpack-plugin"); ... plugins: [ new CleanWebpackPlugin(['dist'])] ... // 另一种错误写法 const CleanWebpackPlugin = ...
2019-08-15 20:26:27
580
原创 如何发布自己的npm包
注册NPM 账号注册地址：www.npmjs.com/初始化自己要发布的项目搭建本地环境：安装node.js，包含了npm命令。 新建目录，在该目录下，初始化项目：npm init。 按照提示填写初始化信息，我的模块名称为：wr-npm-test，初始版本号：v1.0.0。 模块名称需遵循相关政策要求：www.npmjs.com/policies ， 不能够与已有NPM模块名冲突等等。 模块...
2019-08-14 15:25:14
265
原创 报错Error: options/query provided without loader (use loader + options) in {
首先贴报错：webpack配置如下：module.exports = { entry: { app: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname, 'dist'), fi...
2019-08-13 17:18:49
2095
原创 报错Cannot use [chunkhash] or [contenthash] for chunk in '[name][chunkhash:8].js' (use [hash] instead)
先贴出报错：这里我使用了css的contenthash, 以及js的chunkhash, 这个跟hotModuleReplacementPlugin有冲突导致的。mode已经改成了development仍然报错。解决方案：将new webpack.HotModuleReplacementPlugin()这一段注释掉，就ok了。plugins: [ new M...
2019-08-13 16:37:39
9038
1
原创 splice、slice、substring、substr的区别
splice:含义：只有数组中才有此方法。从数组中添加/删除元素，然后返回被删除的数组。该方法会改变原数组。语法：arrayObject.splice(index,howmany,item1,.....,itemX)示例：var arr = [1,2,3,4];arr.splice(1,1); // [2] 会返回当前删除的这个元素console.log(arr);...
2019-07-25 18:27:27
245
原创 webpack 4系列笔记（2）基本配置
加载图片与图片优化：如果不加对图片处理的loader, 就会报错：vscode中竖排选中如何选中？command+option+ ∨ （向下箭头），则可以按纵向选中项。shift+ >（向左箭头），则可以按横向选中项。file-loader: 处理文件的导入module: { rules: [ { te...
2019-07-19 15:57:36
147
原创 webpack 4系列笔记（3）babel
JS启用babel转码：虽然现代的浏览器已经兼容了96%以上的ES6的语法了，但是为了兼容老式的浏览器（IE8、9）我们需要把最新的ES6的语法转成ES5的。那么babel的loader就出场了。npm i -D babel-loader babel-core babel-preset-envbabel-core：封装了babel编译时需要使用的APIbabel-loader：...
2019-07-19 15:53:30
212
原创 webpack 4系列笔记（1）loader
npm init -y 初始化package.json; -y是代表yes,跳过提问阶段webpack 4.x版本之后，需要再额外安装一个webpack-cli--save => -S 保存至dependencies-dev --save => -D 保存至devDependenciesoutput: { filename: 'main.js', ...
2019-07-10 16:10:50
306
原创 vue中的父级传值到子级的交互
父组件：<div> 我是父亲 <child :is_nike="isNike"></child></div><script> export default { components: { child }, data(){ return { isNike: true...
2019-03-20 16:16:42
3098
原创 vue中的style、class根据变量来改变写法
1. class:// 判断isreply是否为false, 若为false, 则拥有m-light-reply的class名<div :class="{'m-light-reply': !isreply}"></div>// 判断isNike是否为true; true使用nikeHeader的class, 否则用detail_container_titl...
2019-03-18 16:47:39
6764
1
原创 git中的遴选cherry-pick和变基rebase的使用
遴选：将2分支上的某些commit提交到3分支上：1. 切到3分支上2. 选中2分支上需要抽取的commit，按shift可以多选3. 点击遴选4. 如果遇到冲突，解决冲突，并标记已解决即可5. 提交注意： 一次遴选过后，想要继续遴选，需要打开终端，执行git cherry-pick --quit 命令才可继续遴选变基：起因：从master分支上开出来的b1分支...
2019-03-14 11:29:49
4313
2
原创 安装Charles抓包工具
1. 下载地址：https://xclient.info/search/s/Charles/2. 解压密码：本站所有dmg、zip 打开密码均为xclient.info3. 激活方法：4.2.5、4.2.1、4.1.4 直接安装other：将Charles.app拖至应用程序文件夹 复制charles.jar至/Applications/Charles.app...
2019-03-13 20:02:39
450
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人