__畫戟__-CSDN博客

原创构建组件发布npm包：Rollup 构建 library 完整版

Rollup 构建 library 完整版，包含打包图片 + 字体资源 + 外部依赖 + 外部UI + css预编译 + css作用域隔离 + 代码压缩 + cjs + es + babel编译等功能。

2022-09-22 09:22:11 573

原创 Rollup常用插件详解

rollup常用插件汇总详解，@rollup/plugin-node-resolve、@rollup/plugin-commonjs、@rollup/plugin-babel、@babel/preset-react、rollup-plugin-postcss、rollup-plugin-vue、rollup-plugin-terser、@rollup/plugin-alias、@rollup/plugin-strip、rollup-plugin-copy、@rollup/plugin-image

2022-09-01 22:45:28 3562 1

原创 Rollup打包工具核心配置详解

rollup打包工具核心配置详解；Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。Rollup 使用ES6模块，，而不是以前的特殊解决方案，如 CommonJS 和 AMD。rollup.js更多是用于library打包rollup 与 webpack 对比，Webpack 具备强力的处理各类资源，构建 web应用的能力，当然它也可以构建 library；Rollup 更多是用于构建 library；

2022-08-22 22:13:36 924

原创自动生成 changelog.md，做一名有追求的工程师

commitlint + Husky 规范 git commit 日志；根据 commit message 自动生成 changelog；自定义changelog；commitlint 规范；

2022-04-22 19:52:52 4139 9

原创 Node.js 高级篇（六）：手把手教你使用和理解 Multer 实现文件上传，包懂 O(∩_∩)O~

在Web开发中，文件上传是一个非常常见、非常重要的功能。本文将介绍如何用 Node.js 处理文件上传。Multer 是一个 node.js 中间件，用于处理multipart/form-data类型的表单数据，它主要用于上传文件。为了提高效率，它被写在了busboy的上面。

2022-04-09 00:10:49 1704 1

原创手把手教你使用nodejs编写一个【使用远程仓库模板，快速创建项目模块】的cli(命令行)

在工作过程中，很多时候我们会遇到一些很相似的需求，这时候我们会进行【搬砖】。这时候我们经常会复制一份相似的代码，改一改就成了。但是这样有两个问题：首先，从其他业务模块复制过来的代码中需要删删减减，有些繁琐，效率较低；其次，即便复制的是一个基础模板代码，也会面临手动 copy 的低效问题；还有，一般如果同事之间用一个代码模板库，需要将之 git clone 至本地磁盘，一般手动 copy 很少会 git pull 代码，这样就会造成代码模块版本滞后。

2022-02-20 18:05:05 9569

原创 commitlint + Husky 规范 git commit 日志

在多人协作的背景下，git 仓库和 workflow 的作用很重要。而对于 commit 提交的信息说明存在一定规范是好的方案。来学习一下使用 commitlint + husky 来规范 git commit -m 中的描述信息吧

2022-01-06 21:34:09 813

原创手把手教你使用nodejs编写cli(命令行)——拉取远程仓库作为代码模板

上一章和大家分享了通过 fs 模块读写ejs 模板的方式创建 CLI 工具，这一章我们来讲解如果将远程仓库的代码做为 CLI 工具的代码模板。

2022-01-03 20:19:54 11062 2

原创手把手教你使用nodejs编写cli(命令行)

为什么要坚持写作？写作就是求甚解的过程。在前端开发工作中，我们经常会使用到webpack-cli、Vue-cli、create-react-app等cli工具，在实际业务开发中我们也是有很多的cli需求来帮助我们实现新工程或模块的快速创建。cli的本质就是运行node脚本

2021-12-31 01:25:58 10786

原创页面水印添加工具【watermark-plus】，可防止手动删除水印，支持文本水印、图片水印、定制水印内容

安全问题不能大意，对于一些比较敏感的内容，我们可以通过水印方案，最大程度地给浏览者警示的作用，减少泄密的情况，甚至泄密了，也有可能追踪到泄密者。watermark-plus，使用简单，可防止手动删除水印；支持Vue、React等JS框架；支持文本水印；支持图片水印；可防止被删除；可防止重复渲染；可动态适应超长水印文本；高清晰度；支持浏览器端打印；可配置性强；支持自定义水印内容（排版、样式、内容）；

2021-12-24 15:14:59 4376 13

原创 webpack高级应用篇（十三）：模块联邦（Module Federation）- 未来组件包更新解决方案

Webpack 5 增加了一个新的功能 “模块联邦”，它让 Webpack 达到了线上 Runtime 的效果，让代码直接在项目间利用 CDN 直接共享，不再需要本地安装 Npm 包、构建再发布了！它是未来多个项目更新组件包的新的解决方案！......

2021-12-22 14:33:49 5818 14

原创 webpack高级应用篇（十二）：创建 library

除了打包应用程序，`webpack` 还可以用于打包` JavaScript library`。以下适用于希望简化打包策略的 library 作者。

2021-12-20 17:19:10 1326

原创 webpack高级应用篇（十）：渐进式网络应用程序PWA（Service Workers）

渐进式网络应用程序(progressive web application - PWA)，是一种可以提供类似于native app(原生应用程序) 体验的 web app(网络应用程序)。PWA 可以用来做很多事。其中最重要的是，在离线时应用程序能够继续运行功能。这是通过使用名为 Service Workers 的 web 技术来实现的。

