mjzhang1993的博客

说明在大型前端项目中，我们一般会使用 webpack、Rollup 等工具进行模块整合，但是庞大的代码量会使得我们在开发阶段花费更多的时间在（代码改动 --> 页面渲染）这个阶段，即使使用 HMR 这个问题也没有完全的解决，项目代码量达到一定规模，积少成多，HMR 带来的效率提升会逐渐不够vite 可以解决的问题快速启动本地开发服务器代码更新快速显示在浏览器页面中在开发阶段 vite 会使用 esbuild ,同时 基于 原生 ES 模块实现 高效的 HMR在生产阶段 vit

说明经过上阶段的配置虽然可以在项目中使用 mdx 语法 来创建页面了，但是我们的组件库有一些定制化的需求：交互式的组件演示、组件 Props 列表展示。这些功能如果可以通过封装来实现，会大大提升开发效率Props 与 Playground 的对外接口，将会仿照 docz 的 Props Playground1. Props 控件实现Props 是用来展示组件属性列表的，参考 docz 提供的 api 实现, 我们需要将组件传给 这个控件，让这个控件获得 属性列表后展示我们的组件是通

说明之前使用过 Docz 来作为组件库文档搭建工具，它基于 gatsby , 提供了高度的定制化能力，但是截止 2021-06-22， Docz 停留在 v2.3.1（2020-04-05） 已经一年多，其所依赖的 gatsby 相关包，已经有了多个版本的更新，每次 安装 docz 都会在控制台收到大量的警告，虽然项目依然可以运行，但是为长久打算，决定放弃 Docz ，尝试基于 MDX 来搭建一个组件库预期计划使用 MDX 来作为文档的主要载体，这样组件库的文档还是通过 markdown 来

webpack 5 模块联邦实现微前端疑难问题解决说明webpack 5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。借助模块联邦我们可以一定程度的实现微前端微前端官网Module Federation 模块联邦官网Module Federation 案例概念1. 什么是微前端？微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一

Stylelint 接入说明前因 为什么要使用 Stylelintstylelint 用来检查样式文件 css less sass 等是否符合规范, css 不能算作严格意义的编程语言，它是以描述为主的样式表，如果描述的混乱，没有规则，对于开源项目的协作者来讲，一定是一个定时炸弹。Styleint 官网预期使用节点开发时通过 vscode Stylelint 插件触发，并借助 vscode 等代码编辑器报错提示commit 提交时, 通过 husky 触发 lint-staged 然后

说明需求main 分支发布主要版本LTS 分支发布修订版本成员日常通过 PR 提交对代码库的变更搭建 Publish workFlow1. 明确项目的参与者权限Admin： 最高权限，可以对项目进行设置，且提交代码到 main 分支，不需要提 prMember: 成员权限（读写），除了不能用 setting 其他都可以，提交代码到 main 分支，需要提 pr外部协作者：最低参与权限2. Github 的受保护分支受保护分支主要用来规范对某个分支的提交操作规范，例如：m

Webpack 5.x 开发 React 组件库说明Webpack 5.x 相比于 Webpack 4.x 有了很多重大改进，有些改进对于我们使用它开发组件库有了更好的支持。Webpack 5 发布 – 升级内容需要 node 版本 v10.13.0 以上Webpack V5.15.0实现目标 Tree-shaking 支持 Code-splitting 代码分割实现（组件级别的分割） 对外输出模块类型 esm、umd、commonjs （当前版本 Webpack v5.15

lerna 项目中集成 babel lint-staged husky eslintMonorepo 是针对单仓库、多 package 的流行解决方案, lerna 是它的一种实现。说明重要 package 版本“lint-staged”: “^10.5.3”,“eslint”: “^7.17.0”,“husky”: “^4.3.6”,“lerna”: “^3.22.1”“@babel/core”: “^7.12.10”因为项目采用 lerna 这种 monorepo 解决方

Rollup2.x 搭建React 组件库说明Rollup 官网 版本最新Rollup 官方中文 版本滞后，有些 Api 已经改了，因此建议还是看英文原版打包工具对比测试网站本文 Rollup 2.x 组件库 Demo 地址Rollup 0.67.x 版本组件库重要依赖版本“rollup”: “^2.36.0”“rollup-plugin-styles”: “^3.12.1”,“@rollup/plugin-eslint”: “^8.0.1”,“@rollup/plugin-

Docz 组件库文档实现方案（三）Docz 结合 Lerna 项目Docz 可以与组件库代码混合使用，即在组件实现的同级别目录创建扩展名为 mdx 的组件同名文件；如果你的项目是 lerna 项目，那么可以尝试另外一种方案，即：将组件库组件代码与docs 文档分离成两个子项目，这样每个子项目只关心各自的实现即可，下面我们把之前的案例改造成 docs 与 components 分离，源码可以到这里查看1. 将一个 lerna 项目改造成如下结构其中 /packages/mjz-ui/ 是组件库

