vue中使用jquery失败， 引入jquery可以使用，但是引入jquery的插件

Question

vue中使用jquery失败， 引入jquery可以使用，但是引入jquery的插件，显示没有定义，我的思路是既然不支持import引入，能不能更改下源码使他支持模块化

Answer 1

我遇到了和楼主遇到了同样的问题，我是引用jquery的第三方插件jquery.mockjax.js，然后在main.js中调用require('./assets/jquery.mockjax.js')，出现$此时是undefined。

我是这样解决的：
通过npm install的方式去安装的jquery-mockjax，此时发现可以用了，$也有定义了。

然后我尝试了找了一下两者的不同：
首先通过npm install安装的jquery-mockjax 的源码和我之前直接引入的js文件是相同的。

(function(root, factory) {

    'use strict';

    console.log(arguments);

    console.log('root', root);

    // AMDJS module definition

    if ( typeof define === 'function' && define.amd && define.amd.jQuery ) {

        console.log('this is in amdjs module definition');

        define(['jquery'], function($) {

            return factory($, root);

        });

    // CommonJS module definition

    } else if ( typeof exports === 'object' && module.exports) {

        console.log('this is CommonJs module definition');

        // NOTE: To use Mockjax as a Node module you MUST provide the factory with

        // a valid version of jQuery and a window object (the global scope):

        // var mockjax = require('jquery.mockjax')(jQuery, window);

        module.exports = factory;

    // Global jQuery in web browsers

    } else {

        console.log('this is global jquery in web browsers');

        return factory(root.jQuery || root.$, root);

    }

}(this, function($, window) {

    'use strict';

这是源码部分，采用UMD的方式。

方式一：
通过require('./assets/jquery.mockjax.js')的方式去引入该文件，webpack编译后的代码是直接进入第三个判断分支进行判断，直接调用了该工厂函数，webpack在处理的时候this传入的是modules.exports对象，此时module.exports对象是找不到jquery的，因此报错。尝试将源码中的this改为global后，是可以解决的。网上也提供了不修改源码，通过imports-loader的方式将this赋值为window。require('import-loader?this=>window!./assets/jquery.mockjax.js')
方式二：
通过require('jquery-mockjax')的方式引入，webpack编译后的文件直接进入第二个分支，通过阅读编译后的文件发现webpack直接将第二个分支的判断条件置为了true，也就是默认Commonjs的引入方式，这也就解释了这种方式为什么不会报错的原因。

通过我的这个实例，希望能够给楼主一些提示。如果楼主的jquery第三方插件也是UMD格式的，很有可能和我遇到的是一个错误。

但是一直有个疑问，webpack对npm包的编译和直接引入的js文件编译为什么会不同，官方文档中哪里解释了这一部分，一直没找到。也希望楼上的大神给予解答。