本文介绍的是 pnpm 管理 Monorepo 项目实践。

什么是 Monorepo​

Monorepo 项目简称多包项目，一个包含多个子项目的仓库。

那为什么要放多个项目在一个仓库下呢？

是因为这些项目互相引用，相互依赖，放在一个仓库下方便管理及依赖。

所以管理一个多包项目的关键，需要实现以下 2 点：

• 能够很方便的管理包与包之间的依赖关系
• 能够在发布其中一个包时，自动更新依赖了该包的其他包并发布

什么是 lerna​

使用最广泛成熟的 Monorepe 项目管理方案就是 lerna + yarn。

lerna 是一个优化使用 git 和 npm 管理多包存储库工作流的工具。

它具有以下功能：

• 自动解决 packages 之间的依赖关系；
• 通过 git 检测文件改动，自动发布；
• 根据 git 提交记录，自动生成 CHANGELOG。

更多详细的 lerna 介绍可以见我的另外一篇博客：最详细的 lerna 中文手册。

既然 lerna 这么好用也这么熟悉了，那为什么还要切换到 pnpm 呢？

有以下几个原因：

• pnpm 内置了管理 monorepe 功能，使用起来比 lerna 简单
• pnpm 安装比 yarn 高效，也节省电脑内存

什么是 pnpm​

pnpm 介绍可以查看 pnpm 官网。

pnpm 是新一代的包管理工具，相较于 npm 和 yarn，有以下 2 个优点：

节约磁盘空间并提升安装速度​

节约磁盘空间：

• pnpm 安装依赖时，依赖会被存储在硬盘中，不同项目的同一依赖都会硬链接到硬盘位置，不会额外占用磁盘空间。

• 同一依赖包的不同版本，也只会将不同版本中有差异的文件添加到仓库中，不会下载整个包占用磁盘空间。

提升安装速度：

• 安装依赖时，会先去硬盘位置寻找包，如果能找到，则建立硬链接，比起重新下载包或者从缓存中拷贝移动包，速度快了很多

创建非扁平化的 node_modules 文件夹​

npm、yarn 为了解决同一依赖被安装多次的问题，将所有包都被提升到模块目录的根目录。

但是当依赖包有多个版本的时候，只会提升一个，其余版本的包依然会被安装多次。

另外扁平化 node_modules 时，项目可以访问到未被添加进当前项目的依赖，这样是有隐患的，因为没有显式依赖，万一有一天别的包不依赖这个包了，代码就不能跑了，因为你依赖这个包，但是现在不会被安装了。

pnpm 采用磁盘硬链接连接依赖，已经解决了依赖会被安装多次的问题。

为了避免幽灵依赖，pnpm 选择创建非扁平化的 node_modules，项目无法访问到未被添加进当前项目的依赖。

快速开始​

上面已经了解到为什么选择 pnpm 了，那么下面就一起用 pnpm 来管理 Monorepo 吧。

全局安装 pnpm​

nvm use 16
npm i pnpm -g

创建 Monorepo 项目​

创建目录结构：

mkdir my-project
cd ./my-project
npm init -y
mkdir packages
cd ./packages
mkdir my-project-a
cd ./my-project-a
npm init -y
mkdir my-project-b
cd ./my-project-b
npm init -y

项目结构如下：

启动 pnpm 的 workspace 功能，根目录新增 pnpm-workspace.yaml，指定工作空间的目录：

packages:
  - "packages/**"

当我们配置了指定工作空间的目录后，packages 里的包互相引用时，会自动依赖本地编译的路径，方便实时调试。

至此我们就解决了 Monorepre 项目的管理包与包之间的依赖关系的问题。

安装项目内依赖​

限制仅允许 pnpm 安装依赖，更新 package.json：

{
  "scripts": {
    "preinstall": "npx only-allow pnpm"
  }
}

安装 eslint 等全局依赖：

pnpm i eslint -w -D

安装子项目内独立的依赖：

cd ./packages/my-project-a
pnpm i rollup -D

发布流程​

pnpm 没有提供内置的发布流程解决方案，官方推荐了两个开源的版本控制工具：

• changesets
• rush

changesets 的入手学习成本更低，于是乎选择了 changesets 来管理发布流程。

安装 changesets​

pnpm add -Dw @changesets/cli

初始化 changesets​

pnpm changeset init

初始化后生成的 .changeset/config.json：

{
  "$schema": "https://unpkg.com/@changesets/config@2.1.1/schema.json",
  "changelog": "@changesets/cli/changelog", // changelog 生成方式
  "commit": false, // 不要让 changeset 在 publish 的时候帮我们做 git add
  "fixed": [],
  "linked": [], // 配置哪些包要共享版本
  "access": "restricted", // 公私有安全设定，内网建议 restricted ，开源使用 public
  "baseBranch": "master", // 项目主分支
  "updateInternalDependencies": "patch", // 确保某包依赖的包发生 upgrade，该包也要发生 version upgrade 的衡量单位（量级）
  "ignore": [] // 不需要变动 version 的包
}

管理 changelog​

如果是开源库可以安装 @changesets/changelog-github 来管理 changelog。

