我已经使用expose-loader设置了jQuery全局变量，但是我得到了错误'Bootstrap's JavaScript需要jQuery‘ - 腾讯云开发者社区

文章/答案/技术大牛

发布

【Hybrid开发高级系列】WebPack模块化专题

,// 指定一个路径作为上下文环境，需要与DllReferencePlugin的context参数保持一致，建议统一设置为项目根目录 }), /* 跟业务代码一样，该兼容的还是得兼容 *...header，那么我需要在 index.js 和 index.scss 中声明我依赖了 header.js 以及 header.scss 其实用webpack打包的话，只需要一个定义文件就可以同时打包...+ expose-loader 首先来介绍我最为推荐的方法：ProvidePlugin + expose-loader，在我公司的项目，以及我个人的脚手架开源项目webpack-seed...jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`` }, 你或许会问，有了ProvidePlugin为嘛还需要expose-loader...config文件中已经开始使用了。

9325 0

在找一份相对完整的Webpack项目配置指南么？这里有

使用Webpack首先需要安装好NodeJS node -v npm -v 确保已经可以使用node，使用NPM包管理工具来安装相应依赖包（网络环境差可以使用淘宝镜像CNPM来安装） npm install...编译Sass成CSS，嵌入到页面标签中，或将其提取出（多个）CSS文件来用引入 sass的编译node-sass需要python2.7的环境，先确定已经安装并设置了环境变量 npm...publicPath为/public/static/dist/js/ 当然了，也不是说一定得在js中引入这些css资源文件，你可以直接在页面中手动引入第三方CSS 我这里主要是基于模块化文件依赖...上述ProvidePlugin定义的变量只能在模块内部使用，我们可以使用expose-loader将jQuery设置为全局可见 npm i expose-loader --save // 添加一条规则...使用到了Webpack内置支持的ejs模版，并使用到了其htmlWebpackPlugin变量，里面携带了本次编译的一些信息，我们可以直接输出来插入资源，然后再设置 inject: false就行了

3.9K1 0

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

是的

没有找到

为Vue2集成UIkit

这是个比拼开发速度的年代，我们已经没有时间重复发明轮子了，最正确的选择是使用界面框架，例如Bootstrap、UIkit、Foundation等来代替这种大量的重复性极强的界面样式开发工作。...UIkit Bootstrap已经有很多年历史了，在业界的应用也相当普遍，无论是前端开发或者后端开发，为了能快速做一个不算太难看的界面，它自然成为众多工程师的选择，包括我。...我们得同时安装jQuery、UIkit两个库： $ npm i jquery uikit -D 配置我们需要将jQuery和UIkit的引用以及一些字体的引用配置添加到webpack中（UIkit内置引用了...使用UIkit时，需要在代码中同时import它们才能让webpack在编译时正确地引用。...$，这个变量其实是对jQuery的一个内部引用，准确地说这是在引用jQuery的脚本后由jQuery注册到浏览器的window全局变量上的jQuery实例。

1.7K2 0

Webpack打包构建太慢了？试试几个方法

插件自带的JS压缩插件是单线程执行的，而webpack-parallel-uglify-plugin可以并行的执行，在我的小demo中使用后，速度直接从25s变成了14s new webpack.optimize.UglifyJsPlugin...标签引入的方式比如jQuery插件，react, react-dom等，代码量是很多的，打包起来可能会很耗时可以直接用标签引入，然后在webpack配置里使用 expose-loader...happypack了，其他loader可以类似地换一下要注意的第二点是，使用ExtractTextWebpackPlugin提取css文件也不是完全就能转换过来，所以需要小小的改动一下，比如 module...: /node_modules\/(jquey\.js)/ } 十六、使用异步的模块加载这个算是可以减小模块的体积吧，在一定程度上也是为用户考虑的，使用require.ensure来设置哪些模块需要异步加载...当然，开启了热更新替换后简直美不可言当然还有很多方法没整理出，这些方法是有使用场景的，并不是每个都需要用，需要在自己的项目中尝试，结合配置它的复杂性和带来的效应来权衡。

5.4K2 0

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

中使用 jquery 时，可以这么引入： import $ from 'jquery'; 但是这个 $ 变量并不在全局下（window）。...如果我们想要将改变量暴露到全局中，需要使用 expose-loader。下载：yarn add expose-loader。...将 jquery 模块暴露出来： import $ from "expose-loader?$!jquery"; ?$! 中的 $ 就是指被暴露的变量名（expose-loader ? !...$' ] } 配置好后，使用 jQuery 时，还需要进行引入：import $ from 'jquery'。...有一点需要注意，在开发环境不要设置 publicPath，因为开发环境下 devServer 执行打包的内容是在内存里的，如果设置了 publicPath 保存后页面反而不会有刷新。

1.8K4 0

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

