如何在ES6的webpack中包含jQuery之前的jQuery？

Question

我试过这个：

import $ from 'jquery';
window.jQuery = $;
import angular from 'angular';

但$ .fn.scope未定义，ng-bind-html中的脚本不起作用使用ngBindHtml注入脚本标记

也在webpack配置中试过这个

module.exports = {
  module: {
    loaders: [
       { test: /angular(\.min)?\.js$/, loader: "imports?$=jquery" },
       { test: /jquery(\.min)?\.js$/, loader: 'expose?jQuery' }
    ]
  }
};

但得到了错误：

ERROR in ./~/angular/angular.js
Module not found: Error: Cannot resolve module 'expose' in C:\project\src\ui\node_modules\angular
 @ ./~/angular/angular.js 2:8-25

Answer 1

这项工作：

module.exports = {
  module: {
    loaders: [
       { test: /angular(\.min)?\.js$/, loader: "imports?$=jquery" },
       { test: /jquery(\.min)?\.js$/, loader: 'expose?jQuery' }
    ]
  }
};

但你需要从npm安装expose-loader ：

npm install expose-loader --save

Answer 2

为什么不为webpack使用一个非常漂亮和简单的插件

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery"
})

ES6种子与webpack和jquery

Answer 3

我们在webpack 4中使用了@jcubic解决方案，如下所示：

npm install expose-loader imports-loader --save

module: {
  rules: [
    {
      test: require.resolve('angular'),
      use: 'imports-loader?$=jquery',
    },
    {
      test: require.resolve('jquery'),
      use: [
        {
          loader: 'expose-loader',
          options: 'jQuery',
        },
        {
          loader: 'expose-loader',
          options: '$',
        },
      ],
    },
  ]
}