Question

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

window.$.fn.metaform

它具有正确的功能，但是如果在webpack内使用它将无法正常工作...它会创建webpack提供的窗口，并且无法正常工作。

这是错误：

jQuery.Deferred异常：__webpack_provided_window_dot _ $。fn不是函数TypeError：__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（）只是还原它们。

使用Webpack时与JQuery库冲突

1 个答案: