使用Rollup,TypeScript,SCSS配置React组件库

yxlazy

已于 2023-01-04 17:46:19 修改

阅读量964

点赞数

分类专栏： React javascript 文章标签： react.js typescript scss

于 2023-01-04 17:45:09 首次发布

原文链接：https://www.codefeetime.com/post/rollup-config-for-react-component-library-with-typescript-scss/

版权

javascript 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

React

3 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Rollup配置构建React组件库，特别是与TypeScript和SCSS的集成。作者通过对比Webpack，强调Rollup在库构建中的简洁性和效率，并分享了自己的Rollup配置文件、代码分割方法及所用插件的说明。文章还提到了TypeScript配置文件的细节，并讨论了代码可视化和压缩工具的使用。

摘要由CSDN通过智能技术生成

本篇为翻译的文章，由于笔者能力有限，倘若阅读体验不好，可点击原文地址查看，原文地址：Rollup Config for React Component Library With TypeScript + SCSS

前言

在这篇文章中，我将尝试覆盖在构建React组件库时使用Rollup配置发挥作用的关键领域（特别是TypeScript和SCSS）。

同时，我将会为使用到的Rollup插件写一些说明，来说明插件的作用。

我绝对不是Rollup的大师，也不是构建React组件库的权威指南。我仅仅只是分享了用于构建我自己的React组件库（Codefee-Kit）时的Rollup配置，这只是我自己的一个笔记，或许能帮到一些人。

顺便说一下，组件库托管在Github上

动机

在此之前，我使用webpack去构建库。当时，我在获得第一个工作版本时遇到了很多麻烦。我仍然记得有个属性叫"library"，为了让webpack对库收集信息，你需要显示设置。我很傻，在我明白整个事情之前我在谷歌上搜索了很多信息。在整个踩坑过程中投入了大量时间。我当然不喜欢那里的配置文件的复杂性。嗯，是谁？哈哈哈

尽管如此，当时的工作版本并没有得到很好的优化。我的意思是，没有配置任何代码分割，构建的输出总是一个越来越大的index.js文件

最近，我终于又有了一些空闲时间！因此，我决定重新审视这个话题。在Webpack中对如何进行代码拆分进行了一些深挖，我只是觉得它太麻烦了。

最后，我决定彻底停止，然后跳到另一个流行的构建库的选择——Rollup！而且，它的配置简单得多，而且节省了我很多时间！天啊，我为什么不早点跳过去？！去我的！

有一句话是这样说的，“Rollup for libraries, Webpack for apps”。事实证明，在这一点上，它仍然非常重要！

“Rollup for libraries, Webpack for apps” https://medium.com/@PepsRyuu/why-i-use-rollup-and-not-webpack-e3ab163f4fd3

主题范围

请跳转到你感兴趣的部分

Rollup 配置文件
Rollup 代码分割
Rollup 插件说明

Rollup 配置文件

这是适用于我的配置文件。那里有相当多的活动部件，但我尽可能地把它清理干净，这样就不会太伤眼睛了哈哈。。。😛

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

import postcss from "rollup-plugin-postcss";
import visualizer from 'rollup-plugin-visualizer';
import { terser } from 'rollup-plugin-terser';
import { getFiles } from './scripts/buildUtils';

const extensions = ['.js', '.ts', '.jsx', '.tsx'];

export default {
  input: [
    './src/index.ts',
    ...getFiles('./src/common', extensions),
    ...getFiles('./src/components', extensions),
    ...getFiles('./src/hooks', extensions),
    ...getFiles('./src/utils', extensions),
  ],
  output: {
    dir: 'dist',
    format: 'esm',
    preserveModules: true,
    preserveModulesRoot: 'src',
    sourcemap: true,
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.build.json',
      declaration: true,
      declarationDir: 'dist',
    }),
    postcss(),
    terser(),
    visualizer({
      filename: 'bundle-analysis.html',
      open: true,
    }),
  ],
  external: ['react', 'react-dom'],
};

正如你所看到的，为了让Rollup工作，你仅仅只需要导出一个JSON对象。当然，如果你有多个配置需要配置，你也能导出一个数组。例如构建不同的目标文件时，像umd,cjs等

我在这里配置了4个属性：

input - 打包文件的入口。可以是字符串或者字符串数组
output - 打包文件的输出配置，例如配置打包输出的文件夹，配置sourcemap生成等
plugins - 外部包调用，帮助操作、更改构建行为，例如TypeScript, SCSS等
external - 不需要打包进构建包中的包，通常是指peerDependencies中设置的包，在我的例子中，，就是react和react-dom两个包

TypeScript 配置

以下是我的tsconfig文件。我有2个，一个是Rollup用于构建，另一个类似于基本配置，主要是用于开发

背后的原因是，我想排除我的Storybook stories files被TypeScript转译。它只用于开发时，我需要tsconfig。因此，创建了一个带有excludes的单独的配置文件

tsconfig.build.json

{
  "extends": "./tsconfig.json",
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/stories/**"
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": [ "es6", "dom" ],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "baseUrl": "src/",
    "paths": {
      "common": ["src/common/*"],
      "components": ["src/components/*"],
      "hooks": ["src/hooks/*"],
      "utils": ["src/utils/*"]
    }
  },
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest"
  ],
  "types": ["typePatches"]
}

Rollup 代码分割

在上面的配置中，我实际上使用了Rollup的代码分割 (code-splitting) 功能。

如果您注意到，我导出的JSON对象中的input属性实际上是字符串数组，而不是单个字符串。这实际上告诉Rollup将这些字符串中的每一个作为构建的单独入口点。所以，这就是代码分割构建。

数组中的所有这些字符串实际上是我在src文件夹中拥有的单个.ts和.tsx文件的相对路径。getFiles方法是我编写的一个实用方法，它帮助我深入检索所有扩展名为.js、.jsx、.ts和.tsx的文件。

下面是getFiles方法的代码:

const fs = require('fs');

export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
  let fileNames = [];
  const dirs = fs.readdirSync(entry);

  dirs.forEach((dir) => {
    const path = `${entry}/${dir}`;

    if (fs.lstatSync(path).isDirectory()) {
      fileNames = [
        ...fileNames,
        ...getFiles(path, extensions, excludeExtensions),
      ];

      return;
    }

    if (!excludeExtensions.some((exclude) => dir.endsWith(exclude))
      && extensions.some((ext) => dir.endsWith(ext))
    ) {
      fileNames.push(path);
    }
  });

  return fileNames;
};