Webpack是否足够聪明，可以让jQuery变得更轻？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

2025年该淘汰的5个JavaScript库

此外，现代浏览器已经标准化，使得像jQuery这样的跨浏览器解决方案的需求变得多余。更不用说，如今将jQuery捆绑到应用程序中可能会增加不必要的膨胀，在速度至上的时代减慢了加载时间。...像 Webpack、Vite 和 Rollup 这样的流行打包器也提供了简化依赖项管理的方法，使得使用 RequireJS 变得多余。...原生 JavaScript (用于 jQuery) 原生 JavaScript API 已经得到了极大的改进，对于 jQuery 过去处理的大部分内容，原生 JavaScript 可以同样出色地完成。...Date-fns 或 Luxon (用于 Moment.js) Date-fns 和 Luxon 是 Moment.js 的更轻量、更模块化的替代方案。...Webpack 和 Vite 等工具可以帮助您打包应用程序并以更简化的方式处理依赖项。此外，现代浏览器对原生模块的支持允许您加载模块而无需任何额外的依赖项。

1.1K1 0

【分享】Vue.js新手入门指南

你是否还记得你当初写JQuery的时候，有写过$('#xxx').parent().parent().parent()这种代码呢？...而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的，可能到时候打开这个页面，会变得越来越卡，而你却无从下手。...为什么写个代码这么难，你想砸电脑，你想一键盘拍在产品狗的脑袋上，责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。这个时候如果你学过Vue.js，那么这些抱怨将不复存在。...在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。...前端开发基本上不需要太高端的电脑都能胜任，现在这个时代是台电脑，装个编辑器都可以做前端开发的。 Vue.js的组件文件本质上还是普通的代码文件，所以各种编辑器配合一些语法检查插件就足够了。

3.9K4 0

您找到你想要的搜索结果了吗？

是的

没有找到

B乎问题：通俗的解释下Vite能用来干嘛？是怎么回事？

我用通俗的话表述了一遍（可能不一定准确，仅代表个人的理解）：目前大部分浏览器已经支持了ESM(ES Modules)模块的方式了，因此我写了一个转化工具，可以让一些浏览器不支持的格式（.vue/.svelte...很多人会从 ES Modules 、Dev Server 、Vue 集成度高、速度快啊各种方向来讲解它，更像是在说它的优点，我觉得有点神话它了，所以才让它变得那么神秘（迷惑）？...模块化简史把时间回退到2006年，这个时候「jQuery」刚呱呱落地，那个时候虽然没有模块化，使用 jQuery 相比传统那样写已经提高极大的速度，当然虽然已经很方便了，单还是阻挡不了爱研究的程序员们...写在最后当回答完这个问题的时候，不禁会想，前端的发展过程中却是会有一些新瓶装旧酒的东西，然后神话它，然后让小白觉得它很高大上，让人惧怕，然后大佬就会觉得这个东西很简单，也不愿意去拆解它，是否我们需要转化一些思考...当然我不否则这些新的工具带来的便利以及背后的付出，但是亲民是否也是一种方式，或许会变得更加美好？答案我也不得而知，本文只是作出了自己的一个思考，如有错误请大家批评指出。

3K4 0

前端工程化发展历史

我是不是可以用 jQuery 去获取数据和展示？天哪，不不不，已经没有人再用 jQuery 了。你应该去学习 React，现在已经 2016 年了！啊，好吧，React 是什么呢？...让我理一理，我只想从服务器加载一段数据，过去我是从 CDN 中拿到 jQuery ，然后通过 AJAX 请求数据就可以了，现在怎么变得那么复杂了？...大哥，已经 2016 年了，没有人再使用 jQuery 了，它只会让你写出意大利面条式的代码。...AJAX 只是基于 XMLHttpRequests 的封装，而 Fetch 可以让你使用 Promise 风格去异步请求数据，从而避免回调地狱。回调地狱？...嗯嗯，我知道这个，所以 promise 可以解决这个问题吗？是的，通过 promise 你可以更轻松的管理异步请求，写出易于理解的代码，同时调用多个网络请求。也就是用 Fetch 去写？

1.3K2 0

Vue Webpack 组件化开发实践

