webpack进阶教程（二）——webpack引入jquery多种方法探究

2024年1月23日 198次阅读 来源: 秋水易寒

对于webapck的初学者来讲，最受挫的就是引入jQuery及jQuery插件时，总是会遇到各种问题。在网上一搜，总能发现多种解决方案，什么externals，providePlugin，vendor,export-loader等等。我们搞不清楚，为什么会有那么多的引用方法，我只是想引用一个jQuery插件而已。其实，webpack引用jQuery困难，是因为jQuery插件众多，有的插件提供了模块化支持，比如支持UMD，有的则没有支持模块化，直接引用全局的jQuery或window.jQuery。下面，我们来分几中情况，来讨论一下webpack引入jQuery的几种方法和它们的区别，来方便大家在实际项目中取舍。

1.cdn引用jQuery

网上很多问，”怎样在webpack里全局引用jQuery“。我对”全局引用”的理解，就是把jQuery暴露到全局（浏览器是window）。虽然把jQuery暴露到全局是不推荐的，但是很多插件，尤其早期的插件，是依赖全局的jQuery变量的。cdn引用jQuery，大多是全局的引用。我们来看个例子
注：以下例子源码在github上，可通过相应的链接打开，clone下来后，可以直接运行webpack-dev-server看效果，我的webpack和webpack-dev-server是全局安装，你的如果不是全局安装，运行前请自行安装）。

例子源代码，可以点击这里

jqGreen.js

//没有模块化
(function($){
    $.fn.green = function(){
        $(this).each(function(){
            $(this).css('color','green');
        })
    }
})(jQuery);

index.js

require('./jqGreen');
$('#green').green();

index.html

<!DOCTYPE html>
<html>
<head>
    <title>webpack引入jQuery（一）</title>
</head>
<body>
<div id="green">该段文字应该为绿色</div>
<script src='http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
</body>
</html>

webpack.config.js

var htmlPlugin = require('html-webpack-plugin');
module.exports = {
    entry:{
        index:'./src/index.js'
    },
    output:{
        path:'builds',
        filename:'[name].js',
        chunkFilename:'chunk.[name].js'
    },
    plugins:[
        new htmlPlugin({
            filename:__dirname+'/builds/index.html',
            template:'./index.html'
        })
    ],
    devServer:{
        contentBase:'./builds',
        inline:true
    }
}

jqGreen.js是一个简单的插件，功能是把选中的元素的color属性设置为green。我们在index.js引用了这个插件。需要重点说明的是，jqGreen这个插件，没有采用任何模块化的方案，很多早期的jQuery插件都是这种写法。上面的例子，没有用externals，但是也能正常跑起来。关键就是这个插件jqGreen没有任何模块化方案。

我们运行webpack命令，编译后的文件输出到builds文件下，再运行webpack-dev-server，程序是可以直接跑起来的。我例子里的代码是编译过的，大家clone下来后，可以直接在命令行运行webpack-dev-server把demo跑起来，然后打开http://localhost:8080查看效果。

结论：如果jquery插件没有采用任何模块化方案，直接引用cdn上的jQuery，然后正常引用插件并打包就可以正常使用。

那么，如果我的jQuery插件，有模块化方案呢？
我们来改一下上面的jqGreen.js

//UMD模块方案
(function(window,factory){
    if(typeof exports === 'object'){
        module.exports = factory(require('jquery'));
    }else if(typeof define === 'function' && define.amd){
        define(['jquery'],factory);
    }else{
        factor();
    }
})(window,function($){
    $.fn.green = function(){
        $(this).each(function(){
            $(this).css('color','green');
        });
    }
});

注意，这个时候，我们的jQuery插件采用了UMD模块化的方案。大家可以直接把jqGreen改成上面的这种UMD形式但不修改webpack.config.js文件。在example1运行webpack命令，会报错，会提示找不到jquery。我们查看builds文件夹下面的index.js文件时候，会发现
if(typeof exports === 'object')被webpack替换成了if(true)，就是说，webpack编译后的代码，会执行module.exports = factory(require('jquery'));这段代码。注意这里面的require('jquery')，我们并没有在本地安装jquery(没有npm install jquery --save-dev)，而是引用的cdn上的jquery，所以，require('jquery')是找不到’jquery’的，因为他不知道我们是引用cdn上的jquery。那么，怎么才能让webpack不报错，能争取引用呢？答案是externals。

externals引用’jquery’

我们只需要在webpack.config.js文件里添加

externals:{
        'jquery':'window.jQuery'
    }

大家可以看我的例子源码，例子是可以直接跑起来的。
上面的externals配置，告诉webpack，在编译时，看到require(‘jquery’)，就把它替换成window.jQuery。这样，就实现了引用全局上的jQuery，我们的例子，也能正常跑起来啦。
这里多说一下，对于刚才我们的第一个例子，就是没有采用任何模块化方案的例子，用externals配置也是可以的，那样externals什么也不会做，但是程序也能跑起来。

总之，如果要全局引用jQuery，不管你的jQuery有没有支持模块化，用externals就对了。

.IgnorePlugin引用jQuery

IgnorePlugin的示例代码
IgnorePlugin和cnd引用jQuery，都是引用的未处理的jquery源码文件。cdn上的jquery是没法打包（除非下载下来），而本地的jquerywebpack默认会对其打包，所以要用IgnorePlugin来告诉webpack不要打包。所以这种引用方式，也需要用externals来暴露全局变量，大家通过上面贴出来的链接，看看示例代码就ok。

注意，我们上面的例子，都是不对jquery打包的，所以页面上的jquery.js都是一个单独的文件。webpack当然也能把jquery打包在内，那样就会用到CommonChunks、vendor等等，下次再聊那种情况。

    原文作者：秋水易寒
    原文地址: https://segmentfault.com/a/1190000007249293
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