1

ブートストラップjsまたはその他のコンポーネントと連携してbrowserify-shimを適切に使用する方法を見つけようとしています。連結された JS ファイル全体を常に含めたいとは限らないため、モジュールを単一の shim に分割しました。これは私の package.json からの抜粋です。

"browserify": {
  "transform": ["browserify-shim"]
},
"browser": {
  "twbs-affix": "./node_modules/bootstrap/js/affix.js",
  "twbs-alert": "./node_modules/bootstrap/js/alert.js",
  "twbs-carousel": "./node_modules/bootstrap/js/carousel.js",
  "twbs-collapse": "./node_modules/bootstrap/js/collapse.js",
  "twbs-dropdown": "./node_modules/bootstrap/js/dropdown.js",
  "twbs-modal": "./node_modules/bootstrap/js/modal.js",
  "twbs-popover": "./node_modules/bootstrap/js/popover.js",
  "twbs-scrollspy": "./node_modules/bootstrap/js/scrollspy.js",
  "twbs-tab": "./node_modules/bootstrap/js/tab.js",
  "twbs-tooltip": "./node_modules/bootstrap/js/tooltip.js",
  "twbs-transition": "./node_modules/bootstrap/js/transition.js",
  "jquery": "./node_modules/jquery/dist/jquery.js"
},
"browserify-shim": {
  "jquery": "jQuery",
  "twbs-affix": {
    "depends": ["jquery"]
  },
  "twbs-alert": {
    "depends": ["jquery"]
  },
  "twbs-carousel": {
    "depends": ["jquery"]
  },
  "twbs-collapse": {
    "depends": ["jquery"]
  },
  "twbs-dropdown": {
    "depends": ["jquery"]
  },
  "twbs-modal": {
    "depends": ["jquery"]
  },
  "twbs-popover": {
    "depends": ["jquery"]
  },
  "twbs-scrollspy": {
    "depends": ["jquery"]
  },
  "twbs-tab": {
    "depends": ["jquery"]
  },
  "twbs-tooltip": {
    "depends": ["jquery"]
  },
  "twbs-transition": {
    "depends": ["jquery"]
  }
}

モジュールが必要な場合はtwbs-alert、 で含めることができますrequire('twbs-alert')。未使用のコンポーネントは縮小プロセス中に削除されるため、コンポーネントを分割することは本当に重要ではありませんか?

編集

ブートストラップの v4 はes6で完全に記述されているため、インポート ステートメントを介してモジュールをインポートできるため、shim アプローチは廃止されます。

4

1 に答える 1

1

未使用のコンポーネントは縮小プロセス中に削除されないため、アプローチは適切です。

あなたの質問に最もよく似ているのは、Lodash/Underscore から未使用のコンポーネントをインポートしないようにする方法です。これは、縮小中にそのままでは機能しません。Babel を使用している場合は、これらのライブラリで目的の結果を実現するプラグインがあります。

Bootstrap 用の同様の独自の Babel プラグインを作成することも 1 つのオプションです。

于 2016-02-11T16:16:58.857 に答える