利用网站宣传 两学一做,网络营销师资格证报名,免费咨询律师电话号码是多少,宝安网站建设公司前言
项目中会用到工具库、函数库以及一些跟框架绑定的组件#xff0c;如果这些基础模块每个项目都实现一套#xff0c;维护起来那真的头大#xff0c;你说呢#x1f609;
搭建流程
准备工作 创建文件夹myLib、安装Git以及pnpm 目录大概就系这样子#xff1a; myLib ├…前言
项目中会用到工具库、函数库以及一些跟框架绑定的组件如果这些基础模块每个项目都实现一套维护起来那真的头大你说呢
搭建流程
准备工作 创建文件夹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 --pmpnpm 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 打包 最后
整体的框框已经搭建起来把需要的工具、函数和组件写入即可发布子包到私有仓库即可内部使用啦~
