使用webpack5+TypeScript+npm发布组件库

一、前言

作为一只前端攻城狮，没有一个属于自己的组件库，那岂不是狮子没有了牙齿，士兵没有了武器，姑娘没有了大宝SOD蜜，你没有了我....

言归正传，下面将给大家介绍如何通过webpack5编译一个TS组件发布到NPM平台。

二、思路

1、通过webpack5初始化一个typescript环境

2、使用typescript编写一个组件库

3、通过webpack5进行编译

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

5、在项目中的引用

三、实现

1、webpack5初始化环境

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

bash 复制代码

npm init

【2】安装webpack相关的包

bash 复制代码

npm install webpack webpack-cli --save-dev

【3】使用webpack进行配置

bash 复制代码

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

javascript 复制代码

{
  "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

javascript 复制代码

// 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

TypeScript 复制代码

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

TypeScript 复制代码

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

【3】主文件

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

TypeScript 复制代码

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

export {
    truncateText,
    unitSwitchForStorageCapacity,
    
    isObject,
    isEmptyObject,
    isNullOrUndefined
}

3、通过webpack5进行编译

编译：

bash 复制代码

npm run build

编译后文件目录：

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

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

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

javascript 复制代码

{
  "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组件_vue 发布组件-CSDN博客

5、在项目中的引用

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

1）安装simple-js-zyk包

bash 复制代码

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

2）项目中在index.html引入

html 复制代码

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

3）使用

javascript 复制代码

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

【2】在vue项目中使用

1）安装simple-js-zyk包

bash 复制代码

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

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

javascript 复制代码

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

3）在vue模块文件中使用

javascript 复制代码

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

结果：