Docz 组件库文档实现方案（二）定制化 Docz1. 定制化项目配置在 项目根目录创建一个名为 doczrc.js 的文件，通过这个文件来对项目进行配置，官方项目配置文档// /doczrc.jsexport default { /** * 要发布到网站的路径，例如 https://xxx.github.com/docs/ 默认 / ,注意必须 / 结尾 * */ base: "/docs/", /** * 限制那个资源目录下的规定文件会被生成文档 */

Docz 组件库文档实现方案 （一）说明Docz 是一套与 Storybook 相比更简约的组件库文档实现方案，它解决了组件库文档开发最主要的问题（组件列表、组件展示、组件属性列表、组件编辑调试），虽然 Storybook 在社区支持方面更强一些（更多的配置控件，更多的功能）但是 Storybook 在开发成本上来说比 Docz 方案还是差一些的Docz 基于 MDX 实现，MDX（Markdown + jsx） 允许你在 markdown 样式的文件中导入根使用 JSX 组件，并且 Docz

说明标准化 Git Commit 工作流方案（一）标准化 Git Commit 工作流实现标准化 Git Commit 工作流方案（二）Lerna 项目中的 commit 工作流实现与提交规范定制化Lerna 项目中实现安装相关依赖yarn add -D -W commitizen yarn add -D -W cz-lerna-changelog # 专门为 lerna 项目设计的 commitizen 适配器yarn add -D -W @commitlint/cli @commi

标准化 Git Commit 工作流方案（一）目标标准化每一次 commit message检查每一次 git commit 是否符合规范，不符合规范禁止提交按照 commit messgae 生成 change log主要工具Commitizen : 交互式的 commit 提交约定husky： git 钩子commitlint ： commit message 校验工具standard-version : 版本升级 + 升级日志生成lerna publish --convent

Lerna 多 package 项目管理工具说明Lerna是一个用于管理包含多个软件包（package） 的 JavaScript 源代码管理方案参考Lerna 中文官网Yarn wrokspacelerna+yarn workspace+monorepo项目的最佳实践Lerna 配置详解1. 为什么要将项目拆分成多个 package ?当项目越来越大，拆分成多个 package 有利于降低软件的复杂度作为工具类、或者组件类项目，有助于使用者按照需要引用合适的 packag

StoryBook 插件介绍插件使用story 创建中会用到插件 addons, storybook 官方提供一部分插件，其他的是社区提供的1. 注册插件首先要在 .storybook/ 下创建 addons.js 插件注册文件，在这里是进行插件注册的，（并不是所有插件都需要注册，具体的要看插件的文档要求）// .storybook/addons.jsimport '@sto...

StoryBook 开发 React 组件库文档说明StoryBook 是一个开源的 UI 组件库构建工具，支持 React、Vue、Angular 等主流开发框架，使用 StoryBook 将获得以下优势：开发环境隔离并以可交互的方式展示组件便捷且直观组件分组管理方式同样使用 webpack 构建，集成 react-hot-loader 调试方便可配置化程度高，插件化，社区完善...

使用 workbox 协助构建 PWA 应用1. 说明 workbox 是 GoogleChrome 团队推出的一套解决方案，提供站点离线访问能力，可以更方便、更简单的解决 Service Workers 绝大多数问题重要文件版本workbox-build ‘3.0.0’2. workbox 简单使用 workbox 是协助 Service wo...

使用 Webpack 开发 React 组件库组件库设计要求使用 webpack 做模块开发以及打包打包后的格式为 umd 模块Code Splitting 代码分割第三方包排除打包 react、antd 、lodash 等样式文件抽离借助 babel-plugin-import 实现组件的按需引入主要文件结构├── package.json├── script # 一些脚...

使用 Rollup 开发 React 组件库说明Rollup 是一个 JavaScript 模块打包器，他可以静态分析代码中的 import 并排除任何未实际使用的代码，可以极大的缩小项目（Tree-shaking）, 与 Webpack 相比，Rollup 更多的被用于类库的开发rollup.js 中文文档 中文文档不够全面，有些内容还是要到英文官网查找rollup.js 英文官网...

webpack 2 基本配置，DevServer 配置说明 最近重构代码时，把 webpack 升级到了 2.2.1，结果完全无法运行，正好看到了这份文档，讲解的很详细，所以就学习了一下，应用到项目中。列出版本“webpack”: “^2.2.1”,“webpack-dev-server”: “^2.4.1”,“webpack-md5-hash”: “0.0.5”,“webpack-m

gulp 完整配置模板 适用于一般项目，（可以使用 jquery swiper 等插件，如需使用 react angular 等 需要添加配置）1. 项目目录结构 |-- app // 源码 |-- _data // json 数据 |-- imgs // 图