安装：

pnpm add -Dw @changesets/changelog-github

更新 .changeset/config.json：

{
  "changelog": [
    "@changesets/changelog-github",
    {
      "repo": "worktile/slate-angular" // 改为你的 github 仓储
    }
  ]
}

如果不是开源库，则保持 "changelog": "@changesets/cli/changelog"。

生成 changesets​

npx changeset

选择要发布的包：

选择发布的类型：

填写发布备注：

确认发布：

生成临时文件：

更新版本​

更新版本前可以先把开发区的改动提交上去。

git add .
git commit -m 'feat: msg'
git push

更新版本：

npx changeset version

自动生成 CHANGELOG.md 并更新 package.json 中的版本，同时如果子项目间有相互依赖，也会更新依赖版本。

发布版本​

发布至 npm：

npx changeset publish

至此我们就解决了 Monorepre 项目的在发布其中一个包时，自动更新依赖了该包的其他包并发布的问题。

小结​

pnpm 是不是比 yarn + lerna 更香？节省磁盘空间，安装依赖更快，内置 Monorepo 功能。

说实话，不得不用 pnpm 的原因，还得是电脑内存不够用，20个项目，40G node_modules 的内存就没了。

所以，赶紧转 pnpm 吧。

项目地址：https://github.com/jiaozitang/web-learn-note/tree/feat/pnpm

希望能对你有所帮助，感谢阅读～

别忘了点个赞鼓励一下我哦，笔芯 ❤️

参考资料​

• pnpm + workspace + changesets 构建你的 monorepo 工程
• 使用 pnpm 构建 Monorepo 项目
• 使用 Changesets 管理类库版本及更新日志
• pnpm 是凭什么对 npm 和 yarn 降维打击的

介绍​

本文带你一起使用 Rollup 打包项目，实现以下功能：

• 自动将 dependencies 依赖声明为 externals
• 支持处理外部 npm 依赖
• 支持基于 CommonJS 模块引入
• 支持 typescript，并导出声明文件
• 支持 scss，并添加前缀
• 支持自动清除调试代码
• 打包输出文件保留原始模块结构
• 支持按需加载

一、什么是 rollup​

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

二、为什么是 rollup​

为什么是 rollup 而不是 webpack 呢？

rollup的特色是 ES6 模块和代码 Tree-shaking，这些 webpack 同样支持，除此之外 webpack 还支持热模块替换、代码分割、静态资源导入等更多功能。

当开发应用时当然优先选择的是 webpack，但是若你项目只需要打包出一个简单的 bundle 包，并是基于 ES6 模块开发的，可以考虑使用 rollup。

rollup 相比 webpack，它更少的功能和更简单的 api，是我们在打包类库时选择它的原因。

三、支持打包的文件格式​

rollup 支持的打包文件的格式有 amd, cjs, es\esm, iife, umd。其中，amd 为 AMD 标准，cjs 为 CommonJS 标准，esm\es 为 ES 模块标准，iife 为立即调用函数， umd 同时支持 amd、cjs 和 iife。

四、快速开始​

1. 安装​

npm install --global rollup

2. 基础打包​

新增文件 src/main.js：

// src/main.js
import foo from "./foo.js";
export default function () {
  console.log(foo);
}

新增文件 src/foo.js：

export default "hello world!";

项目根目录下新增文件 rollup.config.js：

export default {
  input: "src/main.js",
  output: {
    file: "bundle.js",
    format: "cjs",
  },
};

运行命令：

rollup -c

得到产物 bundle.js：

"use strict";

var foo = "hello world!";

// src/main.js
function main() {
  console.log(foo);
}

module.exports = main;

这时我们使用 Rollup 将 src/main.js、src/foo.js打包成功，完成了第一个 bundle，。

3. 引入外部资源​

更新 src/main.js，添加外部资源 lodash-es 引入：

// src/main.js
import foo from "./foo.js";

import { sum } from "lodash-es";

export default function () {
  console.log(foo);
  console.log(sum[(1, 2)]);
}

再次打包 rollup -c，发现有报错 (!) Unresolved dependencies：

这是因为当项目中引入外部资源时，如 npm 包，rollup 不知道如何打破常规去处理这些依赖。

有 2 种方法引入外部资源：

• 添加插件 @rollup/plugin-node-resolve 将我们编写的源码与依赖的第三方库进行合并；
• 配置 external 属性，告诉 rollup.js 哪些是外部的类库。

3.1 resolve 插件​

@rollup/plugin-node-resolve 插件让 rollup 能够处理外部依赖。

安装：

yarn add @rollup/plugin-node-resolve -D

更新 rollup.config.js：

import resolve from "@rollup/plugin-node-resolve";
export default {
  plugins: [resolve()],
};

重新打包得到产物，已经包含了 lodash-es：

"use strict";

var foo = "hello world!";

/**
 * This method returns the first argument it receives.
 *
 * @static
 * @since 0.1.0
 * @memberOf _
 * @category Util
 * @param {*} value Any value.
 * @returns {*} Returns `value`.
 * @example
 *
 * var object = { 'a': 1 };
 *
 * console.log(_.identity(object) === object);
 * // => true
 */
