代理网站哪个好淮安做网站的公司有哪些公司

代理网站哪个好,淮安做网站的公司有哪些公司,企业所得税税负率怎么算的,广西建网站核心方案#xff1a;采用 pnpm workspace vite rollup 搭建 Monorepo 架构#xff0c;拆分「组件核心包、文档包、示例包」#xff0c;实现组件库的模块化管理、版本统一、按需打包与高效迭代#xff0c;完全适配企业级组件库开发规范。 一、Monorepo 架构设计#xff0…核心方案采用pnpm workspace vite rollup搭建 Monorepo 架构拆分「组件核心包、文档包、示例包」实现组件库的模块化管理、版本统一、按需打包与高效迭代完全适配企业级组件库开发规范。一、Monorepo 架构设计核心目录结构1. 整体目录结构pnpm workspace 规范monorepo-ui/ // 项目根目录 ├─ package.json // 根项目配置workspace 声明、共用脚本 ├─ pnpm-workspace.yaml // pnpm workspace 配置包路径管理 ├─ .npmrc // pnpm 配置依赖安装、链接优化 ├─ tsconfig.json // 根 TS 配置公共类型、编译规则 ├─ packages/ // 子包目录核心包统一存放 │ ├─ ui-core/ // 组件核心包存放 Input 等所有组件 │ │ ├─ package.json // 组件包配置名称、版本、入口、依赖 │ │ ├─ tsconfig.json // 组件包 TS 配置继承根配置 │ │ ├─ vite.config.ts // 开发环境配置热更新、本地调试 │ │ ├─ rollup.config.ts // 构建配置按需打包、umd/cjs/esm 多格式输出 │ │ ├─ src/ // 组件源码目录 │ │ │ ├─ index.ts // 组件入口统一导出所有组件 │ │ │ ├─ components/ // 组件目录Input 及其他组件 │ │ │ │ ├─ Input/ // 之前封装的 Input 组件完整迁移 │ │ │ │ └─ ... // 后续新增组件如 Button、Icon │ │ │ ├─ types/ // 公共类型定义如全局枚举、工具类型 │ │ │ └─ styles/ // 公共样式全局主题、重置样式 │ │ ├─ dist/ // 构建输出目录多格式产物自动生成 │ │ └─ README.md // 组件包说明文档 │ ├─ ui-docs/ // 文档包组件文档、示例、API 说明 │ │ ├─ package.json // 文档包配置 │ │ ├─ vite.config.ts // 文档站点配置基于 vitepress/vuepress │ │ └─ docs/ // 文档源码组件示例、API 文档 │ └─ ui-demo/ // 示例包本地调试、组件使用示例 │ ├─ package.json // 示例包配置 │ ├─ vite.config.ts // 示例项目配置 │ └─ src/ // 示例源码引入 Input 组件测试 └─ scripts/ // 公共脚本版本管理、批量构建、发布脚本 ├─ build-all.ts // 全量构建脚本同时构建核心包文档包 └─ release.ts // 版本发布脚本统一版本号、提交、发布2. 核心配置文件编写Monorepo 基础支撑1根目录pnpm-workspace.yaml声明子包路径pnpm 识别子包的核心配置确保packages/*下的子包可被 workspace 管理packages:-packages/*# 匹配所有子包ui-core、ui-docs、ui-demo2根目录package.json统一脚本、依赖{name:monorepo-ui,private:true,// 根项目私有不发布到 npmworkspaces:[packages/*],// 兼容 npm/yarn workspace可选scripts:{// 子包脚本通过 pnpm --filter 定向执行子包脚本dev:core:pnpm --filter mono/ui-core dev,// 组件核心包开发dev:docs:pnpm --filter mono/ui-docs dev,// 文档包开发dev:demo:pnpm --filter mono/ui-demo dev,// 示例包开发build:core:pnpm --filter mono/ui-core build,// 构建组件核心包build:docs:pnpm --filter mono/ui-docs build,// 构建文档站点build:all:ts-node scripts/build-all.ts,// 全量构建release:ts-node scripts/release.ts,// 版本发布lint:eslint . --ext .vue,.ts,.js,// 全局代码校验format:prettier --write .// 全局代码格式化},devDependencies:{// 共用开发依赖子包可继承无需重复安装types/node:^20.9.0,typescript-eslint/eslint-plugin:^6.10.0,typescript-eslint/parser:^6.10.0,eslint:^8.53.0,eslint-plugin-vue:^9.18.1,prettier:^3.1.0,ts-node:^10.9.1,typescript:^5.2.2},engines:{node:16,pnpm:8}}3根目录.npmrcpnpm 优化配置解决依赖链接、peerDependencies 警告、构建优化等问题# 启用 workspace 依赖链接子包间依赖直接用本地包不重复安装 workspace-linkstrue # 自动安装 peerDependencies避免组件包 peer 依赖缺失警告 auto-install-peerstrue # 依赖安装目录统一存放在根 node_modules节省磁盘空间 shared-workspace-lockfiletrue # 构建时忽略开发依赖 productionfalse4根目录tsconfig.json公共 TS 配置子包 TS 配置继承此文件统一编译规则{compilerOptions:{target:ESNext,module:ESNext,moduleResolution:NodeNext,strict:true,// 开启严格模式jsx:preserve,// 支持 Vue JSXsourceMap:true,resolveJsonModule:true,esModuleInterop:true,skipLibCheck:true,forceConsistentCasingInFileNames:true,baseUrl:.,paths:{/*:[packages/ui-core/src/*]// 组件包路径别名统一引用}},include:[packages/**/*],exclude:[node_modules,**/dist/**]}二、核心子包实现重点ui-core 组件包1. ui-core 包配置package.json核心配置「包名称、版本、入口、依赖、构建产物」确保可发布、可按需引入{name:mono/ui-core,// 包名建议用 scope 命名避免冲突version:0.1.0,// 版本号遵循语义化版本major.minor.patchdescription:Monorepo 公共组件库核心包,keywords:[vue3,typescript,component,monorepo],main:./dist/ui-core.cjs.js,// CommonJS 入口Node/SSR 用module:./dist/ui-core.esm.js,// ESM 入口浏览器/打包工具用browser:./dist/ui-core.umd.js,// UMD 入口直接引入 CDN 用types:./dist/types/index.d.ts,// TS 类型入口类型提示exports:{// 条件导出适配不同环境.:{import:./dist/ui-core.esm.js,require:./dist/ui-core.cjs.js,types:./dist/types/index.d.ts},./dist/style.css:./dist/style.css,// 全局样式导出./*:./*// 支持单个组件按需引入},files:[// 发布到 npm 时包含的文件dist,src/components/**/*.vue,src/types],publishConfig:{// npm 发布配置access:public,// scope 包需设为 public 才能发布registry:https://registry.npmjs.org/// 发布源默认 npm 官方},peerDependencies:{// peer 依赖由使用者安装避免版本冲突vue:^3.3.0,typescript:^5.0.0},dependencies:{// 组件包核心依赖必需依赖vue:^3.3.8},devDependencies:{// 组件包开发依赖vitejs/plugin-vue:^4.5.0,vitejs/plugin-vue-jsx:^3.1.0,rollup:^4.6.1,rollup-plugin-vue:^6.0.0,rollup-plugin-typescript2:^0.36.0,rollup-plugin-css-only:^4.5.2,rollup-plugin-terser:^7.0.2,vite:^5.0.0,sass:^1.69.5},scripts:{dev:vite,// 开发环境热更新调试build:rollup -c rollup.config.ts,// 构建组件包多格式输出build:types:tsc --emitDeclarationOnly,// 生成 TS 类型文件prebuild:rimraf dist,// 构建前清空 dist 目录postbuild:npm run build:types// 构建后生成类型文件}}2. ui-core 开发环境配置vite.config.ts用于本地开发调试组件支持热更新、Vue/TS 解析import{defineConfig}fromvite;importvuefromvitejs/plugin-vue;importvueJsxfromvitejs/plugin-vue-jsx;importpathfrompath;exportdefaultdefineConfig({plugins:[vue(),vueJsx()],// 支持 Vue 模板、JSXresolve:{alias:{:path.resolve(__dirname,src),// 路径别名vue:path.resolve(__dirname,../node_modules/vue)// 锁定 Vue 版本},extensions:[.vue,.ts,.js,.tsx,.jsx]},server:{port:3001,// 开发端口避免与其他子包冲突open:true,// 自动打开浏览器cors:true// 允许跨域调试时可能用到},build:{outDir:dist,lib:{entry:path.resolve(__dirname,src/index.ts),// 组件入口name:MonoUi,// UMD 包全局变量名fileName:(format)ui-core.${format}.js},rollupOptions:{// 外部依赖不打包进组件包由使用者提供external:[vue],output:{// 全局变量映射UMD 模式下外部依赖的全局变量名globals:{vue:Vue}}}}});3. ui-core 构建配置rollup.config.ts核心配置多格式打包cjs/esm/umd、CSS 提取、TS 编译、按需打包支持适配不同使用场景importpathfrompath;import{defineConfig}fromrollup;importvuefromrollup-plugin-vue;// 解析 Vue 组件importtypescriptfromrollup-plugin-typescript2;// 编译 TSimportcssOnlyfromrollup-plugin-css-only;// 提取 CSS不打包 JSimportterserfromrollup-plugin-terser;// 代码压缩import{fileURLToPath}fromurl;const__dirnamepath.dirname(fileURLToPath(import.meta.url));constpkgrequire(./package.json);// 读取 package.json 配置exportdefaultdefineConfig([// 1. ESM 格式现代打包工具用支持 tree-shaking{input:path.resolve(__dirname,src/index.ts),output:{file:pkg.module,format:esm,sourcemap:true},external:[vue],// 排除外部依赖plugins:[vue({target:esm,css:false// 不内嵌 CSS单独提取}),cssOnly({output:style.css}),// 提取全局 CSS 到 dist/style.csstypescript({tsconfig:path.resolve(__dirname,tsconfig.json),useTsconfigDeclarationDir:true// 生成类型文件到 dist/types})]},// 2. CJS 格式Node/SSR 用{input:path.resolve(__dirname,src/index.ts),output:{file:pkg.main,format:cjs,sourcemap:true,exports:named// 命名导出支持 require 单独引入},external:[vue],plugins:[vue({target:cjs,css:false}),cssOnly({output:style.css}),typescript({tsconfig:path.resolve(__dirname,tsconfig.json)})]},// 3. UMD 格式CDN 直接引入用压缩混淆{input:path.resolve(__dirname,src/index.ts),output:{file:pkg.browser,format:umd,name:pkg.name.replace(/^/,).replace(/\/./,),// 全局变量名MonoUisourcemap:false,globals:{vue:Vue}// 外部依赖全局变量映射},external:[vue],plugins:[vue({target:umd,css:false}),cssOnly({output:style.umd.css}),typescript({tsconfig:path.resolve(__dirname,tsconfig.json)}),terser()// 压缩代码]}]);4. Input 组件迁移与入口配置1组件迁移将之前封装的 Input 组件完整迁移到packages/ui-core/src/components/Input目录保持原有结构hooks、types、style、Input.vue。2组件入口文件src/index.ts统一导出所有组件支持全量引入同时支持单个组件按需引入// 1. 全量导出支持 import { Input } from mono/ui-coreimportInputfrom./components/Input/Input.vue;importtype{InputProps,InputType,InputSize}from./components/Input/types;// 导出组件export{Input};// 导出类型exporttype{InputProps,InputType,InputSize};// 2. 全局注册方法支持 app.use(Input)Input.install(app:any){app.component(Input.name,Input);};// 3. 默认导出支持 import Input from mono/ui-core/dist/components/Input 按需引入exportdefaultInput;// 后续新增组件按此格式添加导出// import Button from ./components/Button/Button.vue;// export { Button };// Button.install (app: any) app.component(Button.name, Button);3公共样式配置src/styles/index.scss整合全局主题、重置样式在 Input 组件中引入构建时统一提取// 全局主题变量可被组件覆盖 :root { --input-border-radius: 4px; --input-border-color: #e5e7eb; --input-bg-color: #fff; --input-focus-border: #3b82f6; --input-error-border: #ef4444; // ... 其他主题变量 } // 重置样式统一浏览器默认样式 * { margin: 0; padding: 0; box-sizing: border-box; } // 导入组件公共样式若有多个组件统一在此引入 import ../components/Input/style/input.scss;三、辅助子包实现文档包示例包1. ui-demo 示例包本地调试用用于快速测试 Input 组件功能避免直接在组件包中写测试代码隔离开发与测试环境。1ui-demo/package.json{name:mono/ui-demo,version:0.1.0,private:true,// 示例包不发布scripts:{dev:vite,build:vite build},dependencies:{mono/ui-core:workspace:*,// 依赖本地组件包workspace:* 表示使用当前 workspace 最新版本vue:^3.3.8},devDependencies:{vitejs/plugin-vue:^4.5.0,vite:^5.0.0}}2ui-demo/src/App.vue使用 Input 组件template div classdemo-container h1Input 组件示例/h1 !-- 引入 workspace 中的 Input 组件 -- Input v-modelusername placeholder请输入用户名 / Input v-modelphone typephone placeholder请输入手机号 :rules[{ type: phone, message: 手机号格式错误 }] stylemargin-top: 16px; / /div /template script setup langts import { ref } from vue; import { Input, InputType } from mono/ui-core; // 引入组件包 const username ref(); const phone ref(); /script style scoped .demo-container { padding: 20px; max-width: 600px; margin: 0 auto; } /style2. ui-docs 文档包组件文档API 说明基于vitepress搭建文档站点支持组件示例预览、API 文档、使用教程方便团队使用与维护。1ui-docs/package.json{name:mono/ui-docs,version:0.1.0,private:true,scripts:{dev:vitepress dev docs,// 开发文档站点build:vitepress build docs,// 构建文档静态站点preview:vitepress preview docs},dependencies:{mono/ui-core:workspace:*,// 依赖本地组件包vue:^3.3.8},devDependencies:{vitepress:^1.0.0-rc.31}}2ui-docs/docs/.vitepress/config.ts文档站点配置import{defineConfig}fromvitepress;exportdefaultdefineConfig({title:Mono UI,// 文档标题description:基于 Monorepo 的 Vue3 组件库,themeConfig:{nav:[{text:组件,link:/components/input}],// 导航栏sidebar:{/components/:[{text:Input 输入框,link:/components/input}// 侧边栏]}}});3ui-docs/docs/components/input.mdInput 组件文档# Input 输入框 基础输入组件支持多类型、校验、格式化等功能。 ## 基础使用 vue template Input v-modelusername placeholder请输入用户名 / /template script setup langts import { ref } from vue; import { Input } from mono/ui-core; const username ref(); /script带校验的输入框template Input v-modelphone typephone placeholder请输入手机号 :rules[ { type: required, message: 手机号不能为空 }, { type: phone, message: 请输入正确的手机号 } ] / /template script setup langts import { ref } from vue; import { Input } from mono/ui-core; const phone ref(); /scriptAPIProps参数类型说明默认值modelValuestring/number双向绑定值undefinedtypeInputType输入框类型textplaceholderstring占位符‘’disabledboolean是否禁用falserulesValidateRule[]校验规则[]Events事件名说明回调参数update:modelValue值更新事件value: string/numberinput输入事件防抖后value: string/numbervalidate-error校验失败事件message: string## 四、组件库构建与发布流程 ### 1. 本地开发与调试 bash # 1. 安装所有子包依赖根目录执行 pnpm install # 2. 启动组件核心包开发环境热更新 pnpm dev:core # 3. 启动示例包调试组件同时启动修改组件实时生效 pnpm dev:demo # 4. 启动文档包编写文档示例实时预览 pnpm dev:docs2. 全量构建# 根目录执行构建组件核心包文档包pnpmbuild:all组件核心包构建产物packages/ui-core/dist含 cjs/esm/umd 格式、CSS、TS 类型文档包构建产物packages/ui-docs/docs/.vitepress/dist静态站点可部署到 CDN/服务器。3. 版本发布统一版本管理通过脚本统一更新所有子包版本号避免版本不一致步骤如下1脚本 scripts/release.ts核心逻辑importfsfromfs-extra;importpathfrompath;import{execSync}fromchild_process;// 1. 获取目标版本号从命令行参数传入如 npm run release 0.1.1consttargetVersionprocess.argv[2];if(!targetVersion){console.error(请传入目标版本号格式npm run release version);process.exit(1);}// 2. 验证版本号格式语义化版本constversionReg/^\d\.\d\.\d$/;if(!versionReg.test(targetVersion)){console.error(版本号格式错误需遵循语义化版本如 0.1.1);process.exit(1);}// 3. 更新根项目 package.json 版本可选constrootPkgPathpath.resolve(__dirname,../package.json);constrootPkgfs.readJSONSync(rootPkgPath);rootPkg.versiontargetVersion;fs.writeJSONSync(rootPkgPath,rootPkg,{spaces:2});// 4. 更新所有子包版本号ui-core、ui-docs、ui-democonstpackagesDirpath.resolve(__dirname,../packages);constsubPkgsfs.readdirSync(packagesDir);subPkgs.forEach((pkgName){constpkgPathpath.resolve(packagesDir,pkgName,package.json);constpkgfs.readJSONSync(pkgPath);// 更新自身版本pkg.versiontargetVersion;// 更新子包间依赖版本如 ui-demo 依赖 ui-coreif(pkg.dependenciespkg.dependencies[mono/ui-core]){pkg.dependencies[mono/ui-core]targetVersion;}fs.writeJSONSync(pkgPath,pkg,{spaces:2});});// 5. 提交代码git commitexecSync(git add .,{stdio:inherit});execSync(git commit -m chore: release v${targetVersion},{stdio:inherit});// 6. 打标签git tagexecSync(git tag v${targetVersion},{stdio:inherit});// 7. 发布组件核心包仅发布 ui-coredocs/demo 私有不发布execSync(pnpm --filter mono/ui-core publish,{stdio:inherit});console.log(✅ 版本 v${targetVersion}发布成功);2执行发布命令# 根目录执行发布版本 0.1.0替换为目标版本号pnpmrelease0.1.0五、组件库使用方式使用者视角1. 安装组件库npminstallmono/ui-core# 或 pnpm install mono/ui-core2. 全量引入适合小型项目// main.ts import { createApp } from vue; import App from ./App.vue; import MonoUi from mono/ui-core; import mono/ui-core/dist/style.css; // 引入全局样式 const app createApp(App); app.use(MonoUi); // 全局注册所有组件 app.mount(#app);3. 按需引入适合大型项目支持 tree-shaking// 单个组件引入自动按需加载无需额外配置 template Input v-modelusername placeholder请输入用户名 / /template script setup langts import { ref } from vue; import { Input } from mono/ui-core; // 按需引入 Input import mono/ui-core/dist/components/Input/style/input.css; // 引入组件单独样式可选若全局样式已引入可省略 const username ref(); /script六、Monorepo 组件库优势与进阶优化1. 核心优势模块化管理组件核心、文档、示例分离职责清晰多人协作不冲突依赖共享子包间依赖统一管理避免重复安装节省磁盘空间版本统一通过脚本批量更新版本子包间依赖版本一致避免兼容性问题高效迭代组件开发、调试、文档编写并行进行修改组件实时同步到示例与文档按需打包支持多格式输出适配不同使用场景Tree-Shaking 优化体积。2. 进阶优化点按需加载优化集成unplugin-vue-components实现组件自动按需引入无需手动 import 组件和样式单元测试在 ui-core 中添加 Vitest 单元测试覆盖 Input 组件核心逻辑值同步、校验、格式化CI/CD 集成配置 GitHub Actions实现代码提交后自动校验、构建、发布主题定制支持通过css-vars或 SCSS 变量覆盖默认主题适配不同项目风格组件文档自动化集成vue-docgen-api自动提取组件 Props/Events 生成 API 文档避免手动维护。通过以上流程可将 Input 组件封装为标准化、可复用、可扩展的 Monorepo 组件库完全满足企业级前端团队的组件管理与迭代需求后续新增组件如 Button、Select可直接复用该架构快速接入。