一、前言
作为一只前端攻城狮，没有一个属于自己的组件库，那岂不是狮子没有了牙齿，士兵没有了武器，姑娘没有了大宝SOD蜜，你没有了我....
言归正传，下面将给大家介绍如何通过webpack5编译一个TS组件发布到NPM平台。
二、思路
1、通过webpack5初始化一个typescript环境
2、使用typescript编写一个组件库
3、通过webpack5进行编译
4、配置package.json，通过npm发布编译后的组件库
5、在项目中的引用
三、实现
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组件_vue 发布组件-CSDN博客
5、在项目中的引用
【1】在普通js项目中的使用
1）安装simple-js-zyk包
npm install --save-dev simple-js-zyk2）项目中在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-zyk2）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))结果：