，如此沉重jQuery在不那么复杂的 SPA 中完全可以予以摒除；最兴奋的是户界面完全可以用嵌套的组件树来描述，再也不用写重复代码or拷贝(如果撸好组件封装)，生活原来可以如此美好，这是我不得不欢喜非常...防止组件样式污染；error/warn信息完善，易于调试；轮子丰富（vue-router、vue-loader…）功能强悍，基于依赖收集的观测机制，高效精准…… 在不就之后就要发布的 vue2.0，将更轻...首先，可以用它作为 vue webpack es6 sass jade等入坑参考，借机体验这些联合来塑造出的组件化开发，或多或少会有所获。...上述言论，还有些补充；对于 vue 入门，这是一件非常容易的事儿；但到现实协作中开发，诸多东西都是挺需要探讨一番的；譬如使用 vue-resource 来替代 JQuery-Ajax；再比如 vue 虽然为组件...加班学习&折腾，让明天更加高效；还是加班搞需求，让明天后天继续加班到更晚？如何抉择，这无关乎谁对谁错，这只是你的选择；请记住，好工具是好思想的容器；好工具也会蕴含好知识。

9615 0

继 layui 之后， jQuery Mobile 宣布完全弃用！

贤心的一段话让不禁让大家感叹一个时代的落幕，其实就是 jQuery 时代的落幕，已经不远了。...jQuery 的出现已经改变了开发者在 Web 上开发的方式，让创建安全、合规的应用变得更容易。...jQuery Mobile 的目标是将 jQuery 的易用性引入支持 HTML 的移动设备浏览器，并让开发者能够更轻松地开发 Web 应用。...Alex Schmitz 于 2014 年 7 月接任负责人，那时候，项目的规模，加上新移动浏览器功能的速度和可用性，让这个项目的维护变得越来越困难。最新的稳定版本于 2014 年 10 月发布。...jQuery Core 也在积极的维护和发展，可以看到，jQuery 每月仍保持着400W 的下载量。

1.4K1 0

正确的Webpack配置姿势，快速启动各式框架！

初始Webpack 这里主要基于Webpack2来讲吧，Webpack1迁移到2还是不是特别难的，官方也配了迁移文档。其实官方的文档也有很详细的说明了，对于一般的项目还是可以完全驾驭的。...这里我们使用ts-loader也就足够了： 12345 {test: /\....像我们常用的jQuery： 1234 new webpack.ProvidePlugin({jQuery: 'jquery',$: 'jquery'}) 4....当我们需要使用React时，还要修改：extensions: ['.ts', '.tsx', '.js']} 2. resolve.alias 创建import或require的别名，来确保模块引入变得更简单...) 在实际开发中，webpack-dev-server可以实现以下需求：每次修改代码后，webpack可以自动重新打包浏览器可以响应代码变化并自动刷新一般来说，我们可以通过引入webpack.config.js

2.1K3 0

2018前端工程师成长路线图

是否需要学习JQuery? No! 很久以前，大家热爱JQuery，因为它封装了JavaScript的接口，让我们可以不用考虑浏览器兼容性。但是，JQuery的时代已经过去了，新的项目已经很少用它了。...最近，PostCSS开始变得流行起来，它确实还不错，相当于CSS的Bable。你可以单独使用PostCSS或者基于Sass使用。我建议你先学习Sass，有时间再了解一下PostCSS。 8....现在，webpack可以完成任务管理工具的大部分工作，因此我们可以结合npm script和webpack一起使用就好了。打包工具有Webpack、Rollup、Browserify。...静态类型检查为JavaScript添加静态类型检查，可以让代码更加严谨，避免很多错误。你只要学习数个小时，就可以一直受益。...但是，是否采用服务端渲染其实还有争议，了解一下可以React有Next.js和After.js，Angular有Universal，Vue.js有Nuxt.js。，是否根据需要决定是否使用。 17.

1.6K2 0

vue --- 解读vue的中webpack.base.config.js

({ jQuery: 'jquery', $: 'jquery' }) ], // resolve是webpack的内置选项，也就是说当使用 import "jquery..."，该如何去执行这件事 // 情就是resolve配置项要做的，import jQuery from "..../additional/dist/js/jquery" 这样会很麻烦，可以起个别名简化操作 resolve: { extensions: ['.js', '.vue', '.json'],...client')] // 指明src和test目录下的js文件要使用该loader }, /* 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个...64位的DataURL 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的 */ {

1.7K5 0

Webpack 打包优化之体积篇

