如何使用webpack5+TypeScript+npm发布组件库
作者：zyk_520
这篇文章主要介绍了如何使用webpack5+TypeScript+npm发布组件库,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
一、前言
作为一只前端攻城狮，没有一个属于自己的组件库，那岂不是狮子没有了牙齿，士兵没有了武器，姑娘没有了大宝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组件
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发布组件库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！