function identity(value) {
  return value;
}

/**
 * The base implementation of `_.sum` and `_.sumBy` without support for
 * iteratee shorthands.
 *
 * @private
 * @param {Array} array The array to iterate over.
 * @param {Function} iteratee The function invoked per iteration.
 * @returns {number} Returns the sum.
 */
function baseSum(array, iteratee) {
  var result,
    index = -1,
    length = array.length;

  while (++index < length) {
    var current = iteratee(array[index]);
    if (current !== undefined) {
      result = result === undefined ? current : result + current;
    }
  }
  return result;
}

/**
 * Computes the sum of the values in `array`.
 *
 * @static
 * @memberOf _
 * @since 3.4.0
 * @category Math
 * @param {Array} array The array to iterate over.
 * @returns {number} Returns the sum.
 * @example
 *
 * _.sum([4, 2, 8, 6]);
 * // => 20
 */
function sum(array) {
  return array && array.length ? baseSum(array, identity) : 0;
}

// src/main.js

function main() {
  console.log(foo);
  console.log(sum([1, 2]));
}

module.exports = main;

成功运行：

3.2 external 属性​

有些场景下，虽然我们使用了 resolve 插件，但可能我们仍然想要某些库保持外部引用状态，这时我们就需要使用 external 属性，来告诉 rollup.js 哪些是外部的类库。

更新 rollup.config.js：

import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";

export default {
  input: "src/main.js",
  output: {
    file: "bundle.js",
    format: "esm",
    name: "test",
  },
  plugins: [nodeResolve(), commonjs()],
  external: ["react"],
};

3.3 external 插件​

每个类库都要手动添加至 externals 未免太麻烦，这时候可以用 rollup-plugin-node-externals 插件，自动将外部类库声明为 externals。

安装：

yarn add rollup-plugin-node-externals -D

更新 rollup.config.js：

import externals from "rollup-plugin-node-externals";

export default [
  {
    plugins: [
      externals({
        devDeps: false, // devDependencies 类型的依赖就不用加到 externals 了。
      }),
    ],
  },
];

4. 引入 CommonJs 模块​

4.1 CommonJs 插件​

rollup.js 编译源码中的模块引用默认只支持 ES6+的模块方式 import/export。然而大量的 npm 模块是基于 CommonJS 模块方式，这就导致了大量 npm 模块不能直接编译使用。

需要添加 @rollup/plugin-commonjs 插件来支持基于 CommonJS 模块方式 npm 包。

安装：

yarn add @rollup/plugin-commonjs -D

更新 rollup.config.js：

import commonjs from "@rollup/plugin-commonjs";

export default {
  plugins: [commonjs()],
};

更新 src/foo.js：

module.exports = {
  text: "hello world!",
};

重新打包，打包成功：

5. 引入 Sass 资源​

rollup-plugin-postcss 默认集成了对 scss、less、stylus 的支持。

5.1 打包支持 sass 文件​

新增 src/foo.scss：

body {
  background-color: red;
  display: flex;
}

更新 src/main.js：

// src/main.js
import foo from "./foo.js";
import "./foo.scss";

export default function () {
  console.log(foo.text);
}

安装：

yarn add rollup-plugin-postcss -D

更新 rollup.config.js：

import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import postcss from "rollup-plugin-postcss";

export default {
  input: "src/main.js",
  output: {
    file: "bundle.js",
    format: "esm",
    name: "test",
  },
  plugins: [nodeResolve(), commonjs(), postcss()],
  external: ["react"],
};

打包产物：

"use strict";

var foo = {
  text: "hello world!",
};

