配置单元测试的前题是你已经安装并配置好了 webpack、vue-loader 和 Babel——例如通过 vue-cli 创建了 webpack-simple 模板脚手架。 安装 Jest 和 Vue Test Utils： npm install --save-dev jest @vue/test-utils // package.json { "scripts":...
升级 webpack5 常见问题详解
webpack5 发布后，对打包速度，打包性能、tree shaking等都做了很多改进。对于一些老项目还在用 webpack4 或者webpack3 同学是一个巨大诱惑。但是对于升级后各种包冲突，包未更新，跟其它一个插件不兼容问题，让大家望而止步。下面来看看笔都在项目升级 webpack5 踩过的坑，做...
webpack的DllPlugin、DllReferencePlugin插件使用，提升打包速度之旅
webpack.dll.js 'use strict' const path = require('path'); const webpack = require('webpack'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'production', entry: { vue: ['vue'], vueRo...
stylelint 规则 | Rules 详解
以下是 stylelint 的所有规则，并参照css vocabulary进行分类。 颜色 color-hex-case: 指定十六进制颜色大小写 。color-hex-length: 指定十六进制颜色是否使用缩写 。color-named: 要求 (可能的情况下) 或 禁止使用命名的颜色。color-no-hex: 禁止使用十六进制颜色。col...
js有向图验证是否有回路（环），antv-x6、antv-g6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js有向图验证是否有回路（...
webpack5 从零开始搭建 vue 项目
基础用法进阶用法构建速度和体积优化 一、基础用法 初始化项目 mkdir build-webpack && cd build-webpack npm init -y npm i -D webpack webpack-cli@3.3.12 注意：由于 webpack-cli4版本也 webpack-dev-server 最新版不兼容，固这里安装的是webpac...
gulp 如何运用 babel7 来打包项目中 es6 的新特性
什么是 babel ? 在前端项目中他能做什么了？ Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情： 转换语法源代码转换(codemods) 简而言之，在前端开发过程中...
gulp 的基本运用及使用过程中遇到的坑
JavaScript 和 Gulpfile Gulp 允许你使用现有 JavaScript 知识来书写 gulpfile 文件，或者利用你所掌握的 gulpfile 经验来书写普通的 JavaScript 代码。根目录 gulpfile.js 的作用，在运行 gulp 命令时会被自动加载。 坑一（也是很多初学 node.js 项目经常犯...
@antv/x6、@antv/x6-react-components X6 图编辑引擎在 react typescript 项目中实践
X6 图编辑引擎 X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。 说明文档：https://x6.antv.vision/zh/docs/tutorial/about 源码 import React, { useEffect, useSta...
@antv/x6、@antv/x6-vue-shape X6 图编辑引擎在 vue 中实践
X6 图编辑引擎 X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。 说明文档：https://x6.antv.vision/zh/docs/tutorial/about 主要源码 <template> <div cl...