使用 Webpack 时与 JQuery 库冲突

Question

所以我有一个叫做表单渲染器的 JS，我发出 AJAX 请求来获取它，它会自动将一些功能和属性应用于 jQuery，以便按照我想要的方式渲染表单。但是因为我将 webpack 与另一个框架一起使用，它有两个 jQuery 上下文......所以，它将函数和属性应用于正确的 jQuery，当它应该从 webpack 内部的 jQuery 调用函数时，它会调用错误的 jQuery使用 $。如果做的话用控制台

window.$.fn.metaform

它获得了正确的功能，但是如果在 webpack 内部使用它就不起作用...它创建了一个 webpack 提供的窗口并且它不起作用。

这是错误：

jQuery.Deferred 异常：__webpack_provided_window_dot_$.fn 不是函数类型错误：__webpack_provided_window_dot_$.fn 不是函数

 buildForm() {

    ajax.getFormRenderer().then(() => {
      this.renderForm();
    });
  }

  renderForm() {

    if(formJSON != undefined) {
      $('#form').metaform('render', { form: formJSON, strings: { DEFAULT_SELECT: "Select...", SCRIPT_ERROR: "Error" } });
    }
  }

我该怎么办？有没有办法使用我想要的jQuery？

这是我的 webpack 配置

var webpack = require('webpack');
var path = require('path');

var isProductionEnv = process.env.NODE_ENV === 'production';
var ENV = isProductionEnv ? 'PRODUCTION' : 'DEVELOPMENT';

console.log(ENV + ' ENV');

function getPlugins() {
  var plugins = [];

  plugins.push(new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.$': 'jquery',
    'window.jQuery': 'jquery'
  }));

  if (isProductionEnv) {
    plugins.push(new webpack.optimize.UglifyJsPlugin());
  }

  return plugins;
}

module.exports = {
  entry: {
    main:  path.resolve(__dirname, 'js/main.js'),
    indicators:  path.resolve(__dirname,'js/indicators/main.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist/'),
    filename: '[name].bundle.js'
  },
  resolve: {
    //root: path.resolve(__dirname),
    alias: {
      app:  path.resolve(__dirname, 'js'),
      views:  path.resolve(__dirname, 'js/views'),
      utils:  path.resolve(__dirname, 'js/utils'),
      libs:  path.resolve(__dirname, 'libs/js'),
      components:  path.resolve(__dirname, 'js/components')
    },
  },
  plugins: getPlugins(),
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.html$/,
        loader: 'html-loader',
      },
    ]
  }
}

Answer 1

我认为这个链接可以帮助你。 jQuery.noConflict。

引用：

许多 JavaScript 库使用 $ 作为函数或变量名，就像 jQuery 一样。在 jQuery 的例子中，$ 只是 jQuery 的别名，所以所有功能都可以在不使用 $ 的情况下使用。如果您需要与 jQuery 一起使用另一个 JavaScript 库，请通过调用 $.noConflict() 将 $ 的控制权返回给另一个库。 $ 的旧引用在 jQuery 初始化期间被保存； noConflict() 只是恢复它们。