Как собрать рабочую версию React без минификации?

Question

Справочная информация

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

Теперь, если я запускаю npm run build, я получаю минимизированную версию всего в папке build.Однако, если я запускаю npm start, то версия, которую обслуживает NodeJS, похоже, не имеет каких-либо изменений.Но я не вижу этих файлов.

Вопрос

Так что либо:

• Могу ли я получить доступ к файлам, сгенерированным npm start где-нибудь?Поскольку они кажутся неизмененными.(build там никогда не изменяется)
• Или я могу каким-то образом запустить npm run build, поэтому он выполняет сборку "разработка" с не минимизированными файлами?

Пытается

Моя цель - просто получить доступ к не минимизированной версии сценариев реагирования .

Что касается последнего вопроса, я попробовал некоторые параметры и переменные среды, как предложено в этомвопрос , но, как вы видите, не удалось:

$ NODE_ENV=dev npm run build --dev --configuration=dev

> example-project@0.1.0 build [...]
> react-scripts build

Creating an optimized production build...
[...]

Система

Мой package.json имеет сценарии по умолчанию:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

---

Примечание: Пожалуйста, не спрашивайте, почему я это делаю, и не пытайтесь убедить меня, что это плохо.Есть много причин, по которым я бы хотел этого, например, отладка или этот конкретный вариант использования .

Answer 1

Чтобы изменить конфигурацию веб-пакета и сценарии сборки, вы должны либо извлечь его из create-реакции-приложения (я бы не рекомендовал этот шаг, так как он нарушает совместимость в будущем), либо вы можете использовать такие инструменты, как rewire, чтобы переопределить некоторые настройки

Взгляни на это https://github.com/timarney/react-app-rewired

Я лично использовал только переподключи

npm i rewire --save-dev

Вот пример конфигурации, который я создал для одного из моих проектов в прошлом, и он работал довольно хорошо!

1. Создать build.js
2. Измените ваш package.json, чтобы он выполнял build.js

build.js

const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename = '[name].js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = '[name].css';
config.plugins[5].options.publicPath = '../';

Затем в моем package.json я изменил ссылки на скрипт npm, как это (сборка узла, которая будет запускать скрипт build.js)

package.json

"scripts": {
    "start": "react-scripts start",
    "build": "node build && gulp",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Так что, если вы действительно хотите извлечь из create-реагировать-приложение, все, что вам нужно сделать, это запустить

npm run-script eject

Затем вы получите новую папку со всеми конфигами, используемыми create-реагировать-приложение

Но, как я уже говорил, нет причин, почему бы не использовать rewire и просто переопределить конфигурацию вместо извлечения

если это поможет, пожалуйста, не забудьте пометить как ответ Ура и хорошего успеха

Answer 2

Почему вы не видите исходные файлы?Вот что я хотел бы попробовать:

1. Запустите приложение реакции с помощью npm run start
2. Откройте браузер, чтобы http://localhost:3000
3. Открыть Инструменты разработчика ипроверить созданные пакетированные пакеты на сервере webpack-dev .В Chrome на Mac вы можете сделать следующее: cmd+option+j откроет инструменты разработчика.Затем перейдите на вкладку sources : на этой вкладке вы увидите ее комплекты, созданные конфигурацией сборки реагирования .Теперь выходные данные этих пакетов могут быть не очень красивыми, но они все есть.

Кроме того, все параметры конфигурации сборки вашего приложения содержатся в вашем файле webpack.config.js, даже если вы используете create-react-app.Поскольку эта конфигурация просто инкапсулирована в модуле узла react-scripts .Поэтому, возможно, вы могли бы попытаться редактировать этот файл напрямую, без извлечения: <base_path>/node_modules/react-scripts/config/webpack.config.js.Хотя вы должны быть осторожны, чтобы не нарушить существующий параметр конфигурации.Возможно, вы захотите возиться с настройками source-map для производственных сборок.По крайней мере, таким образом, если вы испортите этот файл, вы всегда можете просто удалить и переустановить react-scripts и вернуться к исходной конфигурации.Это также позволит вам поиграть с вашими настройками в «полу-безопасной» изолированной среде.Помните, что нет никакой магии, которую обеспечивает create-react-app, а просто делает полезными значениями по умолчанию для вашей конфигурации сборки.

Наконец, как указал @xzesstence, вы можете попробовать ответный-перемонтированный модуль .

Надеюсь, это поможет!