typescript 打包公共组件

Typescript 打包公共组件

在前端开发中，我们经常会遇到需要在不同项目中复用相同的组件的场景。为了提高开发效率和代码复用率，我们可以将这些公共组件打包成一个独立的库，在需要使用的项目中引入即可。本文将介绍如何使用 Typescript 打包公共组件，并提供代码示例进行说明。

打包公共组件的基本步骤

打包公共组件主要包括以下几个步骤：

1. 创建一个独立的 Typescript 项目
2. 编写公共组件代码
3. 使用 Rollup 进行打包
4. 发布到 npm

下面我们将逐步介绍每个步骤，并提供相应的代码示例。

创建一个独立的 Typescript 项目

首先，我们需要创建一个独立的 Typescript 项目来编写我们的公共组件代码。可以使用 npm init 命令来初始化一个新的项目：

npm init -y

然后，安装 Typescript 和 Rollup：

npm install typescript rollup @rollup/plugin-typescript @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser --save-dev

编写公共组件代码

接下来，我们可以在项目中编写我们的公共组件代码。这里以一个简单的按钮组件为例：

// Button.ts
export default class Button {
  private text: string;

  constructor(text: string) {
    this.text = text;
  }

  public render() {
    const button = document.createElement("button");
    button.textContent = this.text;
    return button;
  }
}

使用 Rollup 进行打包

创建一个 rollup.config.js 文件来配置 Rollup 打包：

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

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'umd',
    name: 'MyLibrary',
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript(),
    terser(),
  ],
};

发布到 npm

最后，我们可以将打包好的组件发布到 npm 上供其他项目使用。首先，在 package.json 中添加一些必要的字段：

{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "rollup -c"
  }
}

然后使用 npm publish 命令将组件发布到 npm 上：

npm publish

类图

classDiagram
    class Button {
        - text: string
        + constructor(text: string)
        + render(): HTMLElement
    }

结语

通过上面的步骤，我们成功地打包了一个简单的公共组件，并发布到了 npm 上。在实际项目中，我们可以根据自己的需求编写更复杂的公共组件，并将其打包成库，以提高代码复用率和开发效率。希望本文对你有所帮助！