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

Question

我用最新的 vue-cli 创建了一个 vuejs2 项目，并尝试使用expose-loader 将 jQuery 导入到项目中，我想我按照official readme 中的说明进行操作，但没有成功。

我做了什么：

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

但是当我在 Chrome 开发工具的控制台中输入 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

您可以尝试不使用expose-loader，使用ProviderPlugin

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';

这会将 jquery 通过expose-loader 插件暴露给$ 和jQuery 变量。