Jak wykluczyć "require (" react ")" z mojego pakietu Browserified?

Question

Używam Browserify do pakowania aplikacji ReactJS.

Wszystkie moje komponenty obejmują require("react") u góry. Powoduje to, że Browserify zawiera źródło ReactJS w moim pakiecie. Ale chciałbym to wykluczyć.

Jak to zrobić? Czy to jest właściwe?

Answer 1

@NickTomlin podał tę odpowiedź, ale następnie ją usunął.

---

Można użyć external:

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

Przykładem używając API:

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

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

---

ten jest realną opcją. external wymaga innego skryptu, aby zapewnić moduł w kompatybilny sposób. Można produkować taki skrypt tak:

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

I w HTML:

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

dest.js jest kod wyjątkiem reagować. react.js po prostu reaguje i jego zależności.

Potrzebujesz więcej rzeczy na zewnątrz? Po prostu dodaj je i reaguj.

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

Można też zrobić coś takiego w package.json

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

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

i skompilować z -x react. Pozwala to na zaakceptowanie kompilacji -r react i powrót do globalnego Reaktu.

Answer 2

Wygląda na to, że chcesz użyć browserify-shim.

w twojej package.json

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

(niesprawdzone). This section ma więcej informacji.

Answer 3

Chciałem również to zrobić i znalazłem możliwe rozwiązanie.

Z pomocą browserify -h:

--ignore, -i zastąpić plik z pustym odgałęzienie. Pliki mogą być globs.

Po prostu użyj funkcji ignore.

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

Dodałem też reagować i reagować-DOM jako wzajemnych zależności, przyczyny w moim przypadku, pakiet może zostać przywiezione w innych pakietach buduje.

Answer 4

Można również użyć sekcji externals w pliku webpack.config.js. np: -

externals: { 
     // require('jquery') is loaded externally and avaliable as jQuery 
     "jquery": "jQuery" 
    } 

Zobacz https://webpack.github.io/docs/library-and-externals.html