课程结束后自己练习时使用插件ztree-for-react时遇到jQuery的引用问题

Question

老师因为使用antd中Tree组件的限制我想使用zTree,然后找到了插件ztree-for-reac，我按照这里的说明https://github.com/arixse/ztree-for-react#ztree-for-react     使用插件ztree-for-react时报错jQuery is not defined,然后我又按照issue里面的一些解答修改没有成功，也按照这里https://webpack.js.org/loaders/exposeader/#usage修改过还是失败。。。。-lo

Answer 1

提问者 qq_小江南_04298178 2018-04-08 10:00:42

老师ztree-for-react的开发者给我回了消息让我把 jquery版本从3.3.1换成2.2.1，之后就不报jQuery未定义的错了

Answer 2

提问者 qq_小江南_04298178 2018-04-08 09:35:17

目前我的jQuery引入方法：package.json中—>  "jquery": "^3.3.1","expose-loader": "^0.7.5",  "ztree-for-react": "^0.1.5"

webpack.config.js中关于jQuery的配置我试过下面两种方法都不成功：

  module: {

    loaders: [

      {

        test: /\.js?$/,

        exclude: /(node_modules)/,

        loader: 'babel-loader',

        query: {

          presets: ['react', 'es2015'],

          plugins: ['react-html-attrs'], //添加组件的插件配置

        }

      },

      //下面是使用 ant-design 的配置文件

      { test: /\.css$/, loader: 'style-loader!css-loader' },

      // jQuery配置方法一：    

      // { test:require.resolve('jquery'),loader:'expose?jQuery!expose?$'}

    ],

    //  jQuery配置方法2

    // rules: [{

    //       test: require.resolve('jquery'),

    //       use: [{

    //           loader: 'expose-loader',

    //           options: 'jQuery'

    //       },{

    //           loader: 'expose-loader',

    //           options: '$'

    //       }]

    //   }]

   },

然后后续操作就不是很确定了

• Parry #1

  https://segmentfault.com/a/1190000012113011

Answer 3

Parry 2018-04-04 16:08:21

你目前怎么配置 jQuery 引用的？html 外部引入？

• 提问者 qq_小江南_04298178 #1

  用的expose-loader实现的，我用的版本是0.7.5，下载jQuery包之后在webpack.config.js中做了相关配置如下{
  test: require.resolve('jquery'),
  loader: 'expose-loader?jQuery!expose-loader?$'
  }，就好了，然后在想使用jQuery的地方import $ from 'jquery'就好了