解决js文件使用ES6语法import...from...导入jquery出现的问题，使用webpack

最新推荐文章于 2024-08-01 15:33:14 发布
最新推荐文章于 2024-08-01 15:33:14 发布
阅读量4.2k 收藏 3
点赞数 1
文章标签： javascript es6 jquery webpack Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nzmbella/article/details/128840206
版权
本文介绍了如何在JavaScript文件中使用ES6语法`import...from...`导入jQuery并解决由此产生的浏览器兼容问题。通过创建webpack配置，将main.js作为入口文件，将输出打包到bundle.js中，然后在HTML中引用打包后的文件，成功地使浏览器识别并执行导入的jQuery。这种方法有助于优化网页加载，减少静态资源引入。
摘要由CSDN通过智能技术生成

创建一个名为webpack-study的文件夹

其目录结构如下：

注：main.js在src目录下

右键webpack_study文件夹打开终端。

在终端中输入npm init -y

得到结果如下：

继续输入 npm i jq

最低0.47元/天 解锁文章
Pygmalion-B
关注
解决 在node-red中使用esmodule 库导致的路径错误 Uncaught TypeError: Failed to resolve module specifier “three“. Rel
知无涯
06-09 4146
解决 在node-red中使用esmodule 库导致的路径错误，错误信息 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
html导入es6,如何使用ES6语法导入jquery？
weixin_35928736的博客
06-26 1449
The accepted answer did not work for menote : using rollup js dont know if this answer belongs hereafternpm i --save jqueryin custom.jsimport {$, jQuery} from 'jquery';orimport {jQuery as $} from 'jqu...
JavaScript中的import from语法：用法、示例与注意事项
最新发布
软考鸭
08-01 1027
JavaScript中的语法是ES6（ECMAScript 2015）引入的一个重要特性，它允许开发者从其他模块中导入功能（如变量、函数、类等），从而提高了代码的可读性、可维护性和复用性。以下是对。
JQuery.js(导入文件)
01-29
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
Error：$ is not defined ，vue 项目中引入 jquery 报错及解决方法
潮汐未见潮落的博客
08-18 2906
Error：$ is not defined ，vue 项目中引入 jquery 报错及解决方法
jQuery中使用es6的map方法
langligelangxy的博客
08-15 166
最近遇到处理数据，因整个网站后台用的jQuery，想继续使用jQuery耕耘下去，结果发现要处理的多维数组，解构不变，只是key值要变，value值要变，开始尝试递归，发现好复杂，最后无奈尝试jQuery中能不能用es6的方法，发现还真行，记录一下。
JS中使用ES6语法简化开发
qq_51076413的博客
02-26 289
JS中使用ES6语法简化开发
javascript中为什么我们不能直接使用export?
02-28 1311
这个行为是JavaScript公认的设计失误之一(类似的还有双等 ==)，一个语句中的a在预处理阶段和执行阶段被当做两个不同的变量，严重违背了直觉，但是今天，在JavaScript设计原则“don’t break the web”之下，已经无法修正了，所以这里需要特别的注意。但是，这里的行为跟导出变量是不一致的，这里导出的是值，导出的就是普通变量a的值，以后a的变化与导出的值就无关了，修改变量a，不会使得其他模块中引入的default值发生改变。当我们调用修改变量的函数后，b模块变量也跟着发生了改变。
前端Vue常见面试题大全.docx
02-01
- **代码分割：** 使用 webpack 动态导入 (`import()` 语法) 功能。 - **预加载/预取：** 使用 `<link rel="preload">` 或 `<link rel="prefetch">` 标签预先加载关键资源。 - **压缩：** 使用 gzip 压缩减少传输量...
vue-cli脚手架build目录中的webpack.base.conf.js配置文件详解
weixin_43346192的博客
03-13 1125
webpack.base.conf.js：vue开发环境的wepack相关配置文件，主要用来处理各种文件的配置。 webpack.dev.conf.js：开发环境的配置文件 webpack.prod.conf.js：生产环境的配置文件 此文章主要介绍webpack.base.conf.js 的详细属性 // 引入nodejs路径模块 var path = require('path'...
webpack把vue文件编译成html,深入使用webpack构建vue.js单页应用
weixin_27009347的博客
06-19 843
原标题：深入使用webpack构建vue.js单页应用1.安装依赖包项目中使用了vue.js，webpack，gulp，还有饿了么开源的elementUI，因为使用了es2015，所以还需要引入babel将es6的js代码转换成es5。必须用到的依赖如下： 此外gulp-cli、webpack、babel-cli最好使用全局安装，npm install -g webpack，就可以在命令行下方便的...
Not using node.js : Uncaught TypeError: Failed to resolve module specifier “three“. Relative referen
weixin_47175582的博客
11-29 4524
https://www.cnblogs.com/gongxiansheng/p/16313509.html
源码学习01 Axios
多啦的博客
07-31 449
Axios是一个基于Promise的HTTP请求库，可以用在浏览器和Node.js中。平时在Vue项目中，经常使用它来实现HTTP请求。 它的使用简便、灵活，并且有interceptors、数据转换器等强大的功能，以前用的时候并没有仔细研究过这些功能是如何实现的，正好在知乎的大前端专栏看到一篇文章对Axios的源码进行了解读。借着这篇文章的帮助，我开始了自己阅读源码的道路。 以后要多多的读源码，更多的独立完成，向大神们学习。
Vue知识点
qq_43627109的博客
01-12 3108
vue学习
成功解决Uncaught TypeError: Failed to resolve module specifier “vue“.
LM_MT的博客
05-14 3728
成功解决Uncaught TypeError: Failed to resolve module specifier "vue".
Uncaught TypeError: Failed to resolve module specifier “three/examples/jsm/controls/OrbitControls“.
张木期的博客
07-17 2914
做three.js项目遇到这个问题。(网上找到的，还没验证)
Uncaught TypeError: Cannot read properties of undefined (reading ‘createElementVNode‘)
qubes的专栏
10-08 1125
通过 vite-plugin-cdn-import 配置 cdn。每个包的具体版本，可以在 yarn.lock中找到。主要包括 vue element。
TypeError: Failed to resolve module specifier “weblogo.png“. Relative references must start with eit
weixin_63709023的博客
10-31 1527
如果 "weblogo.png" 文件位于一个子目录中，你可以提供从代码文件到 "weblogo.png" 文件的相对路径。在这种情况下，模块指定符 "weblogo.png" 没有以 "/", "./" 或 "../" 开头，导致了错误的发生。如果 "weblogo.png" 文件位于父目录中，你可以使用 "../weblogo.png" 作为模块指定符，向上一级并定位到文件。如果 "weblogo.png" 文件与你的代码文件在同一个目录中，你可以使用 "./weblogo.png" 作为模块指定符。
es6语法...和解构
09-01
es6语法中，"..."被称为扩展运算符，可以用于数组或对象的展开操作。在数组中，它可以将数组的元素拆分成单个的值；在对象中，它可以将对象的键值对拆分成单个的属性和值。 解构是一种从数组或对象中提取值并赋给变量的语法。在数组解构中，可以通过方括号括起来的变量列表来将数组的元素赋值给对应的变量。在对象解构中，可以通过花括号括起来的变量列表来将对象的属性值赋值给对应的变量。 例如，数组解构可以将一个数组的元素赋值给多个变量，可以实现变量的交换。 在es6中，使用解构和扩展运算符可以轻松地处理复杂的数据结构，提高代码的可读性和简洁性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [ES6解构赋值: ES6...转为ES5的写法](https://blog.csdn.net/qq_30934923/article/details/105269231)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值