function styleInject(css, ref) {
  if (ref === void 0) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === "undefined") {
    return;
  }

  var head = document.head || document.getElementsByTagName("head")[0];
  var style = document.createElement("style");
  style.type = "text/css";

  if (insertAt === "top") {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "body {\n  background-color: red;\n}";
styleInject(css_248z);

// src/main.js

function main() {
  console.log(foo.text);
}

module.exports = main;

效果如图：

5.2 css 加前缀​

安装：

yarn add autoprefixer -D

更新 packages.json：

  "browserslist": [
    "defaults",
    "not ie < 8",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

更新 rollup.config.js：

import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import autoprefixer from "autoprefixer";
import postcss from "rollup-plugin-postcss";

export default {
  input: "src/main.js",
  output: {
    file: "bundle.js",
    format: "umd",
    name: "test",
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    postcss({
      plugins: [autoprefixer()],
    }),
  ],
  external: ["react"],
};

效果如图：

5.3 css 压缩​

安装：

yarn add cssnano -D

更新 rollup.config.js：

import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";
import postcss from "rollup-plugin-postcss";

export default {
  input: "src/main.js",
  output: {
    file: "bundle.js",
    format: "umd",
    name: "test",
  },
  plugins: [
    nodeResolve(),
    commonjs(),
    postcss({
      plugins: [autoprefixer(), cssnano()],
    }),
  ],
  external: ["react"],
};

效果如图：

5.4 抽离单独的 css 文件​

更新 rollup.config.js：

export default [
  {
    plugins: [
      postcss({
        plugins: [autoprefixer(), cssnano()],
        extract: "css/index.css",
      }),
    ],
  },
];

效果如图：

6. 引入 Typescript 资源​

6.1 typescript 插件​

修改 src/foo.js -> src/foo.ts：

export default {
  text: "hello world!",
};

更新 src/main.js：

// src/main.js
import foo from "./foo.ts";
import "./foo.scss";

export default function () {
  console.log(foo.text);
}

安装：

yarn add @rollup/plugin-typescript -D

更新 rollup.config.js：

import typescript from "@rollup/plugin-typescript";
export default [
  {
    plugins: [typescript()];
  }
];

成功支持 Ts 文件导出：

6.2 导出类型声明文件​

更新 rollup.config.js：

import typescript from "@rollup/plugin-typescript";
export default [
  {
    plugins: [
        typescript({
            outDir: "dist",
            declaration: true,
            declarationDir: "dist",
        })
    ];
  }
];

成功支持类型声明文件导出：

7. 打包产物清除调试代码​

插件 @rollup/plugin-strip 用于从代码中删除 debugger 语句和函数。包括 assert.equal、console.log 等等。

安装：

yarn add @rollup/plugin-strip -D

更新 rollup.config.js：

import strip from "@rollup/plugin-strip";
export default [
  {
    plugins: [
        strip()
    ];
  }
];

8. 打包输出文件保留原始模块结构​

上面我们的 output 配置是这样的：

output: {
    dir: path.dirname('dist/bundle.js'),
    format: 'es',
  }

打包产物如下：

那么怎么才能把 index.js、index2.js 改成 foo/index.js、hello/index.js 呢？

修改 output，更新 rollup.config.js：

output: {
    dir: path.dirname('dist/bundle.js'),
    format: 'es',
    exports: 'named', // 指定导出模式（自动、默认、命名、无）
    preserveModules: true, // 保留模块结构
    preserveModulesRoot: 'src', // 将保留的模块放在根级别的此路径下
  },

这时打包产物就和源码的结构一致了：

9. 按需加载​

rollup 支持输出格式为 es 模块化，就会按模块输出。

所以我们上面的配置已经实现了按需加载了。

五、一个真实的组件库的 rollup 打包配置​

项目地址：https://github.com/jiaozitang/react-masonry-component2

该项目支持：

• 打包输出文件保留原始模块结构
• 自动将 dependencies 依赖声明为 externals
• 支持处理外部 npm 依赖
• 支持基于 CommonJS 模块引入
• 支持 typescript，并导出声明文件
• 支持 scss，并添加前缀
• 支持自动清除调试代码
• 支持按需加载

1. 安装​

npm i rollup -g

yarn add typescript postcss @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-strip @rollup/plugin-typescript rollup-plugin-postcss rollup-plugin-node-externals autoprefixer -D

2. 配置​

项目根目录下新增 rollup.config.js：

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import strip from "@rollup/plugin-strip";
import typescript from "@rollup/plugin-typescript";
import autoprefixer from "autoprefixer";
import path from "path";
import externals from "rollup-plugin-node-externals";
import postcss from "rollup-plugin-postcss";

import pkg from "./package.json";

export default [
  {
    input: "./src/index.ts", // 入口文件
    output: [
      {
        // 出口文件
        dir: path.dirname(pkg.module),
        format: "es", // es模块导出，支持按需加载
        name: pkg.name,
        exports: "named", // 指定导出模式（自动、默认、命名、无）
        preserveModules: true, // 保留模块结构
        preserveModulesRoot: "src", // 将保留的模块放在根级别的此路径下
      },
    ],
    plugins: [
      // 自动将dependencies依赖声明为 externals
      externals({
        devDeps: false,
      }),
      // 处理外部依赖
      resolve(),
      // 支持基于 CommonJS 模块引入
      commonjs(),
      // 支持 typescript，并导出声明文件
      typescript({
        outDir: "es",
        declaration: true,
        declarationDir: "es",
      }),
      // 支持 scss，并添加前缀
      postcss({
        plugins: [autoprefixer()],
      }),
      // 清除调试代码
      strip(),
    ],
  },
];

更新 packages.json：

{
  "module": "es/index.js",
  "types": "es/index.d.ts",
  "files": ["es"]
}

新增 tsconfig.json：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
  },
  "include": [
    "src"
  ],
  "exclude": [
      "src/**/stories.*",
      "src/**/.spec.*",
      "src/**/.mdx"
  ]
}

项目结构：

打包产物：

小结​

本文介绍了 rollup 的各个功能的使用方法，rollup 自身能力较弱，依靠插件完成完整的组件库打包。

可以直接拷贝文中配置，实现一个按需加载的组件库打包。

项目地址：https://github.com/jiaozitang/react-masonry-component2

希望能对你有所帮助，感谢阅读～

别忘了点个赞鼓励一下我哦，笔芯 ❤️

往期精彩​

• 从0到1开发一个React组件库

参考资料​

• Rollup 官网
• rollup 从入门到打包一个按需加载的组件库
• 一文带你快速上手 Rollup

