搭建基础库~

前言

项目中会用到工具库、函数库以及一些跟框架绑定的组件,如果这些基础模块每个项目都实现一套,维护起来那真的头大,你说呢😉

搭建流程

准备工作

创建文件夹myLib、安装Git以及pnpm

目录大概就系这样子:

myLib
├── .husky
│   ├── commit-msg
│   └── pre-commit
├── packages
│   └── utils
│       ├── lib
│       │   ├── index.cjs.js
│       │   ├── index.esm.js
│       │   └── index.d.ts
│       ├── src
│       │   └── index.ts
│       ├── rollup.config.js
│       ├── tsconfig.json
│       └── package.json
├── .eslintrc.js
├── .prettierrc
├── commitlint.config.js
├── pnpm-workspace.yaml
├── tsconfig.json
└── package.json

配置Typescript

pnpm add -D -w typescript tslib
pnpm tsc --init

tsconfig.json

{
    "files": [],
    "references": [
      { "path": "./packages/utils" }
    ]
  }

 pnpm-workspace.yaml

packages:
  - 'packages/*'

package.json

  "scripts": {
    "postinstall": "husky install",
    "lint": "eslint packages/**/*.{ts,js} --fix"
  }

子包

tsconfig.json配置 

{
  "compilerOptions": {
    "rootDir": "./src",
    "declaration": true,
    "declarationDir": "./lib",
    "emitDeclarationOnly": true,
    "module": "esnext",
    "target": "es6",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Rollup打包

pnpm add -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript typescript

rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';

export default {
  input: "src/index.ts",
  output: [
{
    file:"lib/index.cjs.js",
    format:"cjs",
},
{
    file:"lib/index.esm.js",
    format:"esm",
},
  ],
  plugins:[
    resolve(),
    commonjs(),
    typescript()
  ]
};

package.json

  "scripts": {
    "build": "rollup -c"
  } 

git commit 验证

记得用git先初始化下仓库

pnpm add -D -w husky @commitlint/{config-conventional,cli}
pnpm husky install

pnpm dlx husky-init --pm=pnpm

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

commitlint.config.js

module.exports = {
  extends: ['@commitlint/config-conventional']
}; 

配置Eslint和Prettier

 pnpm add -D -w eslint prettier eslint-config-prettier eslint-plugin-prettier

eslint.config.js

const path = require('path');
const { ESLint } = require('eslint');
const tsParser = require('@typescript-eslint/parser');
const tsPlugin = require('@typescript-eslint/eslint-plugin');
const prettierPlugin = require('eslint-plugin-prettier');

module.exports = [
  {
    files: ['packages/**/src/**/*.{ts,js}'],
    ignores: ['node_modules'],
    languageOptions: {
      parser: tsParser,
      parserOptions: {
        ecmaVersion: 2020
      },
    },
    plugins: {
      '@typescript-eslint': tsPlugin,
      prettier: prettierPlugin,
    },
    rules: {
      'prettier/prettier': 'error',
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': 'warn',
    },
  },
]

.prettierrc

{
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 80
  } 

.husky/pre-commit

pnpm run lint 

打包

最后

整体的框框已经搭建起来,把需要的工具、函数和组件写入即可,发布子包到私有仓库即可内部使用啦~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/865781.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

弱口令是什么意思?弱口令有什么风险?

在网络安全中,我们经常会提到弱口令这个术语,那么弱口令是什么意思呢,会给我们带来什么样的网络安全威胁呢,一起来看看吧。 弱口令释义: 弱口令我们可以可以简单的理解为能让别人随便就猜出的密码,例如abc…

Git 常用操作指南

1. 配置 Git # 设置用户名 git config --global user.name "Your Name"# 设置邮箱 git config --global user.email "your.emailexample.com"# 设置默认编辑器(可选) git config --global core.editor "code --wait"# 查…

Vue跨域获取ip和ip位置城市等归属地信息

由于端口设置与查询服务器不一致,所以不能直接从ip138网上抓取,只能跨域查询。实现跨域查询,简单的方法是使用jsonp方式,只支持get请求,同时也需要查询的服务器支持jsonp。这时找到了腾讯位置服务。参考文章&#xff0…

Linux/Unix系统指令:(tar压缩和解压)

tar 是一个在Linux和Unix系统中用于创建和处理归档文件的命令。 下面是tar命令的详细用法,包括它的所有常用选项和一些示例。 基本语法 tar [选项] [归档文件] [文件或目录]常用选项 基本操作 -c:创建一个新的归档文件(create&#xff09…

C++ 访问修饰符

文章目录 概述publicprivateprotected 示例代码小结 概述 C中的访问修饰符用于控制类成员(包括数据成员,成员函数)的可见性和可访问性。 C中有三种访问级别:public, private, protected。下面一个一个说下。 public public 成员…

Appium Inspector介绍和使用

一、什么是Appium Inspector 官方介绍:Overview - Appium Inspector 检查器的主要目的是提供应用程序页面源代码的检查功能。它主要用于测试自动化开发,但也可用于应用程序开发 - 或者如果只是想查看应用程序的页面源代码! 从本质上讲&…

API Object设计模式

API测试面临的问题 API测试由于编写简单,以及较高的稳定性,许多公司都以不同工具和框架维护API自动化测试。我们基于seldom框架也积累了几千条自动化用例。 •简单的用例 import seldomclass TestRequest(seldom.TestCase):def test_post_method(self…

k8s (Kubernetes) 之helm

Helm 是 Kubernetes 的包管理工具,用于简化和自动化应用程序在 Kubernetes 上的部署、管理和配置。Helm 通过 Chart(类似于 Linux 中的包管理)来打包 Kubernetes 应用程序,使得应用程序的管理变得更加便捷和高效。 概述 Helm 是…

vue3项目图片压缩+rem+自动重启等plugin使用与打包配置

一、Svg配置 每次引入一张 SVG 图片都需要写一次相对路径,并且对 SVG 图片进行压缩优化也不够方便。 vite-svg-loader插件加载SVG文件作为Vue组件,使用SVGO进行优化。 插件网站https://www.npmjs.com/package/vite-svg-loader 1. 安装 pnpm i vite-svg…

系统架构设计师考试大纲学习笔记

1. 考试说明 1.1 考试目标 通过本考试的合格人员应能够 根据系统需求规格说明书,结合应用领域和技术发展的实际情况,考虑有关约束条件,设计正确、合理的软件架构,确保系统架构具有良好的特性;能够对项目的系统架构进…

步进电机(STM32+28BYJ-48)

一、简介 步进电动机(stepping motor)把电脉冲信号变换成角位移以控制转子转动的执行机构。在自动控制装置中作为执行器。每输入一个脉冲信号,步进电动机前进一步,故又称脉冲电动机。步进电动机多用于数字式计算机的外部设备&…

DOM 中包含哪些重要方法

1. alert 带有指定消息的警告框 alert("hello world"); 2. confirm 带有确定和取消的对话框,点击确定返回 true,点击取消返回 false confirm("你好吗"); 3. prompt 显示一个提示框,允许用户输入文本,点击…

CST电磁仿真创建独特的天线

在日益无线化的世界中,一切都取决于天线,从我们用于医疗保健、工作和娱乐的智能设备到将我们从一个地方带到另一个地方的车辆。它们如此融入我们的日常生活,以至于我们大多数人甚至没有想到它们——即使想到了,我们也会想象屋顶上…

ubnutu20.04-vscode安装leetcode插件流程

1.在vscode插件商城选择安装leetcode 2.安装node.js 官网下载一个版本安装流程: ①tar -xvf node-v14.18.0-linux-x64.tar.xz ①sudo ln -s /app/software/nodejs/bin/npm /usr/local/bin/ ②ln -s /app/software/nodejs/bin/node /usr/local/bin/ 查看版本&…

CentOS 6.4环境 升级到OpenSSH9.2p1

系统环境: [rootlocalhost]# cat /etc/centos-release CentOS release 6.4 (Final) [rootlocalhost]# sshd -V unknown option -- V OpenSSH_6.7p1, OpenSSL 1.0.0-fips 29 Mar 2010 服务器以前升级过openssl/openssh 安装openssl和openssh [rootlocalhost ~]# …

nginx的LNMP构建+discuz论坛

一、LNMP: L:linux 操作系统 N:nginx前端页面的web服务 P:PHP,是一种开发动态页面的编程语言,解析动态页面,起到中间件的作用(在nginx和数据库的中间),在中…

横截面数据回归

横截面数据回归 一些笔记 观测值一定要比参数值多 p值<0.05,拒绝H0. 参数显著&#xff0c;不能说明模型对 AIC与BIC准则&#xff0c;越小越好的指标值AIC 回归分析一定要进行残差的正态性检验。所有的残差都大于0&#xff0c;小于0&#xff0c;都不正常。残差正常应该是分…

scikit-learn超参数调优 (自动寻找模型最佳参数) 方法

网格搜索&#xff08;Grid Search&#xff09;&#xff1a; 原理&#xff1a;网格搜索通过预定义的参数组合进行穷举搜索&#xff0c;评估每一种参数组合的性能&#xff0c;选择性能最佳的参数组合。实现&#xff1a;使用GridSearchCV类。示例代码&#xff1a;from sklearn.mod…

小学校园“闲书”交易平台的设计与实现-计算机毕业设计源码04282

小学校园“闲书”交易平台的设计与实现 摘 要 小学校园“闲书”交易平台是为了解决小学生之间的书籍交流和阅读兴趣培养而设计的。该平台通过使用现代技术手段&#xff0c;如移动应用开发和互联网技术&#xff0c;构建了一个功能齐全的交易平台。平台支持用户注册与登录&#x…

应用于空气和液体抑菌的静态UVC LED抑菌模组-WH-UVC001-VO

WH-UVC001-VO是一款用于空气和液体抑菌的静态UVC LED抑菌模组。适用于带水箱、密闭的腔体结构。可安装于顶部、侧壁及底部&#xff0c;出光面符合IP65的防水要求&#xff0c;即使安装于水箱底部也不用担心漏水。 使用的UVC LED的波长范围为260-280nm&#xff0c;具有优良高效的…