通过expose-loader将jquery导入到vuejs2项目中

Question

我使用最新的vue-cli创建了一个vuejs2项目，并尝试使用expose-loader将jQuery导入到项目中，我想我遵循official readme中的指令但没有运气。

我做了什么：

• 通过npm
安装jquery和expose-loader
• 在build/webpack.base.conf.js
中插入以下行

但是当我在Chrome devtool的控制台中键入console.log(window.jQuery)时，我仍然未定义。

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

我错过了什么？

Answer 1

您可以使用ProviderPlugin

在没有expose-loader的情况下进行尝试

1. npm install jquery --save

2. 现在位于 build / webpack.base.conf.js

   module.exports = { 
       plugins: [ 
           new webpack.ProvidePlugin({ 
               $: 'jquery', 
               jQuery: 'jquery',
               'window.jQuery': 'jquery'
           }) 
       ]
       //..
   } 
   

Answer 2

要在我的应用程序中执行此操作，我会直接在import语句中使我的入口点文件更明确：

import 'expose-loader?$!expose-loader?jQuery!jquery';

这通过expose-loader插件将jquery公开给$和jQuery变量。