一、背景​

本文介绍 5 种瀑布流场景的实现，大家可以根据自身的需求场景进行选择。

5 种场景分别是：

我已经将这 5 种场景的实现封装成 npm 包，npm 包地址：https://www.npmjs.com/package/react-masonry-component2，可以直接在 React 项目中安装使用。

二、介绍​

瀑布流，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

下图就是一个瀑布流布局的示意图：

三、纵向+高度排序​

纵向+高度排序指的是，每列按照纵向排列，往高度最小的列添加内容，如下图所示。

实现纵向+高度排序瀑布流的方法是 CSS 多列布局。

1. 多列布局介绍​

多列布局指的是 CSS3 可以将文本内容设计成像报纸一样的多列布局，如下实例:

CSS3 的多列属性:

• column-count：指定了需要分割的列数；
• column-gap：指定了列与列间的间隙；
• column-rule-style：指定了列与列间的边框样式；
• column-rule-width：指定了两列的边框厚度；
• column-rule-color：指定了两列的边框颜色；
• column-rule：是 column-rule-* 所有属性的简写；
• column-span：指定元素跨越多少列；
• column-width：指定了列的宽度。

2. 实现思路​

瀑布流实现思路如下：

• 通过 CSS column-count 分割内容为指定列；
• 通过 CSS break-inside 保证每个子元素渲染完再换行；

3. 实现代码​

.css-column {
  column-count: 4; //分为4列
}

.css-column div {
  break-inside: avoid; // 保证每个子元素渲染完在换行
}

4. 直接使用 npm 包​

npm - react-masonry-component2 的使用方法：

import { Masonry } from 'react-masonry-component2'

export const MyComponent = (args) => {
  return (
    <Masonry direction='column'>
      <div></div>
      <div></div>
      <div></div>
    </Masonry>
  )
}

在线预览：https://632339a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81--%E7%BA%B5%E5%90%91%E5%B8%83%E5%B1%80

四、纵向+高度排序+根据宽度自适应列数​

在纵向+高度排序的基础上，按照宽度自适应列数。

1. 实现思路​

• 监听 resize 方法，根据屏幕宽度得到该宽度下应该展示的列数

2. 实现代码​

import { useCallback, useEffect, useMemo, useState } from 'react'

import { DEFAULT_COLUMNS_COUNT } from '../const'

export const useHasMounted = () => {
  const [hasMounted, setHasMounted] = useState(false)
  useEffect(() => {
    setHasMounted(true)
  }, [])
  return hasMounted
}

export const useWindowWidth = () => {
  const hasMounted = useHasMounted()
  const [width, setWidth] = useState(0)

  const handleResize = useCallback(() => {
    if (!hasMounted) return
    setWidth(window.innerWidth)
  }, [hasMounted])

  useEffect(() => {
    if (hasMounted) {
      window.addEventListener('resize', handleResize)
      handleResize()
      return () => window.removeEventListener('resize', handleResize)
    }
  }, [hasMounted, handleResize])

  return width
}

export const useColumnCount = (columnsCountBreakPoints: {
  [props: number]: number
}) => {
  const windowWidth = useWindowWidth()
  const columnCount = useMemo(() => {
    const breakPoints = (
      Object.keys(columnsCountBreakPoints as any) as unknown as number[]
    ).sort((a: number, b: number) => a - b)
    let count =
      breakPoints.length > 0
        ? columnsCountBreakPoints![breakPoints[0]]
        : DEFAULT_COLUMNS_COUNT

    breakPoints.forEach((breakPoint) => {
      if (breakPoint < windowWidth) {
        count = columnsCountBreakPoints![breakPoint]
      }
    })

    return count
  }, [windowWidth, columnsCountBreakPoints])

  return columnCount
}

动态定义 style columnCount，实现根据屏幕宽度自适应列数：

const { columnsCountBreakPoints } = props
const columnCount = useColumnCount(columnsCountBreakPoints)
return (
  <div className={classNames(['masonry-column-wrap'])} style={{ columnCount }}>
    {children}
  </div>
)

3. 直接使用 npm 包​

npm - react-masonry-component2 的使用方法：

import { Masonry } from 'react-masonry-component2'

export const MyComponent = (args) => {
  return (
    <Masonry
      direction='column'
      columnsCountBreakPoints={{
        1400: 5,
        1000: 4,
        700: 3,
      }}
    >
      <div></div>
      <div></div>
      <div></div>
    </Masonry>
  )
}

在线预览：https://632339a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81--%E7%BA%B5%E5%90%91%E5%B8%83%E5%B1%80

五、横向​

横向瀑布流指的是，每列按照横向排列，如下图所示。

实现横向瀑布流的方法是CSS 弹性布局。

1. 弹性布局介绍​

弹性布局，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

CSS3 的弹性布局属性：

