一、实现思路 在实践中后台管理系统的前后端分离时,往往会因为业务量的增加使其前端项目难以维护,以及打包时间不理想,还有业务系统与框架之间区分不在明显。本文是本人从另一个角度提出的一种解决方案,希望各位提出宝贵的建议。 一个通用的框架项目 此项目为框架项目,只负责提供基础方法,以及第三方依赖包的管理(因为一套系统第三方依赖包的版本应该统一的)、提供业务子系统的注册、布局的管理、导航管理等功能。 框架项目的cli,用于快速搭建业务子系统的开发平台 首先以框架项目的生产版本为基础,制作一个模板项目;然后再创建一个
前端模块化/构建工具从最开始的基于浏览器运行时加载的 RequireJs/Sea.js 到将所有资源组装依赖打包 webpack/rollup/parcel的bundle类模块化构建工具,再到现在的bundleless基于浏览器原生 ES 模块的 snowpack/vite,前端的模块化/构建工具发展到现在已经快 10 年了。
CSS代码规范 写在最前面的一句话:sass不要嵌套过深,不允许超过3层 命名规范 RULE1. 命名全部小写,不允许出现大写或者驼峰命名,使用短中划线,不允许出现下划线命名 bad .someSelector { margin: 0; } .some_selector { margin: 0; } good .some-selector { margin: 0; } RULE2. 尽量使用有意义的命名,不允许出现1,2,3,4的后缀区分,尽量避免使用拼音,除非耳熟能详的,比如分享的weixin
近段时间本人一直在思考如何基于vue搭建一个中后端管理系统的通用基础前端解决方案。思考的主要问题点如下: 如何使各个子业务模块的按需加载 css预处理方案的选择 如何引入现代的前端工程思想,也就是工程
Tech 导读 本文介绍了如何在开发阶段将vite应用于vue 2.x 工程,从而提高研发的开发体验与效率。主要涉及如何兼容process变量,如何处理 node-sass 与 dart-sass冲突,以及路径别名的兼容处理等。通过这篇文章可以为读者在vite接入过程中遇到的问题提供一些解决方案, 并帮助读者理清vue工程接入vite的具体思路。本文主要从整体介绍了新版会员徽章系统的设计方案以及未来规划,主要描述了等级模型的设计思路,读者可以通过本文对徽章系统的核心功能有初步的了解。
之前的 webpack 命令加前缀(如:"webpack:build"),继续可用
本站建立时便未使用 WordPress 自带评论系统,原因主要是在有比较多的功能需求需要适配和实现的情况下,二次开发比较耗时费劲。所以一直采用的是 Artalk (https://github.com/qwqcode/Artalk),功能非常完善;支持 Markdown、评论折叠、管理员等贴心功能。但是美中不足的其一是有后端部署的要求;其二是与博客的引用出于某些不清楚还没深究的原因效果不佳。最后的妥协是通过 iFrame 引用然后通过强制同源在父页面获取子页面窗口高度来实现评论区高度匹配。同时,这样的部署有几个影响用户体验的问题:
笔者个人观点看来,想要完全掌握前端工程化,那么就得对行业现有的构建工具、流程管理、服务管理有一个全面以及深入的认识,无论是前端还是后端开发者,我们通过任意编程语言编写软件应用,这是基本能力,但作为工程师,我想那就是得具有工程化的能力,我们应该在开发工程中能够具有把控全局的能力,有业务上的视野,也得有技术上的沉淀,应该时刻思考,从程序设计、流程设计、方案设计上尽可能得去逼近符合业务场景的最佳实践。
大家好,我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。
基于 vite 的优点速度快和热拔插功能,最近也在尝试将原来 webpack 构建的项目迁移改用 vite 构建代码,这里将他们迁移过程遇到的问题和总结记录下来。
时下大热的vue框架又来了新开发环境构建工具——Vite,今天我们一起来了解一下这个新成员。
当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器。 @mixin generate-sizes($class,$small,$medium,$big){ .#{$class}-small {font-size:$small;} .#{$class}-medium{ font-size:$medium} .#{$class}-big{ fo
对于编程语言进行「语法、书写」校验,能有效「归并」不同开发者的「不同风格」,还能检验出一些语法错误。
velte 是构建 Web 应用程序的一种新方法,核心思想在于通过静态编译减少框架运行时的代码量,它可以像React和VUE一样开发,但却没有虚拟DOM,可以将代码编译为体积小、不依赖于框架的JS代码。使用Svelte开发的无框架依赖的Web Components,可以在各个框架间复用。同时,Svelte的开发方式也不像写pure js那样繁琐。本文将结合ol实现跨框架组件复用。
成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。
本文由 nzbin 翻译,黄利民 校稿。未经许可,禁止转载! 英文出处:Loops in CSS Preprocessors 发表地址:http://web.jobbole.com/91016/ 如果你看过老的科幻电影,你一定知道循环的强大之处。给你的机器人克星设置无限循环,它就会爆炸,然后机器人灰飞烟灭了。 预处理器的循环并不会在太空中发生剧烈爆炸(我希望),但是它有利于书写 DRY CSS(译者注:详细介绍可以参考这篇文章 http://vanseodesign.com/css/dry-princ
https://majunchang.github.io/mi.vant/#/quickStart
我们都知道,Vite 在生产环境中,会使用 Rollup 进行构建,那么 Vite 是如何做到的呢?本文将讲述,从执行 vite build 到输出构建产物,这期间到底发生了什么?
在上一篇文章 《手摸手教你封装跨项目复用的 Vue 组件》 中,介绍了一例用 rollup.js 封装 Vue.js 组件库的实践;限于篇幅和复杂度,其中组件的即时调试预览部分,也同样采用了 rollup 一并配置出来,虽然完全够用,但运行起来稍嫌麻烦,bigger 上感觉也差强人意。
编者按:很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作,却不知道应该先学习什么再学习什么,也不知道该选择什么样的工具。因为经常被人问到类似的问题,全栈开发者Kamran Ahmed索性在github上制订了一份现代前端开发的路线图,并且用一篇文章对前端开发的整个学习过程进行了详细解释。感兴趣的初学者不容错过。
Tech 导读 本文主要基于京东集团的大数据平台,详细讲述了使用Hive实现数据立方体的方法。通过阅读本文,读者可了解Hive批处理的通用多维分析技术及调优措施,并应用于生产环境。
全文全部基于原生的小程序开发所阐述,各种第三方框架开发不在此列。并不会将整个项目的搭建流程细致的写出来,而是挑其中我认为在开发过程中存在的一些很重要的点进行详细陈述。
> 在自己的业务环境中使用,并开放给第三方isv,企业开发者使用,这是一篇有内涵有故事的文章。
前段时间,在公司做了个 Webpack 的分享。听众40多人,感觉还不错。所以总结一下,先看一下ppt的目录:
通过husky在每次git commit 时候使用prettier统一美化代码,再通过eslint进行代码检测,最终使用commitlint提交信息是否符合要求,以此保证代码质量
后来了解到腾讯云开发的Cloud Studio ,并参加实战训练营,发现这些东西可以直接实现浏览器直接访问,省去了电脑安装开发环境的烦恼,一站式代码管理可视化界面,方便整洁。话不多少上对比:
这些都是旧时代非常突出的问题,对开发效率影响非常大,直到… 出现了很多的工程化工具,比如:webpack、vite、esbuild、rollup.js 等等
本文最初发布于 Medium 上 freeCodeCamp 的博客站点,经原作者授权由 InfoQ 中文站翻译并分享。 📷 什么?又有一个打包器(bundler)/ 构建工具?是的——果真如此,演化和创新相结合为我们带来了 Parcel: https://parceljs.org/ 📷 Parcel 有什么特殊之处,为什么值得关注呢? webpack 要有大量的配置,这样带来的成本就是复杂性——与此相对的,Parcel 带来了简洁性。Parcel 将自己标榜为“零配置”。 Parcel 内置了一个开发服务器
Sass中的混合器类似于js的函数,将一段代码定义成混合器以实现代码的重用 声明混合器:@mixin mixName 调用混合器 @include minName 如
mpvue 是兼容微信小程序的生命周期与 vue 的生命周期,vue 实例会接管小程序 Page 实例的生命钩子,因此需要使用到小程序的生命周期钩子时,可将相应的钩子方法定义在 vue 实例中 如定义当前Page的分享标题内容图片:
前端构建工具是一类用于自动化构建、打包和优化前端项目的工具。它们帮助开发者处理各种前端资源(如 HTML、CSS、JavaScript、图片等),将它们转换、合并、压缩,并生成用于部署的最终文件。
写到最后总结得差不多了,后续如果我想起还有哪些构建依赖遗漏的,会继续在这篇文章上补全,同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔,喜欢的点个赞或收个藏,保证你在开发时用得上。# 前端汇总系列:npm依赖(构建编译)
https://juejin.cn/post/6969758357288648718
是的,官方暂未有文档表明已经支持Vite。接下来我会从Vite聊起,然后一步步解析如何去解决在qiankun微前端体系中集成基于Vite构建的子应用.
合理使用resolve.extensions 优化resolve.modules
前端资源打包在每个项目中都会有涉及,从如何优化构建速度和优化构建输出代码来说明一些方法。
本文介绍了CSS预处理器的一些作用,包括简化CSS、增强可读性、提高开发效率等。同时,文章还介绍了Autoprefixer和CSSGrace等工具,这些工具可以帮助我们更好地处理CSS。最后,作者探讨了未来CSS的发展,认为未来的CSS可能会更加简单和易于理解。
Rework是TJ大神开发的CSS预处理框架。但为什么会出现呢?TJ大神如此回答:
这里打包的格式设置为umd ,打包模式可以设置的类型有 umd(原生js) ,cjs (commonjs), es (es) 。
最近尝试将bundleless的构建结果直接用到了线上生产环境,因为bundleless只会编译代码,不会打包,因此构建速度极快,同比bundle模式时间缩短了90%以上。得益于大部分浏览器都已经支持了http2和浏览器的es module,对于我们没有强兼容场景的中后台系统,将bundleless构建结果应用于线上是有可能的。本文主要介绍一下,本人在使用bundleless构建工具实践中遇到的问题。
当下,在项目开发的过程中,前端工程师们越来越离不开构建工具了,可以说构建工具已经成为了前端工程项目的标配。
分享这篇文章是因为在SQL JOIN,你想知道的应该都有这篇文章中有个小伙伴问我,ON和WEHRE执行的顺序是怎样的,并且SQL执行顺序在面试中也经常被问,所以把姜承尧大佬《MySQL技术内幕 SQL编程》中关于SQL执行顺序的部分简单概述了一下,并配上例子,有想深入了解的可以去看书
最近,Bun 推出了它的快速原生 JavaScript 打包器,为 Bun 生态系统带来了增强的打包能力。这个新的打包器现在处于测试阶段,提供了一整套功能和工具,简化并加速了构建前端应用程序的过程。此外,Bun 还引入了 JavaScript 宏,可以在打包时执行 JavaScript 函数,并将其结果直接内联到打包文件中。
除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
领取专属 10元无门槛券
手把手带您无忧上云