@ihezebin/common v1.1.4

如何使用Rollup打包和发布一个组件

1.创建一个React组件

在 src/components/test 下新建 index.tsx 文件

import React, {FC} from "react";
import style from './index.module.scss';

interface TestProps {
    name: string;
}

const Test: FC<TestProps> = ({name}) => {

    return <div className={style.colorRed}>i am a test component, name: {name}</div>
}

export default Test

2.将编写的组件在一个统一入口抛出

在 src/index.ts 入口文件中抛出该组件

export { default as Test } from './components/test/index';
export {SSO_HOST, ENTRY_HOST } from './constant/host/index';

3.安装 Rollup 和一些 Rollup 插件作为开发依赖

yarn add @babel/preset-react rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-image rollup-plugin-json rollup-plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-svg rollup-plugin-terser rollup-plugin-typescript2 --dev  

在项目根目录下创建一个名为 rollup.config.cjs 的文件，并添加以下内容：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import json from 'rollup-plugin-json';
import image from 'rollup-plugin-image';
import svg from 'rollup-plugin-svg';
import {terser} from "rollup-plugin-terser";
import typescript from "rollup-plugin-typescript2";

export default {
    // 指定打包的入口文件，可以是单个文件或多个文件。
    // 还可以使用通配符来匹配多个文件，例如 src/*.js 可以匹配所有以 .js 结尾的文件
    input: 'src/bundle.ts',
    output: [
        {
            file: 'dist/bundle.js',//指定输出文件的路径，可以是单个文件或多个文件
            format: 'es',//指定输出文件的模块格式，支持 amd、cjs、es、iife 和 umd
            // 指定是否生成 sourcemap 文件，支持 true、false 和 'inline'。
            // Source Map（源代码映射）是一种文件格式，它记录了 JavaScript 或 CSS 等源文件和编译后的文件之间的映射关系。
            // 它的作用是让开发者在调试时能够方便地追踪到源代码的错误，而不是追踪到编译后的代码。
            // 在 Web 开发中，通常会将 JavaScript 或 CSS 等代码编译成压缩过的文件，以减小文件大小，提高加载速度。
            // 但是，压缩后的文件会让调试变得困难，因为错误信息会指向编译后的代码，而不是源代码。
            // 这时就需要使用 Source Map 文件来帮助我们定位错误。
            sourcemap: true,
            // name: ''// 仅当 output.format 为 umd 或 iife 时使用，指定全局变量的名称。
        },
        {
            file: 'dist/bundle.min.js', // 压缩后的输出文件路径
            format: 'es', // 输出文件格式
            plugins: [terser()], // 使用 terser 插件进行压缩
            sourcemap: true, // 生成 Source Map 文件
        },
    ],
    // 指定使用的插件，可以是内置插件或自定义插件。
    plugins: [
        peerDepsExternal(),
        resolve(),// 解析第三方模块的路径
        babel({// 将 ES6+ 语法转换为 ES5 语法
            exclude: 'node_modules/**',
            presets: ['@babel/preset-react'],
        }),
        commonjs(), // 将 CommonJS 模块转换为 ES6 模块
        typescript(),
        postcss(),
        json(),
        image(),
        svg(),
    ],
    // 指定需要排除的外部库，可以是字符串、正则表达式、数组等。
    external: ['react', 'react-dom', 'antd', 'axios'],
};

4.编辑 package.json 文件：

添加一个名为 build 的脚本，并配置要发布的组件包的基础信息：

• name: 包名称
• version: 包版本
• main: 包的入口文件
• files: 打包包含的文件列表
• types: 类型声明入口文件

{
  "name": "@ihezebin/common",
  "version": "1.0.3",
  "main": "dist/bundle.js",
  "types": "dist/bundle.d.ts",
  "module": "dist/bundle.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "rollup -c"
  }
}

5.编译打包

运行 yarn build 命令来执行打包。如果一切顺利，将在项目根目录下创建一个名为 dist 的文件夹，并在其中包含一个名为 index.ts 的文件。

6.本地调试链接该组件包

1. 在该发布组件包的项目根目录中执行 yarn link，控制台会输出 package.json 中的 name；
2. 在本地其他想要使用该组件的项目中执行 yarn link @ihezebin/common，链接上面的本地包名。然后就可以在项目中直接使用该包了。

7.将组件发布到npm

• 切换npm源为官方 淘宝为npm config set registry https://registry.npm.taobao.org， npm config set registry https://registry.npmjs.org，发布结束后切回淘宝源。

• 登录

npm login

# Username: hezebin
# Email: 86744316@qq.com

• 发布

npm publish --access public

8.安装使用组件

yarn add @ihezebin/common

• 使用SDK

import {Test} from '@ihezebin/common';

<Test></Test>