jquery - 如何通过Webpack导入和使用jQuery库？

Question

我正在使用 VueJS 和 Webpack，并且我正在尝试使用 this jQuery tags input library 。鉴于其需求，我将 jQuery 纳入全局:

// in webpack.config.js
new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery",
  "jQuery.tagsinput": "bootstrap-tagsinput"
})

// in main JS
import jQuery from 'jquery';

这一切都有效，但问题是能够获取另一个库。我可以require它到主JS文件中(require('../node_modules/bootstrap-标签输入/dist/bootstrap-tagsinput.js');
)并将其放入我的 vendor 文件中，但它不执行并且什么也没有发生。

我做错了什么？我是否需要以某种方式使用import-loader，或者一些垫片的东西 - 完全是别的东西？

Answer 1

好的，我已经成功了。这是我所做的:

1. 在webpack.config.js中:

   plugins : [
    // ...
     new webpack.ProvidePlugin({
       $: "jquery",
       jQuery: "jquery",
       "window.jQuery": "jquery",
       "jQuery.tagsinput": "bootstrap-tagsinput"
     })
   ]
   

2. 在我的主 Javascript 文件中:

   // other imports, etc.
   require('imports?$=jquery!../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.js');
   

请注意，这需要使用imports-loader。

在我的组件中:

export default {
  // ...
  ready: function() {

      this.$watch('MY_MODEL', function(elt) {
          $('input[data-role=tagsinput]').tagsinput();
      });

  }
}

请注意，您需要在此处手动应用.tagsInput()。 .$watch 用于确保元素实际呈现在页面上。如果您只是将 .tagsinput() 调用直接放入 ready 中，它就不会触发，因为该元素不一定已添加到 DOM 中。如果需要，您还可以使用 window.requestAnimationFrame 构建解决方案。