2

私は Webpack で VueJS を使用しており、この 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-tagsinput/dist/bootstrap-tagsinput.js'); ) に取り込むことができ、ベンダー ファイルに取り込むことができますが、実行されず、何も起こりません。

私は何を間違っていますか？import-loaderどういうわけか、またはシミングのものを使用する必要がありますか?まったく別のものですか?

4

1 に答える 1

3

わかりました、私はそれを働かせました。これが私がしたことです：

  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。

  1. 私のコンポーネントでは：

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

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

  }
}

ここで手動で適用する必要があることに注意してください.tagsInput()。これ.$watchは、要素が実際にページにレンダリングされることを確認することです。要素が必ずしも DOM に追加されているとは限らないため、.tagsinput()呼び出しを に直接入れただけでは起動しません。ready必要に応じて、 を使用してソリューションを装備することもできwindow.requestAnimationFrameます。

于 2016-07-02T20:37:16.570 に答える