—— Webpack 插件和 CLI 实用程序，她可以将内容束展示为方便交互的直观树状图，让你明白你所构建包中真正引入的内容；我们可以借助她，发现它大体有哪些模块组成，找到不合时宜的存在，然后优化它。...，这两个站点也是以可视方式呈现构造的组件，可以让你清楚的看到模块的组成部分；不过稍显麻烦的是，你需要运行以下命令，生成工具分析所需要的 json 文件： webpack --profile --json...让每个第三包“引有所值” 确定引入的必要性前端发展到如今时期，倘若项目采用了 MVVM模式框架，数据双向绑定，那么像 jQuery 这般类库，不能说没有丝毫引入的必要，至少可以说确实没有引入的必要。...对此，如果还有些顾虑，完全可以参考下 YOU MIGHT NOT NEED JQUERY；用原生写几行代码就可以解决的事儿，实在不易引入这么个庞然大物，平添烦恼。...尽量使用模块化引入如果说 jQuery 确实没有引入必要，很多人会同意；但对于 lodash 这类依赖的工具，并不是所有人都会去造一发轮子的。然而全包引入 400kb 的体量，可否有让你心肝一颤？

2.2K4 0

从零搭建一个 webpack 脚手架工具（二）

时，可以这么引入： import $ from 'jquery'; 但是这个 $ 变量并不在全局下（window）。...模块热替换功能 hot: true, // 是否让浏览器自动打开（默认是 false） open: true, // 被作为索引文件的文件名...在 devServer 中单纯的让 hot = true 是没有作用的，还需要一个 webpack 插件。这个插件是 webpack 内置的插件，不需要下载。...(), ] } 配置好 webpack 之后，还需要在入口程序处检测 module.hot 是否存在（这个对象是在 webpack 打包后自动加入的）。...下一节将介绍 webpack 优化、代码分片与压缩，以及改造 create-react-app 的 webpack 配置，让其支持多页应用。

1.8K4 0

回顾我眼里的前端十年

记得那个时候，写过很多JS插件，记得当时给公司写过一个导航插件，一个可以通过按键进行导航，就是基于jQuery开发的，可以说那个时候的JS插件大部分都是基于jQuery开发的，因为jQuery实在太好用了...不知道当时的前端领导是否是借鉴了bootstrap，总之在我看来那个前端领导是个非常出色的前端工程师。...那个时候很流行将JS的工作交给css来做，谁让css那么优秀呢... css3可以说对于前端是一个巨大的改变，盒子模型的诞生彻底改变了网页排版布局，自从有了css3之后，人们的网页布局变得异常丰富，而这也很考验前端开发者的能力...css3的媒体查询功能，让自适应网站得到了发展，虽然后来很多公司都抛弃了它。...在这个时候，人们发现前端开发也可以进行模块化管理，而有了webpack，人们可以非常方便管理前端资源。这个时候，有个关键性的JS标准诞生了，它就是跨时代的ES6。

6124 0

009 | 快速入门Web前端开发的正确姿势

几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angular、React、Vue 等框架的兴起，变成了百家争鸣的局面。...这几年，Web 前端的技术发展真是太快了，相应地，技术栈也就变得非常多，除了最基本的HTML/CSS/JavaScript，以及 Vue/React/Angular 等这些 JavaScript 框架和各自的生态体系...至于 jQuery + Bootstrap 这套，已经过时了，建议没必要去学习了，毕竟我们的时间很宝贵，还有一大堆更有价值的东西等着我们去学。...Know JS》也要推荐给大家，也是开源教材，这套书会让你对 JavaScript 知其然也知其所以然，也包含了 ES6 的内容，不过这套书面向初学者的，只适合用来进阶。...webpack：webpack 是打包构建工具，可以类比为 Java 的 Gradle。

1.8K7 1

前端资源、交流社区、技术博客等整理总汇

HTML5 有哪些让你惊艳的 demo？...网站说明学习jQuery Learning Center jQuery API 中文文档官方 jQuery API中文文档愚人码头 jQuery UI API中文文档愚人码头 jQuery中文手册...网站说明 webpack 官方网站 webpack 中文中文官网 webpack github webpack-demos 阮一峰二十、Markdown 网站说明 Markdown 语法说明...变得更轻松。...Thimble 一个在线代码编辑器，用它可以很轻松地创建和发布一个您自己的网页，一切伴随着 HTML、CSS 和 JavaScript。