比如当我们使用 jQuery 时，可以这样引入：import $ from jquery。但是当获取 window.$ 时必不能获得 jQuery 对象。...这是因为 webpack 做了处理没让 jquery 变量暴露给 window。如果想让改变量暴露出来，就可以使用 expose-loader。...用法是将 import 语法修改成下面的样子： import $ from "expose-loader?$!jquery"; 上面的代码中，expose-loader 就是指使用的该模块，而 ?...这样，jQuery 对象就暴露给了全局。...$' } ] } 但是使用上面的配置之后，还是要使用 import $ from "jquery"; 方式去引入模块。如果不想每次重复去写这一句代码。

8951 0

jQuery 插件

jQuery 插件常用的网站： jQuery 插件库 http://www.jq22.com/ jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤：...所以下面只演示js的引入，html和css引入根据自己实际项目需要使用哪种风格引入对应的HTML和CSS。...1.4. bootstrap组件 Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...插件（JS） bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。

9.4K3 0

jQuery 插件

（下载略）我们使用jquery插件库EasyLazyload....所以下面只演示js的引入，html和css引入根据自己实际项目需要使用哪种风格引入对应的HTML和CSS。...4. bootstrap组件网址：https://v3.bootcss.com/ Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...插件（JS） bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。

9.2K2 0

Jump Start Bootstrap 第1章

Bootstrap是一个前端框架，可以帮助开发者启动网页开发的过程；从后端转前端的(Java、PHP等)开发者可能很难把握CSS和JavaScript；但是，使用Bootstrap,他们只要专注HTML...但是你已经实现了这些功能，并且只要写一点HTML就能使用这个网站，这就是Bootstrap。所有必要的CSS类和JavaScript代码，都已经包含在Bootstrap包内。...设计需要为这些用户定制。让我们假设我们使用了Bootstrap来创建桌面布局。我们已经使用它的网格系统来创建响应式设计，这样布局就会自动调整以适应平板电脑和移动设备。在平板设备上，布局将如图所示。...Bootstrap需要jQuery让它的JavaScript组件工作。 bootstrap.min.css是什么？...’s JavaScript requires jQuery 异常。

4.9K4 0

jQuery 插件

我们将重点详细讲解，从找到插件所在网页，然后点击下载代码，到插件的使用等，后面的插件使用可参考瀑布流插件的使用。下载位置代码演示插件的使用三点： 1....所以下面只演示js的引入，html和css引入根据自己实际项目需要使用哪种风格引入对应的HTML和CSS。...1.4. bootstrap组件 Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。...插件（JS） bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现）。

9.7K1 0

前端成神之路-03_jQuery

对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件 1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下...1.4. jQuery 拷贝对象 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。语法 ?...多库共存实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为...1.4.4. bootstrap组件 Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式...凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件，凡是在应用程序中已经预留接口的组件就是插件。

3.8K2 0

window的onload事件和domcontentloaded执行顺序

在此我简单翻译一下： .ready()只要页面的文档对象模型（DOM）可以安全地操作，该方法就提供了一种运行JavaScript代码的方法。...可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。...尽管由 .ready() 添加的处理程序总是在动态加载的脚本中执行，但是窗口的加载事件已经发生，并且这些侦听器永远不会运行。...为什么我上面说是类似于DOMContentLoaded，看了上面官方文档的解释应该会明白了。...js和css，通过输出我发现了不一样的结果： ?

4.3K1 0

RequireJS极简入门教程RequireJS核心功能：HOW TOmain.js使用 shim

随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式，我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。...', jsonview: 'plugin/jsonview/jquery.jsonview', bootstrapDialog: 'plugin/bootstrap-dialog...requirejs一共提供了两个全局变量： requirejs/require: 用来配置requirejs及载入入口模块。...如果其中一个命名被其它库使用了，我们可以用另一个 define: 定义一个模块使用 shim shim是将依赖中的全局变量暴露给requirejs，当作这个模块本身的引用。...当我们使用 function hello() {} 的方式定义一个函数的时候，它就是全局可用的。

2K3 0

webpack使用优化（基本篇）

$与jQuery对应起来使用优化了解了以上介绍的Loaders和Plugins之后，基本就可以搭建一整套基于Webpack的构建（不需要gulp与grunt，合图除外）。...然后维护者在开发的分支上加了这么一个特性（证明维护者不想在插件里加内联功能了，想让我来弄）：事件允许其它插件去使用执行事件 html-webpack-plugin-before-html-processing...优化点十一.如果在通过webpack在项目中使用bootstrap, jquery以及fontawesome 这一点对于创业公司来说可能比较有用，它们的初期产品都需要快速上线，用一些比较成熟的UI框架会比较好...这样，首先我们需要jquery文件，并且安装bootstrap(3.3.5) ,font-awesome(4.4.0),以及imports-loader(0.6.3)。...: "jquery" }), 这样，就可以同时使用jQuery, Bootstrap和Fontawesome了。

2.2K10 0

用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