• flex-dicreation：指定了弹性子元素的排列方式；
• justify-content：指定了弹性布局的主轴对齐方式；
• align-items：指定了弹性布局的侧轴对齐方式；
• flex-wrap：指定了弹性子元素的换行方式；
• align-content：指定弹性布局各行的对齐方式；
• order：指定弹性子元素的排列顺序；
• align-self：指定弹性子元素的纵向对齐方式；
• flex  属性用于指定弹性子元素如何分配空间；
  • auto: 计算值为 1 1 auto
  • initial: 计算值为 0 1 auto
  • none：计算值为 0 0 auto
  • inherit：从父元素继承
  • [ flex-grow ]：定义弹性盒子元素的扩展比率。
  • [ flex-shrink ]：定义弹性盒子元素的收缩比率。
  • [ flex-basis ]：定义弹性盒子元素的默认基准值。

2. 实现思路​

瀑布流实现思路如下：

• CSS 弹性布局对 4 列按横向排列，对每一列内部按纵向排列。

3. 实现代码​

瀑布流实现代码如下：

<div className={classNames(['masonry-flex-wrap'])}>
  <div className='masonry-flex-wrap-column'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div className='masonry-flex-wrap-column'>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

.masonry-flex-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: stretch;

  &-column {
    display: 'flex';
    flex-direction: 'column';
    justify-content: 'flex-start';
    align-content: 'stretch';
    flex: 1;
  }
}

4. 直接使用 npm 包​

npm - react-masonry-component2 的使用方法：

import { Masonry } from 'react-masonry-component2'

export const MyComponent = (args) => {
  return (
    <Masonry
      columnsCountBreakPoints={{
        1400: 5,
        1000: 4,
        700: 3,
      }}
    >
      <div></div>
      <div></div>
      <div></div>
    </Masonry>
  )
}

在线预览：https://632339a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81--%E6%A8%AA%E5%90%91%E5%B8%83%E5%B1%80

六、横向+高度排序​

横向+高度排序指的是，每列按照横向排列，往高度最小的列添加内容，如下图所示。

高度排序就需要用 JS 逻辑来做了。

1. 实现思路​

• JS 将瀑布流的列表按高度均为分为指定列数，比如瀑布流为 4 列，那么就要把瀑布流列表分成 4 个列表

2. 实现代码​

export const getColumnsSortWithHeight = (
  children: React.ReactNode,
  columnCount: number
) => {
  const columns: {
    height: number
    children: React.ReactNode[]
  }[] = Array.from({ length: columnCount }, () => ({
    height: 0,
    children: [],
  }))

  React.Children.forEach(children, (child: React.ReactNode, index) => {
    if (child && React.isValidElement(child)) {
      if (index < columns.length) {
        columns[index % columnCount].children.push(child)
        columns[index % columnCount].height += child.props.height
        return
      }

      const minHeightColumn = minBy(columns, (a) => a.height) as {
        height: number
        children: React.ReactNode[]
      }
      minHeightColumn.children.push(child)
      minHeightColumn.height += child.props.height
    }
  })

  return columns
}

3. 直接使用 npm 包​

npm - react-masonry-component2 的使用方法：

import { Masonry, MasonryItem } from 'react-masonry-component2'

export const MyComponent = (args) => {
  return (
    <Masonry
      sortWithHeight
      columnsCountBreakPoints={{
        1400: 5,
        1000: 4,
        700: 3,
      }}
    >
      <MasonryItem height={200}>
        <div></div>
      </MasonryItem>
      <MasonryItem height={300}>
        <div></div>
      </MasonryItem>
      <MasonryItem height={400}>
        <div></div>
      </MasonryItem>
    </Masonry>
  )
}

在线预览：https://632339a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81--%E6%A8%AA%E5%90%91%E5%B8%83%E5%B1%80%E9%AB%98%E5%BA%A6%E6%8E%92%E5%BA%8F

七、横向+高度排序+根据宽度自适应列数​

根据宽度自适应列数的做法和纵向场景一致，都是监听 resize 方法，根据屏幕宽度得到该宽度下应该展示的列数，这里不做赘述。

1. 直接使用 npm 包​

npm - react-masonry-component2 的使用方法：

import { Masonry } from 'react-masonry-component2'

export const MyComponent = (args) => {
  return (
    <Masonry
      sortWithHeight
      direction='column'
      columnsCountBreakPoints={{
        1400: 5,
        1000: 4,
        700: 3,
      }}
    >
      <div></div>
      <div></div>
      <div></div>
    </Masonry>
  )
}

在线预览：https://632339a3ed0b247d36b0fa3c-njrsmzdcdj.chromatic.com/?path=/story/%E5%B8%83%E5%B1%80-masonry-%E7%80%91%E5%B8%83%E6%B5%81--%E6%A8%AA%E5%90%91%E5%B8%83%E5%B1%80%E9%AB%98%E5%BA%A6%E6%8E%92%E5%BA%8F

小结​

本文介绍了 5 种瀑布流场景的实现：

• 纵向+高度排序
• 纵向+高度排序+根据宽度自适应列数
• 横向
• 横向+高度排序
• 横向+高度排序+根据宽度自适应列数

感兴趣的同学可以到项目源码查看完整实现代码。

也可以下载 https://www.npmjs.com/package/react-masonry-component2 直接使用。

更多思考​

