一、前言
作为一只前端攻城狮，没有一个属于自己的组件库，那岂不是狮子没有了牙齿，士兵没有了武器，姑娘没有了大宝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))结果：
