当前位置：首页 > TypeScript > 基于Webpack5与TypeScript构建并发布NPM组件库完整指南

基于Webpack5与TypeScript构建并发布NPM组件库完整指南

作者：脚本小铺时间：2026-10-31 13:11:28浏览：365

本文详细介绍如何使用Webpack5和TypeScript从零搭建并编译组件库，最终发布至NPM平台。内容涵盖环境初始化、TS配置、代码编写、打包编译及多项目引用方法，帮助开发者掌握现代前端组件库的标准化发布流程。

一、前言

对于前端开发者而言，拥有个人维护的组件库如同狮子拥有利齿、士兵配备武器般重要，这是提升开发效率与代码复用能力的关键基础设施。

本文将具体演示如何利用Webpack5编译TypeScript编写的组件，并将其发布到NPM仓库的完整过程。

二、思路

第一步，利用Webpack5初始化TypeScript开发环境；

第二步，使用TypeScript语言编写组件库的具体逻辑；

第三步，配置Webpack5对源码进行编译打包；

第四步，完善package.json配置，执行NPM发布流程；

第五步，在实际项目中引入并使用该组件库。

三、实现

1、webpack5初始化环境

【1】创建一个名为simple-js的项目

npm init

【2】安装webpack相关的包

npm install webpack webpack-cli --save-dev

【3】使用webpack进行配置

npm webpack-cli init
或
.\node_modules\.bin\webpack-cli init
  • 是否使用webpack-dev-server（进行测试）
  • 是否创建html 在仓库里（htmlWebpackPlugin会把打包好的js文件，自动绑到html 文件）
  • 是否需要pwa

自动生成文件：

  • tsconfig （ts配置文件）
  • postcss.config
  • webpack.config （webpack配置文件）

【4】配置文件详情

1、tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/",// 打包到的目录
    "sourceMap": false,// 是否生成sourceMap（用于浏览器调试）
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "declaration": true,// 是否生成声明文件（重要配置，便于查看方法类型）
    "declarationDir": "./dist/types/",// 声明文件打包的位置
    "declarationMap": false,// 是否生成声明文件map文件（便于调试）
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es5",// 转化成的目标语言
    "baseUrl": "./",
    "types": [
      "node"
    ],
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015"
    ],
    "jsx": "react",
    "allowJs": false
  },
  "include": [
    "src/**/*.ts",
    "typings.d.ts", 
    "src/main.js",
  ],// 要打包的文件
  "exclude": [
    "node_modules",
    "*.test.ts"
  ] 
}

2、webpack.config.js

// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require('path');
//clean-webpack-plugin: 实现每次编译时先清理上次编译结果
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isProduction = process.env.NODE_ENV == 'production';
const config = {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js', // 输出文件名
        library: 'SimpleJS', // 库的名称 -全局引入时可以使用
        libraryTarget: 'umd', // 支持的模块系统
        // umdNamedDefine: true // 会为 UMD 模块创建一个命名的 AMD 模块
    },
    devServer: {
        open: true,
        host: 'localhost',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.ts$/i,
                loader: 'ts-loader',
                exclude: ['/node_modules/'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
    },
};
module.exports = () => {
    if (isProduction) {
        config.mode = 'production';
    } else {
        config.mode = 'development';
    }
    return config;
};

2、使用typescript编写一个组件库（simple-js）

simple-js组件库中集成算法、类型判断等常用的公共方法。

【1】方法文件

src\algorithm\index.ts

