Как исключить требование ('реагировать') из моего браузерного пакета?

Я использую Browserify для объединения приложения ReactJS.

Все мои компоненты включают require("react") вверху. Это приводит к тому, что Browserify включает исходный код ReactJS в мой пакет. Но хотелось бы исключить.

Как я могу это сделать? Правильно ли это?


reactjs javascript browserify
person André Pena    schedule 24.03.2015    source источник

Ответы (4)


arrow_upward
48
arrow_downward

@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.js — это просто реакция и ее зависимости.

Нужно больше внешних вещей? Просто добавьте их в дополнение к реакции.

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.

person Brigand    schedule 24.03.2015
comment
Я считаю, что в среднем блоке кода опечатка. Имя выходного файла для первого браузера должно быть dest.js, а не vendor.js, иначе второй браузер перезапишет первый. - person Baz; 08.12.2016
comment
Проблема в том, что browser — это просто преобразование, поэтому оно не применяется к вашим модулям node_modules. Поэтому, если у вас есть какие-либо библиотеки node_modules, которые ссылаются на реакцию, они выдадут ошибку «модули не найдены». - person bendytree; 10.11.2017

arrow_upward
6
arrow_downward

Похоже, вы хотите использовать browserify-shim.

В вашем package.json

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

(не проверено). В этом разделе содержится дополнительная информация.

person Andy Ray    schedule 24.03.2015
comment
См. также: stackoverflow .com/questions/23125338/ - person André Pena; 29.03.2015
comment
У меня много проблем с browserify-shim. У меня есть модуль umd, который я пытаюсь просмотреть в браузере, и он не меняет модули, требующие ('foo') вызовы global ['Foo'], хотя мой package.json указывает browserify-shim: { 'foo': ' глобальный: Фу' }. Нужно ли как-то нацеливать этот модуль? как browserify-shim: { 'мод': { зависит: foo }} - person dmarr; 28.08.2016

arrow_upward
2
arrow_downward

Я тоже хотел это сделать, и нашел возможное решение.

Из справки browserify -h:

--ignore, -i Заменить файл пустой заглушкой. Файлы могут быть глобусами.

Просто используйте функцию игнорировать.

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

Я также добавил react и react-dom в качестве одноранговых зависимостей, потому что в моем случае пакет можно импортировать в другие сборки пакетов.

person Gianluca Casati    schedule 04.03.2017

arrow_upward
-2
arrow_downward

Вы также можете использовать раздел externals в файле webpack.config.js. например:-

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

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

person dmdaniel    schedule 23.08.2017