网站开发工程师的证件做试用的网站

网站开发工程师的证件,做试用的网站,威海住房和城乡建设局网站,如何用wix做网站ViteLit.js 构建Web Component web component作为前一个时代的方案#xff0c;在特定场景下确有不一样的妙用 #xff0c;在维护前后端不分离的项目#xff0c;web component 是为数不多的选择#xff0c;整理一下使用Lit 构建自己的web component组件库为传统项目提提速的…ViteLit.js 构建Web Componentweb component作为前一个时代的方案在特定场景下确有不一样的妙用在维护前后端不分离的项目web component 是为数不多的选择整理一下使用Lit 构建自己的web component组件库为传统项目提提速的过程。使用vite 创建项目Vite 里带了Lit模板我们这里选用Litts模板pnpm create vite目录结构srchelloindex.ts // 具体组件index.ts // 组件收集vite.config.ts 打包配置index.ts // 组件注入!适用于构建基础组件库不适用太复杂的逻辑利用web-components 自带的样式隔离等可以很好的避免被上下文干扰。构建打包项目编写入口文件注入组件import * as allComponents from ./src/main.ts const components allComponents const toKebabCase (str: string): string { return str .replace(/([a-z0-9])([A-Z])/g, $1-$2) .replace(/([A-Z])([A-Z])(?[a-z])/g, $1-$2) .toLowerCase() } if (typeof window ! undefined) { (window as any).WebComponents components Object.entries(components).forEach(([name, component]) { const elementName toKebabCase(name) const fullElementName xk- elementName // 这里定义了全局组件名开头 if (!customElements.get(fullElementName)) { customElements.define(fullElementName, component) } }) }除了组件也可以在这里注入全局方法等构建打包脚本使用vite 来构建很简单。/* by 01130.hk - online tools website : 01130.hk/zh/generateicpwallets.html */ import { defineConfig } from vite import { resolve } from path import { fileURLToPath, URL } from node:url export default defineConfig({ build: { lib: { entry: resolve(fileURLToPath(new URL(., import.meta.url)), index.ts), name: WebComponents, fileName: (format) lit-web-components.${format es ? js : umd.js}, formats: [es, umd] }, outDir:../dist/js, // 打包输出目录 rollupOptions: { output: { extend: true, assetFileNames: lit-web-components.[ext], manualChunks: undefined, compact: true, // 紧凑输出 }, treeshake: { moduleSideEffects: false, propertyReadSideEffects: false, tryCatchDeoptimization: false }, }, sourcemap: false, // 移除 source map minify: terser, target: es2022, terserOptions: { compress: { drop_console: true, // 移除所有 console drop_debugger: true, // 移除 debugger pure_funcs: [console.log, console.info, console.debug, console.warn], // 移除指定的纯函数 unused: true, // 移除未使用的代码 dead_code: true, // 移除死代码 conditionals: true, // 优化条件语句 evaluate: true, // 计算常量表达式 booleans: true, // 优化布尔值 sequences: true, // 连接连续语句 switches: true, // 移除重复的 switch 分支 reduce_vars: true, // 减少变量引用 collapse_vars: true, // 内联变量 passes: 3 // 多次压缩以获得更好的效果 }, mangle: { toplevel: true, // 混淆顶级作用域 reserved: [lit, LitElement, html, css, customElements] // 保留重要的库名称 }, format: { comments: false // 移除所有注释 } } }, resolve: { alias: { : resolve(fileURLToPath(new URL(., import.meta.url)), src) } } })编写一个简单的组件src/hello/index.ts/* by 01130.hk - online tools website : 01130.hk/zh/generateicpwallets.html */ import { LitElement,html,css } from lit; import { property } from lit/decorators.js; export class Hello extends LitElement{ property({type:String}) textHello,Web Component property({type:String}) color#222 static stylecss :host{ } render(){ return html span stylecolor:${this.color};${this.text}/span } }在main.ts 里导入export {Hello} from ./hello/index打包输出结果lit-web-components.umd.js 16.92 kB │ gzip: 6.44 kB注意这里包含了lit 本身这个库使用打包构建带入lit本身的库建议 使用就很简单了引入 script src./js/lit-web-components.umd.js/script 使用 xk-hello colorred /xk-hello /br xk-hello texthello world /xk-hello输出效果和Dom实际应用和思考web component 可以为传统的老项目注入现代化开发能力Lit 则大大减轻了这个过程经过我在项目中的深入使用明显带来的好处样式隔离 自带的样式隔离和行为不会被之前的公共css等影响。减少了心智负担。复用沉淀了一大批组件快速构建页面统一了整站的交互性和ui 一致性。跨框架: 后续升级框架时之前的组件依然能用。减少了升级成本还能保持原来的ui细节。缺点额外的学习成本可以使用ai 来开发维护SEO影响 对于组件内部的一些隐藏属性可能会影响SEO建议增加描述关键内容通过Slot可以消除总结如果无法对大型项目重构大型项目开发起来又很痛苦尝试webcomponent 方案吧。升级平滑组件复用还有样式隔离插槽等现代化概念。