当瀑布流数据特别多时，dom 节点过多，会影响到页面性能，那么就需要为瀑布流添加滚动预加载和节点回收功能来进行优化了，在下个版本中将更新滚动预加载和节点回收功能的实现原理。

背景​

前端技术的不断发展过程中，组件化、模块化已成为主流。

当开发的项目中有一些公共组件可以沉淀的时候，将这些组件抽离出来，开发一个组件库无疑是一个好的选择。

那么怎么去开发一个组件库呢？本文将和你一起从零开发一个 React 组件库。

• 本文项目源码：https://github.com/jiaozitang/react-masonry-component2
• 本文组件库 npm 包地址：https://www.npmjs.com/package/react-masonry-component2

一、搭建项目​

组件库的第一步是搭建项目，选择合适的技术，并制定代码规范。

1. 技术选型​

1.1 前端框架​

前端框架的选择不用多说，大家都是选择日常开发中使用到的框架，本文使用的是 React。

1.2 组件库工具​

组件库工具，市面上比较流行的 2 个组件库工具分别的 dumi 和 Storybook。

dumi，是一款为组件开发场景而生的文档工具，与  father  一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。

Storybook 是一个用于单独构建 UI 组件和页面的前端工具。成千上万的团队将它用于 UI 开发、测试和文档。它是开源和免费的。

dumi 和 Storybook 都是专用于组件开发场景的工具，由于 Storybook 更加支持测试难以到达的状态和边缘案例，因此最终选择 Storybook 来开发组件库。

2. 快速开始​

2.1 creat-react-app​

使用 creat-react-app 创建一个支持 TypeScript 的 React 项目。

npx create-react-app my-react-component --template typescript

2.2 Storybook​

Storybook 教程：https://storybook.js.org/。

为 React 项目添加 Storybook 能力。

cd ./my-react-component
npx storybook init

此时通过 yarn storybook，将在本地启动 Storybook 并输出地址。根据您的系统配置，它会自动在新的浏览器选项卡中打开地址，然后您会看到一个欢迎屏幕。

3. 代码规范​

3.1 Prettier​

Prettier 是一个代码格式化工具，可以让团队的代码风格保持一致。可支持的源码类型包括：JavaScript、JSX、Angular、Vue、Flow、TypeScript、CSS、HTML、JSON、YAML 等等。

安装：

yarn add prettier -D

项目根目录下添加配置文件 .prettierrc：

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

修改 packages.json：

"scripts": {
    "prettier": "prettier src --write",
}

运行 yarn prettier 将会格式化 src 目录下所有文件的代码样式。

3.2 ESlint​

ESLint 用于检测 JS 代码，发现代码质量问题并修复问题，还可以自己根据项目需要进行规则的自定义配置以及检查范围等等。

安装：

yarn add eslint eslint-plugin-react eslint-plugin-simple-import-sort eslint-plugin-unused-imports @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

项目根目录下添加配置文件 .eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  overrides: [],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: [
    "react",
    "@typescript-eslint",
    "unused-imports",
    "simple-import-sort",
  ],
  rules: {
    "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
    "unused-imports/no-unused-imports": "warn",
    "unused-imports/no-unused-vars": [
      "warn",
      {
        vars: "all",
        varsIgnorePattern: "^_",
        args: "after-used",
        argsIgnorePattern: "^_",
      },
    ],
    "simple-import-sort/imports": "warn",
    "simple-import-sort/exports": "warn",
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
  },
};

修改 packages.json：

"scripts": {
    "eslint": "eslint src --fix",
}

运行 yarn eslint 将会检测 src 下所有 js、ts、jsx、tsx 的语法及样式问题并进行修复。

3.3 lint-staged​

lint-staged  相当于一个文件过滤器，每次提交时只检查本次提交的暂存区的文件，它不能格式化代码和校验文件，需要自己配置一下，如：.eslintrc、.stylelintrc  等，然后在  package.json  中引入。

安装：

yarn add lint-staged -D

项目根目录下添加配置文件 .lintstagedrc：

{
  "src/**/*.tsx": ["prettier --write", "eslint --fix"],
  "src/**/*.scss": ["prettier --write"],
  "src/**/*.mdx": ["prettier --write"],
  "src/**/*.md": ["prettier --write"]
}

修改 packages.json：

"scripts": {
    "ling-staged": "ling-staged",
}

运行 yarn lint-staged 将对 git 暂存区所有文件执行 .lintstagedrc 中配置的命令。

3.4 husky​

husky  工具可以定义拦截  git  钩子，对提交的文件和信息做校验和自动修复。

安装：

yarn add husky -D

修改 packages.json：

"scripts": {
    "prepare": "husky install",
}

初始化 husky 配置文件：

yarn prepare

初始化 husky 配置文件后根目录会生成以下目录：

.husky 下新增配置文件 pre-commit：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install lint-staged

在 git commit 之前，将会自动执行上面 pre-commit 脚本配置的命令。

3.5 commitlint​

commitlint 是一个 git commit 信息校验工具。

安装：

yarn add commitlint @commitlint/config-conventional -D

项目根目录下添加配置文件 .commitlintrc.js：

