Как собрать приложение на React в минимальное количество файлов для импорта в Dynamics 365?

Question

[vorobey33rus]

Доброго времени суток!
Используя create-react-app наткнулся на проблему: по умолчанию проект билдится в виде чанков и карт. Структура примерно следующая:
В папке build находится папка static, в которую вложены папка js и css с соответствующими чанками и картами для них, а также index.html и иже с ним.

Однако, мне требуется импортировать приложение в экосистему dynamics 365, которая не подразумевает тип файла map.
Кроме того, как бы я ни пробовал, приложение все равно не работает.
Итак, вопрос следующий - можно ли без переноса и диких танцев с бубном собрать все это в минимальное количество файлов так, чтобы приложение корректно запускалось?
Приложение небольшое и загружаться должно практически мгновенно.
Если есть какой-то хитрый способ импортировать файлы с чанками в dynamics, расскажите, пожалуйста, о нем.

Answer 1

[vorobey33rus]

Решение есть!
Добавляем в нпм или ярн:

yarn add html-webpack-plugin@4.0.0-beta.4
yarn add html-webpack-inline-source-plugin@1.0.0-beta.2

Идем в config/webpack.config.js (предварительно придется сделать eject, это не больно):

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');   <--- добавить
...
plugins: [
  new HtmlWebpackPlugin(
    Object.assign(
      ...
      isEnvProduction
        ? {
            inlineSource: '.(js|css)$',    <-- добавить
            minify: {
              ...
  ),
  ...
  isEnvProduction &&
    shouldInlineRuntimeChunk &&
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),          <--- добавить
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
    ...

Собираем, папка с файлами останется в том же виде, index.html же будет содержать все, что было в сборке. Он даже может запускаться локально, но учтите, что есть вероятность неполадок с роутингом. Но это не точно.

Answer 2

[Robur]

1. .map файлы вообще не нужны для работы приложения. вы их можете просто не копировать.
2. Убедитесь что вы делаете production build https://facebook.github.io/create-react-app/docs/p...
3. уменьшить количество файлов можно, с помощью https://github.com/timarney/react-app-rewired можно поменять конфиг вебпака как вам хочется, или просто сделать eject и поменять конфиг напрямую.

Про dynamics ничего не знаю, но выглядит так будто у вас проблема не с количеством файлов а в чем-то другом.

Comments

[vorobey33rus]

1. спасибо, не в курсе про них, работаю в основном с .Net, все в новинку
2. точно так и делаю, поэтому чанки на выходе и получаются
3. спасибо, попробую!
Конфиг вебпака в create-react-app боюсь до чертиков, eject делал, уж больно там спагетти много

У Dynamics проблема в том, что туда заливать ресурсы (читай файлы) с зависимостями тяжко и хлопотно, а чаще всего они просто не работают. Собственно, проблема не с количеством файлов, а со структурой.
Идеально было бы иметь на выходе favicon.ico, index.html и app.js, где яваскрипт файл уже минифицирован. Понимаю, что так лучше не делать, ибо разбиение на чанки это здорово, кэширование и прочее - великолепно, но приложение маленькое, а иначе не заведешь.
В любом случае, спасибо, если что-нибудь получится, отпишусь, ответ помечу)

[Robur]

vorobey33rus, Если нужен один app.js - то путь один - хлебнуть для храбрости и в конфиг вебпака. Там не так все страшно как кажется.

[vorobey33rus]

Robur, все же я сумел найти решение. Возможно, оно будет полезным:

Это прям для create-react-app уберпанцер, буквально 2 минуты - и оно у вас помещается в индекс.хтмл
Папка статик со всей шелухой останется, изменится индекс страница. Теперь она даже локально без проблем открывается.
П.С.
Возможно, роутинг сломается, у меня в приложении он оказался не нужен, но если что, я предупредил.

[Robur]

vorobey33rus, Рад за вас, только вашего решения не видно

[vorobey33rus]

Robur, в шапке