web-dev-qa-db-ja.com

Browserifiedバンドルから「require（ 'react'）」を除外するにはどうすればよいですか？

Browserifyを使用してReactJSアプリケーションをバンドルしています。

すべてのコンポーネントの上部にrequire("react")が含まれています。これにより、BrowserifyがReactJSソースをバンドルに含めます。しかし、私はそれを除外したいと思います。

それ、どうやったら出来るの？これは正しいことですか？

javascriptreactjsbrowserify
19
André Pena

@NickTomlinがこの答えを出しましたが、それを削除しました。

external を使用できます：

browserify --external react src.js > dest.js

APIを使用した例：

var bundler = browserify('src.js');

bundler.external('react');
bundler.bundle();

これは実行可能なオプションです。 externalには、互換性のある方法でモジュールを提供する別のスクリプトが必要です。次のようなスクリプトを作成できます。

browserify -r react > react.js
env NODE_ENV=production browserify -r react | uglifyjs -m > react.min.js

そしてHTMLでは：

<script src="react.js"></script>
<script src="dest.js"></script>

dest.jsは、react以外のコードです。 react.jsはreactとその依存関係です。

外部のものがもっと必要ですか？反応させるためにそれらを追加するだけです。

browserify -x react -x react-bootstrap src.js > dest.js
browserify -r react -r react-bootstrap > vendor.js

あなたはpackage.jsonでこのようなことをすることもできます

"browser": {"react": "./react-fake.js"}

// ./react-fake.js
try {
    module.exports = require('react');
} catch(e){
    module.exports = window.React;
}

そして-x reactでコンパイルします。これにより、-r reactビルドを受け入れ、グローバルReactにフォールバックできます。

47
Brigand

browserify-shim を使用したいようです。

あなたのpackage.json

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

（テストされていません）。 このセクション に詳細があります。

6
Andy Ray

私もこれをやりたかったし、可能な解決策を見つけました。

から browserify -h 助けて：

--ignore、-iファイルを空のスタブで置き換えます。ファイルはグロブにすることができます。

ignore機能を使用するだけです。

browserify -i react -i react-dom ...

また、reactとreact-domをピアの依存関係として追加しました。私の場合、パッケージを他のパッケージビルドにインポートできるためです。

2
Gianluca Casati