1.8K0 1

前端资源分享——只为更好前端

HTML5 有哪些让你惊艳的 demo？...网站说明学习jQuery Learning Center jQuery API 中文文档官方 jQuery API中文文档愚人码头 jQuery UI API中文文档愚人码头 jQuery中文手册...网站说明 webpack 官方网站 webpack 中文中文官网 webpack github webpack-demos 阮一峰二十、Markdown 网站说明 Markdown 语法说明...变得更轻松。...Thimble 一个在线代码编辑器，用它可以很轻松地创建和发布一个您自己的网页，一切伴随着 HTML、CSS 和 JavaScript。

4.5K11 1

前端资源分享-只为更好前端

HTML5 有哪些让你惊艳的 demo？...网站说明学习jQuery Learning Center jQuery API 中文文档官方 jQuery API中文文档愚人码头 jQuery UI API中文文档愚人码头 jQuery中文手册...网站说明 webpack 官方网站 webpack 中文中文官网 webpack github webpack-demos 阮一峰二十、Markdown 网站说明 Markdown 语法说明...变得更轻松。...Thimble 一个在线代码编辑器，用它可以很轻松地创建和发布一个您自己的网页，一切伴随着 HTML、CSS 和 JavaScript。

2.3K4 5

自问三连，如何建设团队里的前端工程技术？

即使不断拆分js文件，但错综复杂的作用域叠加，也会致使项目变得难以维护。...为了抗衡处于日积（屎）月累（山）的项目，聪明的开发者制定了 CommonJs、AMD、CMD 和 UMD 等Javascript模块化策略，把作用域分隔开，变成一个个的小模块。...试想下，假如前端工程足够简单，何必要搞开发模板，搞devops、多环境、组件库呢？对吧。。。...在上面场景一，小张其实可以利用构建工具的多环境部署特性，加上devops部署流水线插入对应客户的路径作为环境变量，让项目自适应构建就能解决。...工程框架和组件建设：优秀的脚手架和组件都应该配有名分，经过团队业务的洗礼和工程师的不断迭代，这些技术上的沉淀可以开源到企业内部软件源平台，或你对组件有足够信心，也可以对外开源。

1.1K4 0

Webpack+vue+boostrap+ejs构建Web版GM工具

css，可以加入 sass 或者 less 支持，我这里加入了 sass 支持。...其实有很多模板引擎增加了对 webpack 的支持，而我之前用过一些 ejs ，比较轻量级，功能也足够，所以我还是用了 ejs 作为模板系统。...", $: "jquery", jQuery: "jquery" }) ] } 集成VSCode: monaco-editor 和 typescript 支持我们GM...({ moment: "moment", $: "jquery", jQuery: "jquery", Vue...run build 就可以了。

3.2K3 2

2018 最值得关注的前端技术

如果大家有什么工具，框架，库觉得可以推荐的，欢迎在评论区提点，让大家相互进步，学习！...带来多大的威胁 webpack 大家都知道是JavaScript模块打包工具，简单的来说就是把各个模块就行分析，编译，打包等，使产出的文件可以在浏览器中运行。...但是有了flex和grid，布局变得更加的简单。首先flex基本已经被所有的浏览器支持的，其方便的特性也受到了很多开发者的热捧！ ?...但是就在17年第四季度还是年末，微信先后宣布可以内嵌html5页面，也可以开发小游戏。让我看过了小程序又有了刚发布的热度。在18年，小程序发展如何，我是否会接触和学习开发小程序，走着瞧。...让大家相互学习，相互进步！ |

1.5K3 1

Webpack入门

修改src/js/list.js，让它引用jquery： var $ = require("jquery"); // ......在webpack中，可以使用称作code splitting（代码分拆）的技术来实现。这里jquery本来就是一个打包好的文件，不需要打包，只需要引用。.../~/jquery/dist/jquery.js 259 kB {1} [built] 可以看到生成了两个文件：list.js和1.list.js。...}) ] }; 为了让文章紧凑一点，配置文件中相同的地方没有再列出来了，下同。...生成的dist/js/list.js会变得非常庞大，因为包含了很多react的代码，可以使用前面提到的功能生成多个文件，这里就不再演示了。总结这篇文章中只能算作流程攻略，而非详情解说。

2K2 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