webpack 开发时跨域问题的解决1. 说明 webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题2. API 需要代理的 pathname 要加 /module.exports = { devtool: 'cheap-module-source-map', entry: './app/js/index.js'

vue-cli webpack 模板配置解析 - 2 重要配置文件解析重要模块版本vue-cli : 2.9.1vue : 2.4.2vue-router : 2.7.0webpack : 3.6.0其他依赖都由 vue-cli 生成重要配置文件解析1. /build/dev-server.js 执行 npm run dev 或者 npm start 后运行的脚本主要功能检查 n

react 学习总结–构建工具Gulp、Browserify（一）说明 关于构建工具，以前只用过 fis（使用的很基础），入职新公司，前端只有我一个人，所以只能自己学 gulp 了，各种插件都是去 这里 查看文档，按照文档一点一点试出来的。学习期间，感觉像我这样的新手，最需要的还是一个中小型项目的完整目录结构，然后根据目录结构去配置gulpfile.js，可惜，博客和GitHub上有很多讲解的很

react 学习总结–构建工具Gulp、Browserify（二）1.html 文件处理gulp-htmlmin 插件 用于压缩html，可以进行配置，下边是配置信息（选填） var gulp = require('gulp'), htmlmin = require('gulp-htmlmin'); gulp.task('htmlmin', function ()

vue-cli webpack 模板配置解析 - 1 文件结构重要模块版本vue-cli : 2.9.1vue : 2.4.2vue-router : 2.7.0webpack : 3.6.0其他依赖都由 vue-cli 生成使用全局安装 vue-cli npm install -g vue-cli创建项目 vue init webpack <project-name> 进入项目文

Rollup 学习整理 2 插件详解plugins 插件1. rollup-plugin-node-resolve 帮助 Rollup 查找外部模块，然后安装，相关配置 import resolve from 'rollup-plugin-node-resolve'; export default { ... plu...

RollUP 学习整理 源码创建项目，安装 Rollup mkdir rollup-demo cd rollup-demo mkdir src #创建源码目录 npm init sudo npm install --save-dev rollup #安装Rollup创建配置文件 项目根目录下，创建 rollup.conf...

React - Webpack 开发环境重新搭建说明 距离初次使用 react 已经有一年半左右的时间，无论是 react 全家桶（redux react-router 等）还是构建工具 webpack 等都有了版本的更新，配置使用上多少都发生了变化，这里针对当前最新的版本重新搭建做一下记录方便日后查询。 webpack 环境配置参考了 vue-cli 中的 webpack

NPM 常用命令说明 npm 是 Node 默认的模块管理器是一个命令行下的软件，用来安装和管理 Node 模块安装 安装 Node 的时候会默认安装 npm ，但是这个 npm 可能不是最新的版本，可以通过以下命令更新 npm 版本 # 安装最新版本 sudo npm install npm@latest -g # 查看版本 npm --version

yarn 命令使用版本说明 （当前文档使用版本）yarn : 0.1安装 macOS 通过 homebrew 安装 brew install yarn Windows 下载安装 下载地址 查看版本 yarn --version 1. 开始一个新工程 yarn init对应 npm init2. 添加一个依赖 yarn add webpack@2.3.

webpack-3 react-router-4 react-15.6 升级记录 模板源码 react16 + react-router4 + webpack开发环境搭建说明1. react-router 升级到 4.1.2，API 变化很大，具体API解析，请看这篇文章react-router 4 升级攻略2. 从 webpack 2.x 升级到 webpac

react-webpack2 - 模块热替换[HMR] 模块热替换功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载页面。这使得你可以在独立模块变更后，无需刷新整个页面，就可以更新这些模块，极大地加速了开发时间。 webpack3 react-router4 热模块替换 看这里 react16 + react-router4 + webpack开发环境搭建

react-webpack 2 - 完整配置案例 源码 webpack 开发跨域问题解决 react16 + react-router4 + webpack开发环境搭建1.先定义一些配置常量 /webpack/config.js // 引入 node.js path 模块 const path = require('path'); //

webpack 中使用 workbox 实现 PWA说明 重要文件版本“workbox-webpack-plugin”: “^3.0.0”“webpack”: “^3.11.0” webpack 提供了 workbox 插件 workbox-webpack-pluginwebpack 中使用 在 production 版本配置中使用1...

升级 webpack 到 4.x 版本说明 webpack 4 可以零配置启动，也支持通过配置文件进行更细致的配置，相比于上一个版本，配置已经简化了很多 webpack 4 引入了 mode 用来设置开发环境，同时也可以简化配置项，不同的 mode 会携带不同的默认配置--mode development 开发模式更关注开发体验：编译速度、报错信息--mode ...

Webpack 学习说明 最近学习了一下webpack，结合react 试验了一下，跟 使用 gulp 比，各有优缺点，公司暂时没有打算使用 webpack 开发，所以学的不是很深入，这里，总结了一下学些成果，其他一些高级用法，慢慢再来学习。简介 webpack 用来构建大型单页面应用，所有资源都可以看做是模块 webpack 的前身 browserify 在webpa