Как создать производственную версию 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)

package.json

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

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

npm run-script eject

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

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

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

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

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

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

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

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

Мне нужен был необфусцированный код приложения 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 run build создает не запутанный, читаемый код, который работает, как ожидалось, без каких-либо других модификаций. Использовал Gitbash только с командами npm install, npm run build и npm start. Просто подумал, что кому-то это может пригодиться.

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

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

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

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

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

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

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

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

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

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

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

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