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

Чтобы изменить конфигурацию веб-пакета и создать скрипты, вам нужно либо извлечь из приложения create-react-app (я бы не рекомендовал этот шаг, так как он нарушает будущую совместимость), либо вы можете использовать такие инструменты, как 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)

пакет.json

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

Поэтому, если вы действительно хотите выйти из приложения create-react-app, все, что вам нужно сделать, это запустить

npm run-script eject

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

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

если поможет не забудь отметить как ответ Здоровья и удачи

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

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

Кроме того, все параметры конфигурации сборки вашего приложения содержатся в вашем файле 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, вы можете попробовать модуль Реакция-приложение-перемонтировано.

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

Мне нужен был незапутанный код приложения React — в основном из любопытства, у меня был исходный код — при этом я должен был переписать его на Angular (создав гораздо более удобное в сопровождении приложение, 5% размера и 1% зависимостей).

Я никогда не использовал React, но обнаружил, изменив файл

<base_path>/node_modules/react-scripts/config/webpack.config.prod.js

и заменив большой элемент конфигурации оптимизации в module.exports следующим...

module.exports = {...

    optimization: {
            minimize: false,
            splitChunks: {
                chunks: 'all',
                name: true
            },
            runtimeChunk: true
        },

npm запустить сборку создал незапутанный, читаемый код, который работал, как и ожидалось, без каких-либо других модификаций. Использовал Gitbash только с командами установка нпм, npm запустить сборку и запуск нпм — просто подумал, что кому-то это может пригодиться.

Я не рекомендую это, потому что код, который вы хотите, все еще завернут в беспорядок eval webpack. Легче выбрать полезные фрагменты из исходного кода или просто перестроить приложение. В лучшем случае я увидел, что такое реакция кластера и веб-пакет.

Я знаю, что слишком поздно отвечать на этот вопрос, но попробуйте npm i -D cra-build-watch.

Я чувствую, что эта библиотека недооценена, но она просто следит за изменениями в реагирующем приложении и не пересобирает весь пакет снова и снова.

Хотя перемонтаж помогает в создании сборки, не минимизируя ее, тем не менее, он проходит весь процесс сборки снова и снова.

Файлы хранятся в памяти процесса сервера и не записываются на диск, если только вы не извлечете сценарии (или если возможно использовать такой инструмент, как «rewire») и не измените их для записи на диск с помощью параметра writeToDisk, как описано в документы Webpack DevServer.

Однако вы можете получить фактический список файлов/ссылки, перейдя к конечной точке webpack-dev-server под сервером.

Например, если вы используете URL-адрес по умолчанию на локальном хосте: 3000, используйте следующий URL-адрес, чтобы увидеть все файлы на сервере:

http://localhost:3000/webpack-dev-server

Но что вам действительно нужно, так это только index.html (который, как правило, представляет собой просто заглушку, которая загружает файлы JS) и 3 следующих файла JS, которые кажутся согласованными во всех частях create-react-app вместе с их соответствующим источником. файлы карты.

1. main.chunk.js
2. пакет.js
3. поставщики ~ main.chunk.js

Вы можете просто щелкнуть правой кнопкой мыши ссылки на странице и сохранить их, или вы можете перейти по прямой ссылке или получить их на вкладке «Источники» Chrome Dev Tools.

Обратите внимание, что обычно для изменений кода обновляется только файл main.chunk.js, поэтому для среднего изменения кода вы можете просто получить обновленные файлы main.chunk.js и main.chunk.js.map.