module.exports = {
  extends: ["@commitlint/config-conventional"],
};

.husky 下新增配置文件 commit-msg：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

在 git commit-msg 钩子函数触发时，将会自动执行 commit-msg 脚本配置的命令，校验 commit msg 是否符合规范。

4. 新增组件​

在 src 目录下新增组件：

每个组件包含 4 个基础文件：

• [component-name].tsx
• [component-name].scss
• index.ts
• [component-name].stories.mdx

下文将举例瀑布流组件源码：

完整的瀑布流组件代码地址：https://github.com/jiaozitang/react-masonry-component2/tree/dev/src/Masonry。

4.1 masonry.tsx​

React 组件。

import React from "react";

import { DEFAULT_COLUMNS_COUNT_POINTS, MasonryDirection } from "./const";
import { useColumnCount } from "./hooks";
import MasonryAbsolute from "./masonry-absolute";
import MasonryColumn from "./masonry-column";
import MasonryFlex from "./masonry-flex";

export interface MasonryProps extends React.HTMLAttributes<HTMLElement> {
  /** 排列方向 */
  direction?: "row" | "column";
  sortWithHeight?: boolean; // 是否需要按高度排序
  useAbsolute?: boolean; // 是否开启绝对定位方法实现瀑布流，该模式默认开始按高度排序
  columnsCountBreakPoints?: {
    // 自适应的配置
    [props: number]: number;
  };
  children?: React.ReactNode;
  className?: string;
  style?: Record<string, any>;
  gutter?: number;
}

const Masonry: React.FC<MasonryProps> = (props) => {
  const {
    direction = MasonryDirection.row,
    columnsCountBreakPoints = DEFAULT_COLUMNS_COUNT_POINTS,
    useAbsolute,
  } = props;
  const columnCount = useColumnCount(columnsCountBreakPoints);

  if (useAbsolute) {
    return <MasonryAbsolute {...props} columnCount={columnCount} />;
  }
  if (direction === MasonryDirection.column) {
    return <MasonryColumn {...props} columnCount={columnCount} />;
  }
  if (direction === MasonryDirection.row) {
    return <MasonryFlex {...props} columnCount={columnCount} />;
  }
  return <div></div>;
};

export default Masonry;

4.2 masonry.scss​

组件的样式文件。

4.3 index.ts​

组件需要导出的内容。

import Masonry from "./masonry";
import { MasonryAbsoluteItem, MasonryItem } from "./masonry-item";

export { MasonryAbsoluteItem, MasonryItem };
export type { MasonryProps } from "./masonry";
export default Masonry;

4.4 masonry.stories.mdx​

组件案例，Storybook 特定语法。

Storybook 教程：https://storybook.js.org/。

组件案例在 yarn storybook 后可以在线查看效果：

也可以通过 Storybook 官方提供的工具发布成一个在线的文档地址，详细的发布教程在第三章节将会介绍。

二、打包组件库​

1. 技术选型​

比较热门的打包工具有 Webpack、rollup。

Webpack 对于代码分割和静态资源导入有着“先天优势”，并且支持热模块替换(HMR)，而 Rollup 并不支持，所以当项目需要用到以上，则可以考虑选择 Webpack。但是，Rollup 对于代码的 Tree-shaking 和 ES6 模块有着算法优势上的支持，若你项目只需要打包出一个简单的 bundle 包，并是基于 ES6 模块开发的，可以考虑使用 Rollup。

因此组件库打包工具选择 rollup。

更详细的 rollup 使用教程见我的另一篇博客：【实战篇】最详细的 Rollup 打包项目教程。

2. 快速开始​

2.1 安装​

npm i rollup -g

yarn add @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-strip @rollup/plugin-typescript rollup-plugin-postcss rollup-plugin-node-externals autoprefixer -D

2.2 打包配置​

项目根目录下新增配置文件 rollup.config.js：

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import strip from "@rollup/plugin-strip";
import typescript from "@rollup/plugin-typescript";
import autoprefixer from "autoprefixer";
import path from "path";
import externals from "rollup-plugin-node-externals";
import postcss from "rollup-plugin-postcss";

import pkg from "./package.json";

export default [
  {
    input: "./src/index.ts", // 入口文件
    output: [
      {
        // 出口文件
        dir: path.dirname(pkg.module),
        format: "es", // es模块导出，支持按需加载
        name: pkg.name,
        exports: "named", // 指定导出模式（自动、默认、命名、无）
        preserveModules: true, // 保留模块结构
        preserveModulesRoot: "src", // 将保留的模块放在根级别的此路径下
      },
    ],
    plugins: [
      // 自动将dependencies依赖声明为 externals
      externals({
        devDeps: false,
      }),
      // 处理外部依赖
      resolve(),
      // 支持基于 CommonJS 模块引入
      commonjs(),
      // 支持 typescript，并导出声明文件
      typescript({
        outDir: "es",
        declaration: true,
        declarationDir: "es",
      }),
      // 支持 scss，并添加前缀
      postcss({
        plugins: [autoprefixer()],
      }),
      // 清除调试代码
      strip(),
    ],
  },
];