方法还是有挺多的，很多JavaScript的库都可以实现这个功能，但是因为WordPress里已经自动加载了jQuery了，所以就不想再引入其他库了，而且这个需求也很简单，用jQuery就足够了。...第一步原作者一共写了15篇，这是定死了的，只需要获取到我已经在丘壑博客上翻译了几篇就可以了，除以总数15篇就得到了百分比。...写CSS是我的弱项，所以我就选择了Bootstrap，完整版的太臃肿了，包含了太多不需要的东西，完整引入也有可能会把现有主题搞乱，所以在 Bootstrap官网上定制化下载了一个最简版的，只包含alert...，最后，我只想在这一个页面上显示这个进度，其他页面上都不需要，所以，新建一个针对这个页面的模板 page-genesis-explained.php，放在子主题的目录下。...当然要先把需要用的文件FTP上传到对应的目录下，我就全扔到wp-content/themes/genesis-sample/js 这里了。 <?

2.3K4 0

公司国际化笔记

但是针对java部分的代码,虽说稍微熟悉一些,但是国际化就暂时不需要我负责了,虽说我也只是之前弄过纯java的一些简单的国际化....jquery.i18n.properties 由于考虑到公司原本的代码没有使用什么现在的最新框架,只是采用的最后一个,也就是jquery.i18n.properties这样子的一个解决方案了,目前方案就暂时这么定来下了...开始着手引入jQuery相关js 首先是引入jQuery的文件.有两种方案了,一种是在每个页面一个个添加,这样子效率不高,但是稳定,还有一种是采用js直接内部引入外部的js的方法,两种方法的代码如下:...,如果非要解决的话,就把原先的html里面的标题设置成空格把,这样就看不到中文了..../page部分的双引用已经更改为一个引用,两个部分完全一致,但是不能自动国际化,则选择性修改后者

1.4K4 0

Bootstrap使用及环境搭建详解

大家好，又见面了，我是你们的朋友全栈君。...Bootstrap为我们写好测试了各种兼容、疑难问题，并构建了一套非常优秀成熟的响应式类，并及时提供了移动端优先的响应式系统，我们只需使用Bootstrap已经封装好的class。...下载Bootstrap （1）用于生产环境（项目开发） less文件编译并压缩后的 CSS、JavaScript 和字体文件，不包含文档和源码文件，大小相对于源码包减少一些，用于项目开发生产环境中使用...和字体文件的源码，并且带有清晰的文档，但需要 Less 编译器和一些设置工作。...-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> jquery.com/jquery.js">

3.3K2 0

移动端app开发，框架的选择。

大家好，又见面了，我是你们的朋友全栈君。...通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。它使用JavaScript MVVM框架和 AngularJS来增强应用。...和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap, jQuery Mobile 和 Topcoat....它已经诞生很多年了，现在已经成为很常用的混合式编程开发框架。 Sencha Touch可以让你的Web App看起来像Native App。...PhoneGap PhoneGap 恐怕是最老的一个框架了，相信很多人都已经听说过甚至使用过它，但是PhoneGap是基于开源的 Cordova 商业版本。

5.4K1 0

jQuery格式化显示json数据

注意：部分key前面有一个减号，点击减号，就可以收缩了。点击加号，可以展开。但是这样有一个问题，我需要用鼠标copy时，会带有减号。复制之后，就是一个错误的数据！！！...需求有这样一个需求，我用django开发一个接口，需要给其他人员展示数据。展示数据时，默认直接展开json 格式化好的数据，方便其他开发人员调用。...但是jq22.com 提供的插件，有一个textarea输入框，我需要把它给去掉。默认json格式化的数据中，key是没有带双引号的，我需要默认勾选它，因此要修改js代码。.../jquery-1.10.2.js"> jquery.json-viewer.js"> javascript...另外我提供了一个demo，更换bootstrap版本，去除了多余的静态文件。 github地址如下： https://github.com/py3study/json_view_demo

8K3 0

Webpack最佳实践

有三种方式可以引入全局变量 expose-loader 可把变量暴露到 window 全局对象上，以 jquery 为例，先安装依赖 npm i jquery expose-loader -D 然后在...绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。使用绝对路径，将只在给定目录中搜索。使用相对路径，通过查看当前目录以及祖先路径。...但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。将它们设置为 false以禁用任何默认缓存组。...有三种方式可以引入全局变量 expose-loader 可把变量暴露到 window 全局对象上，以 jquery 为例，先安装依赖 npm i jquery expose-loader -D 然后在...但是 test、priority 和 reuseExistingChunk 只能在缓存组级别上进行配置。将它们设置为 false以禁用任何默认缓存组。

3.7K2 0

点击加载更多

【Hybrid开发高级系列】WebPack模块化专题

在找一份相对完整的Webpack项目配置指南么？这里有

为Vue2集成UIkit

Webpack打包构建太慢了？试试几个方法

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

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

jQuery 插件

jQuery 插件

Jump Start Bootstrap 第1章

jQuery 插件

前端成神之路-03_jQuery

window的onload事件和domcontentloaded执行顺序

RequireJS极简入门教程RequireJS核心功能：HOW TOmain.js使用 shim

webpack使用优化（基本篇）

用 jQuery 和 Bootstrap 在 WordPress 中添加进度条

公司国际化笔记

Bootstrap使用及环境搭建详解

移动端app开发，框架的选择。

jQuery格式化显示json数据

Webpack最佳实践

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