2021-12-16 00:25:31 1382

原创 webpack高级应用篇（九）：tree shaking（usedExports）与 sideEffects

你可以将应用程序想象成一棵树。绿色表示实际用到的 source code(源码) 和 library(库)，是树上活的树叶。灰色表示未引用代码，是秋天树上枯萎的树叶。为了除去死去的树叶，你必须摇动这棵树，使它们落下。*tree shaking* 是一个术语，通常用于描述**移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 [静态结构]特性，例如 import、export

2021-12-14 11:05:16 3090 4

原创 webpack高级应用篇（八）：多页面应用程序

尽管单页面应用很流行，但是我们并不总是需要它。在多页面应用程序中，server 会拉取一个新的 HTML 文档给你的客户端。页面重新加载此新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事，例如使用为页面间共享optimization.splitChunks的应用程序代码创建 bundle。由于入口起点数量的增多，多页应用能够复用多个入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

2021-12-11 22:39:44 1085 1

原创 webpack高级应用篇（六）：PostCSS 与 CSS Modules

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。比如可以使用 Autoprefixer 插件自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮我们自动的为 CSS 规则添加前缀，将最新的 CSS 语法转换成大多数浏览器都能理解的语法。CSS Modules解决css命名冲突问题，让你放心优雅的写css。

2021-12-10 17:39:53 1431

原创 weboack高级应用篇（五）：打包结果分析 - 依赖图(dependency graph)

每当一个文件依赖另一个文件时，webpack 都会将文件视为直接存在 *依赖关系*。这使得 webpack 可以获取非代码资源，如 images 或 web 字体等。并会把它们作为 *依赖* 提供给应用程序。当 webpack 处理应用程序时，它会根据命令行参数中或配置文件中定义的模块列表开始处理。从入口开始，webpack 会递归的构建一个 *依赖关系图*，这个依赖图包含着应用程序中所需的每个模块，然后将所有模块打包为少量的 *bundle* —— 通常只有一个 —— 可由浏览器加载。

2021-12-08 22:06:45 1604

原创 Git Hooks 与 Husky —— 配合 eslint 规范代码

在项目规范化开发过程中，我们希望同事提交的代码都是符合代码规范的。我们可以使用 `ESLint` 格式化工具来校验代码；但是如何来强有力的保证大家提交到远程仓库的代码一定是经过 ESLint 检查并修复的呢？Git Hooks 来解决这个问题；使用 pre-commit 来进行 eslint 校验；使用 husky 来简化 git hooks 配置；

2021-12-07 23:07:59 1700

原创 webpack高级应用篇（三）：ESLint

本文介绍webpack 结合 ESLint 使用；主要解决安装ESLint、ESLint实时检查、IDE中使用ESLint、快捷修复；vscode eslint；webstorm eslint；eslint --fix；devServer.client.overlay；vue 官方: eslint-config-vue；ESLint常见问题及解决方案...

2021-12-07 10:30:17 1832

原创 webpack高级应用篇（二）：devServer

开发环境下，我们往往需要启动一个web服务，方便我们模拟一个用户从浏览器中访问我们的web服务，读取我们的打包产物，以观测我们的代码在客户端的表现。通过 webpack-dev-server 的这些配置，能够以多种方式改变其行为。解释目测changeOrigin、pathRewrite 不生效的原因

2021-12-05 19:27:34 1664

原创 webpack高级应用篇（一）：source map —— 增强调试过程

选择一种 source map 格式来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

2021-12-05 19:14:24 1027

原创 webpack基础篇（七）：拆分开发环境和生产环境配置

我们手工的调整 `mode` 选项，可以实现`生产环境`和`开发环境`的切换，但很多配置在生产环境和开发环境中存在不一致的情况，比如开发环境没有必要设置缓存，生产环境还需要设置公共路径等等。拆分开发环境和生产环境，让打包更灵活。

2021-12-02 09:49:45 950

原创 webpack基础篇（六）：缓存 caching（hash）

使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的/dist目录，然后把打包后的内容放置在此目录中。只要/dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为缓存的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于

2021-12-01 13:25:35 787

原创 webpack基础篇（五）：代码分离（Code Splitting）

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的bundle，以及控制资源加载优先级，如果使用合理，会极大缩减加载时间。常用的代码分离方法有三种：入口起点：使用 entry 配置手动地分离代码。防止重复：使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离chunk。动态导入：通过模块的内联函数 import 调用来分离代码。

2021-12-01 01:14:19 2267

原创 webpack基础篇（四）：babel-loader

webpack本身只能加载、打包js模块，并不能将一些代码转化为浏览器识别的代码。然而，浏览器对ES6这些高级语法的支持性并不是非常好。因此为了让我们的新语法能在浏览器中都能顺利运行，Babel 应运而生。Babel是一个JavaScript编译器，能够让我们放心的使用新一代JS语法；babel-loader：在webpack里应用 babel 解析ES6的桥梁；@babel/core：babel核心模块；@babel/preset-env：babel预设，内置一组 babel 插件的集合；....

2021-11-30 16:59:24 2561

删除谷歌广告的chrome浏览器插件

react使用高德地图react-amap：Markers、Circle、ContextMenu、自定义ContextMenu

VueWebuploader.zip

Canvas饼状图、绘制文字、绘制图像.zip

手写-全选案例demo

空空如也