simplify the life

基于 Webpack 引入 jquery 插件的笔记

如果都是基于 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 插件。

posted on 2017-11-05 17:40 韩子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News