【webpack】expose-loader 插件使用
来源:互联网 发布:淘宝天猫8折代购原理 编辑:程序博客网 时间:2024/06/06 00:00
如何使用expose-loader 解决第三方库的插件依赖问题
expose 寓意为:暴露,就是为了解决一些插件不支持commonJs引入的问题(如:bootstrap.js,它只允许jQuery暴露为全局变量才可用)
这是bootstrap源码的开头。
if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript requires jQuery') }
经过一系列的搜索之后,得到了一些答案,有的说可以在webpack配置 externals
属性。如下:
module.exports = { // ... externals: { jquery: 'jQuery' } // ...};
然后再代码中使用 var jquery = require('jquery');
对静态文件使用script全局包含.
当然我们可以同时引入其它插件。
<script src='jquery.js'></script><script src='bootstrap.js'></script>
但这样并不是我们想要的最终目的。 我们想要用require 把 js库 引入进来,最后讲它们进行编译。expose-loader
给我们了这样的功能。
安装 node模块 npm install jquery --save
npm install bootstrap --save
安装 expose-loader
npm install expose-loader --save-dev
修改 webpack.config.js
module.exports = { loaders: [{ // 得到jquery模块的绝对路径 test: require.resolve('jquery'), // 将jquery绑定为window.jQuery loader: 'expose?jQuery' }]};
ps : 如果想要让一个模块有多个注入全局变量,那么需要以下配置
module.exports = { loaders: [{ // 得到jquery模块的绝对路径 test: require.resolve('jquery'), // 将jquery绑定为window.jQuery 和 window.$ loader: 'expose?jQuery!expose?$' }]};
最后在main.js 使用
var jquery = require('jquery'); // 插件注入jquery require('bootstrap');
如果在 js中使用expose加载器
// 这里 jquery 作为模块名 ,jQuery为输出变量名 var jquery = require("expose?jQuery!jquery");
0 0
- 【webpack】expose-loader 插件使用
- webpack构建VUE项目使用jquery及其插件 expose-loader
- webpack:使用expose-loader 解决第三方库的插件依赖问题
- Webpack载入loader,imports-loader,exports-loader,expose-loader
- webpack使用--loader和插件
- webpack中imports-loader,exports-loader,expose-loader的区别
- webpack 插件 svg-sprite-loader
- webpack使用css-loader,style-loader注意
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(上)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(中)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下)
- WebPack安装-使用-Loader-配置-插件-环境-排错详解(下扩展)
- webpack 使用插件
- WebPack Loader
- webpack loader
- webpack loader
- webpack loader
- webpack-使用babel-loader转化ES6代码
- Nmap常用使用方法
- footable ajax 翻页后没有样式的问题.版本为V2
- smarty总结
- pendingIntent详解
- json的使用
- 【webpack】expose-loader 插件使用
- POJ 2299 Ultra-QuickSort
- 华为oj 删除字符串中出现次数最少的字符
- Entity Framework 6源码学习(一)
- 主人公惺惺著
- OC中data与date
- jQuery datatable 多个查询条件
- 面向对象
- 一个计时器