如果都是基于 webpack(npm 上有包),那就非常顺利:

import $ from 'jquery'
import 'jquery-modal/jquery.modal.min.css'
import 'jquery-modal/jquery.modal.min.js'

$('body').append('<form id="myModal" class="modal"></from>')
$('#myModal').html('this is a modal')
$('#myModal').modal()

这个时候的 html 文件引入打包结果即可:

<html>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

但是,有时候 jquery 可能只有一个 cdn 地址,可以这样处理。

将 jquery 和 jquery 插件都通过 cdn 引入,js 中继续写逻辑。

html 页面大概这样:

<html>
  <body>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.js"></script>
    <link href="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.css" rel="stylesheet">
    <script src="bundle.js"></script>
  </body>
</html>

逻辑 js 文件:

$('body').append('<form id="myModal" class="modal"></from>')
$('#myModal').html('this is a modal')
$('#myModal').modal()

这样不太优雅,我们希望能不用外链的尽量不用外链,比如 jquery 希望能自己打包。

将 webpack 配置文件作如下处理:

entry: {
  'bundle': './js/index.js',
  'jquery': ["jquery"],
},
output: {
  filename: '[name].js'
},

即新增单独打包了 jquery.js 文件。

html 文件如下:

<html>
  <body>
    <script src="./jquery.js"></script>
    <script src="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.js"></script>
    <link href="//cdn.bootcss.com/jquery-modal/0.8.2/jquery.modal.min.css" rel="stylesheet">
    <script src="bundle.js"></script>
  </body>
</html>

报错:

jquery.modal.min.js:5 Uncaught ReferenceError: jQuery is not defined
bundle.js:9535 Uncaught ReferenceError: $ is not defined

jquery 插件和打包后的 bundle.js 都需要用到 $,但是找不到。很显然,我们需要将打包的 jquery 暴露给全局,expose-loader 可以做到。

module: {
  rules: [
    {
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      },{
        loader: 'expose-loader',
        options: '$'
      }]
    }
},

要注意的是,这个 loader 最好写在最前面。

另外,之前 有用 DllPlugin 分离库文件和其他文件,但是貌似用 DllPlugin 分离的库文件只能用于其他文件中,而不能用于外链引入的文件。比如我想用 webpack.dll.config.js 搭配 expose-loader 分离 jquery 文件,但是这个分离的文件并不能用于外链引入的 jquery 插件。

基于 Webpack 引入 jquery 插件的笔记的更多相关文章

  1. 在Web工程中引入Jquery插件报错解决方案

    在学习Jquery插件的时候,遇到一个问题就是新建web工程后在WebRoot下引入Jquery插件的时候报错,不知道为什么好纠结,但是项目能正常运行,后来找到解决方案,在这里给大家分享一下. 解决方 ...

  2. webpack 引入jquery和第三方jquery插件

    1.引入jquery jQuery 直接在 html 中引入,然后在 webpack 中把它配置为全局即可. index.html: <!DOCTYPE html> <html> ...

  3. 基于 Webpack 引入公共库的几种方式

    以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...

  4. vue引入jquery插件

    在vue中使用jquery插件 1.引入jquery 第一种方法:全局引入jquery 在webpack.base.conf.js,新增以下代码 plugins: [ new webpack.opti ...

  5. vue-cli webpack 引入jquery

    首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后install 在webpack.base.conf. ...

  6. Vue中引入jquery方法 vue-cli webpack 引入jquery

    在vue-cli 生成的工程中引入了jquery(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2 ...

  7. vue+webpack 引入jquery

    1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...

  8. webpack引入jQuery

    1. 本地文件引入 配置 const webpack=require('webpack'); module.exports={ resolve:{ alias:{ //绝对路径 jQuery:path ...

  9. 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]

    1.表单验证插件Validation   2.表单插件Form   3.动态事件绑定插件livequery 可以为后来的元素绑定事件   类似于jQuery中的live()方法     4.jQuer ...

随机推荐

  1. 安卓开发笔记——自定义广告轮播Banner(实现无限循环)

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  2. java入门第二步之helloworld【转】

    前一篇博客已经介绍了jdk的安装:接下来我们就乘热打铁,完成第一个程序:helloworld(每学一样程序的新东西都是从实现helloworld开始的) 1.不是用开发工具IDE,只是使用记事本来实现 ...

  3. 【搬运】【备份】imrc文件

    存档. " ============================================================================= " < ...

  4. 每天一条linux命令——crontab

    crontab命令被用来提交和管理用户的需要周期性执行的任务,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,crond进程每分钟会定期检查 ...

  5. [lua]尝试一种Case语法糖

    function CaseT(arg) function proxy(caller) caller.yield(r) end -- proxy return function (cond) if (c ...

  6. android中使用surfaceview+MediaPlayer播放视频

    Android中播放视频主要有两种方式: 使用其自带的播放器.指定Action为ACTION_VIEW,Data为Uri,Type为其MIME类型 使用android自带的VideoView,这种方法 ...

  7. C#开发中遇到问题常问题

    1.C# decimal 赋值null decimal?是可空类型就是可以将值设置为Null,decimal 不能设置为null 2.var 定义变量 VAR 是3.5新出的一个定义变量的类型其实也就 ...

  8. gbs build使用说明

    注:本文从:https://source.tizen.org/documentation/articles/gbs-build 翻译而来. 1 前言 通过使用gbs build指令,开发者可以在本地编 ...

  9. cobbler 奇葩出错

    写此随笔,只是为了记录我安装cobbler遇到的奇怪问题,虽然这个问题很让我无语,但是竟然折腾了我一天.废话不多说,入题: 一如既往的按照以前的安装方式安装cobbler,不会出错的地方我就一带而过了 ...

  10. Mysql加锁过程详解(1)-基本知识

    Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...