1.升级最新的webpack5方案
webpack5相较于我们用的webpack4：
Tree Shaking 更友好，esmodule情况打包效果会很好
内置了 terser-webpack-plugin，不再需要下载安装，即可压缩代码
webpack5 内部内置了 cache 缓存机制。直接配置即可
支持模块联邦（微前端）
缺点：启动时间依旧相对较慢，升级需要改动比较大，虽支持模块联邦，但是共享需要同样升级webpack5，其他webpack4也能通过插件实现但是效果相当较差，很多语法跳转无法平缓过度，需要对各种文件的处理loader进行修改或升级(可以...阅读全文>>
/ 响应拦截器
instance.interceptors.response.use(
response => {
// 隐藏 loading 提示效果
Toast.clear()
return response
},
async error => {
Toast.clear()
// 1. 从 vuex 中获取 tokenInfo 对象，格式为： { token, refresh_token }
const tokenInfo = store.state.tokenInfo
// 2. ...阅读全文>>
function getParents(el, parentSelector /* optional */) {
// console.log(el);
// If no parentSelector defined will bubble up all the way to *document*
if (parentSelector === undefined) {
parentSelector = document;
}
v...阅读全文>>
const puppeteer = require('puppeteer');
(async () => {
// 启动浏览器
const browser = await puppeteer.launch({
headless: true, // 默认是无头模式，这里为了示范所以使用正常模式
args: ['--no-sandbox', '--disable-setuid-sandbox'],
})
// 控制浏览器打开新标签页面
const page = await browser.newP...阅读全文>>
config.json
{ "api": "http://localhost:9001" }
// vue.config.js
const hotRequire = modulePath => {
// require.resolve可以通过相对路径获取绝对路径
// 以绝对路径为键值删除require中的对应文件的缓存
delete require.cache[require.resolve(modulePath)]
// 重新获取文件内容
const target = require(modulePath)
return target
}
...
prox...阅读全文>>
<CountDownTimer endTime={1569834068266} onEnd={this.onEndHandler.bind(this)} />
CountDownTimer.jsx
import React from "react";
import styled from "styled-components";
import WebWorker from "../../utils/worker";
let work = function() {
let timer = null;
this.onmessag...阅读全文>>
01- 轮播图组件问题
问题原因： 需要请求后台数据，所以一开始数据设置为空；但设置了autoplay，导致冲突
现象： 一开始不自动播放，当你手动滑动一张后会自动播放
//获取轮播图数据
async getSwiper() {
const {data,status} = await getSwiper()
if (status === 200) {
this.setState(
{
swiper: data
}, () => {
...阅读全文>>
// 被观察的目标对象
let obj = { name: 'zyc', csdn: '博客'};
// 观察者
function print() {
console.log('对象被操作了!');
}
// 使用proxy代理
const observeObj = (obj) => new Proxy(obj, {set, get});
// 消息队列
const observeQueue = new Set();
const observe = (fn) => observeQueue.add(fn);
// 设置
function set(target, key,...阅读全文>>
在做一个移动端项目时，用swiper 做的页面切换，但是页面里面还会有swiper轮播图 和其他内容，在滑动外部swiper时，除开里面swiper的元素会发生闪动的情况。
解决方法：给外部元素的父标css套一个：transform:translate3d(0,0,0);overflow:hidden;
闪动元素/子元素：transform:translate3d(0,0,0)阅读全文>>
安装mysql
$ yarn add mysql
建立连接池、常用sql语句
// mysql.js
const mysql = require('mysql');
// 创建连接池
const pool = mysql.createPool({
host: 'xxx.xx.xxx.xxx', // 服务器ip
port: 3306, // mySql运行的端口号(默认3306)
database: 'name', // 数据库名称
user: 'user', // 数据库用户
passwor...阅读全文>>
