スクリプトを含む<script src>のBrowserifyバンドル/モジュールスクリプトを混在させることはできますか？

Question

私は後期にBrowserifyを採用しているプロジェクトに取り組んでいます。

多くのReactコンポーネントは、それらの依存関係とともに、必要な場所に<script>というタグが付いています。これには、一般的なReactコンポーネントを含む少数のファイルも含まれます。

<!-- includes ComponentA and dependencies, including React --> 
<script src="/js/browserify-bundle.js"></script> 

<script src="/js/react.min.js"></script> <!-- React included here too --> 
<script src="/js/react-dom.min.js"></script> 
<!-- ...more dependencies... --> 
<script src="/js/common-components.js"></script> 
<!-- ...more components/script includes... --> 

私はES6モジュールとして書かれている最初のReactコンポーネントに取り組んでいますが、私たちの状況のた​​めに、モジュールの依存関係は2回ロードされてしまいます。まずscriptタグで指定された手動の依存関係から取得し、次にBrowserifyバンドルから取得します。

Reactを含むスクリプトタグを削除すると、共通のコンポーネントが中断されますが、その中に残されます。React duplication errors like thisそこには2つのReactが浮遊しているためです。

これは、（例えば）手動のReactインクルードを使用するようにBrowserifyに指示することで、このギャップを一時的にブリッジする方法がないということですか？これで、Browserifyを少しずつ使用することができました。すべてのコンポーネント/スクリプトをES6モジュールにして、これを避けるためにすべてのものをBrowserifyで使用することが絶対必要ですか？

Answer 1

場合によってはbrowserify-shimを使用することができます。 は、モジュールがすでにグローバルスコープから利用可能であることを宣言することができます。あなたのpackage.jsonで

：

"browserify-shim": { 
    "react": "global:React" 
}, 
"browserify": { 
    "transform": [ "browserify-shim" ] 
} 

うまくいけば、あなたは今のギャップを埋めることができます。