import { StorageCapacityUnit } from './algorithm-types';
// @params - str: 文本
// @params - showTotal: 显示文本的总个数
// 功能描述：截断文本，中间出现省略号
const truncateText = (str: string, showTotal: number): string => {
    if (str.length > showTotal) {
        const prefixNum = Math.floor(showTotal / 2);
        const suffixNum = showTotal - prefixNum;
        return `${str.slice(0, prefixNum)}...${str.slice(-suffixNum)}`;
    }
    return str;
}
// @params1 - value: 需要转换的值
// @params2 - sourceUnit: 转换前单位
// @params3 - sourceUnit: 转换后单位
// @params4 - base: 转换进制
// 功能描述：存储单位的转换，
const unitSwitchForStorageCapacity = (value: number, sourceUnit: StorageCapacityUnit, targetUnit: StorageCapacityUnit, base = 1024): number => {
    const unitList = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
    const sourceUnitIndex = unitList.findIndex(ele => ele === sourceUnit);
    const targetUnitIndex = unitList.findIndex(ele => ele === targetUnit);
    if (sourceUnitIndex === -1 || targetUnitIndex === -1) {
        console.error('转换失败，sourceUnit或者targetUnit不再转换列表')
        return value;
    }
    const exponent = sourceUnitIndex - targetUnitIndex;
    const resValue = value * Math.pow(base, exponent);
    return Number.isInteger(resValue) ? resValue : Number(resValue.toFixed(2));
}

【2】接口文件

src\algorithm\algorithm-types.ts

export type StorageCapacityUnit = 'B'| 'KB'| 'MB'| 'GB'| 'TB'| 'PB'| 'EB'| 'ZB' | 'YB';

【3】主文件

主文件中是simple-js的导出模块的入口：

import { truncateText, unitSwitchForStorageCapacity } from './algorithm/index';
import { isObject, isEmptyObject, isNullOrUndefined } from './type/index';
export {
    truncateText,
    unitSwitchForStorageCapacity,
    isObject,
    isEmptyObject,
    isNullOrUndefined
}

3、通过webpack5进行编译

编译：

npm run build

编译后文件目录：

main.js：组件库的主代码文件

index.d.ts：组件库的类型文件入口

一、前言

4、配置package.json，通过npm发布编译后的组件库

{
  "name": "simple-js-zyk", //npm平台的包
  "version": "1.0.0",
  "description": "工具包",//包的描述说明
  "main": "./dist/main.js", // 组件库的入口文件
  "types": "./dist/types/index.d.ts", // 组件库中类型的文件入口
  "files": [
    "dist"
  ], //npm发布的目录
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@webpack-cli/generators": "^3.0.7",
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.6.0",
    "simple-js-zyk": "^1.0.0",
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.5",
    "webpack": "^5.91.0",
    "webpack-cli": "^5.1.4"
  }
}

npm发布流程见：npm发布Vue组件

5、在项目中的引用

【1】在普通js项目中的使用

1）安装simple-js-zyk包

npm install --save-dev simple-js-zyk

2）项目中在index.html引入

script type="text/javascript" src="./node_modules/simple-js-zyk/dist/main.js"></script>

3）使用

<script type="module">
        console.log(SimpleJS.truncateText('xxxxxxxssssss', 4));
        console.log(SimpleJS.unitSwitchForStorageCapacity(100, 'MB', 'KB'))
 </script>

【2】在vue项目中使用

1）安装simple-js-zyk包

npm install --save-dev simple-js-zyk

2）vue项目tsconfig.json文件中引入simple-js-zyk的文件类型

{
    ...
    "compilerOptions": {
        "types": ["node_modules/base-tool-zyk/dist/types"]
    }
    ...
}

3）在vue模块文件中使用

import * as SimpleJS from 'simple-js-zyk';
console.log(SimpleJS.algorithm.truncateText('asxasxsaasss', 3))

结果：

一、前言

到此这篇关于使用webpack5+TypeScript+npm发布组件库的文章就介绍到这了,更多相关webpack5发布组件库内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS压缩后代码报错怎么调试？Source Map使用详解

2026-11-05 09:05:04

JS压缩会破坏代码逻辑吗？兼容性风险与测试建议

2026-11-03 17:13:03

Next.js 与 Vite、Create React App 的优缺点对比

2026-11-03 15:27:33

js文件加载失败或404错误的常见原因与排查

2026-11-03 10:38:55

前端项目打包生成 JS 文件的核心步骤完整记录

2026-10-31 21:04:46

相关文章
更多