3 способа скрыть или защитить исходный код React от браузера

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

Почему виден исходный код?
Файлы сборки создаются для развертывания приложения в рабочей среде. При создании сборки приложение React по умолчанию создает исходные файлы «.map», поскольку включена исходная карта сценария реагирования. Эти файлы карты будут иметь ссылку на наш исходный код. Это сопоставление между сгенерированным файлом JavaScript и исходным исходным файлом. Во время разработки будет легко определить ошибку в исходном файле. Ваш браузер будет использовать файлы «.map» для восстановления исходного кода, видимого в вашем браузере. Поэтому, чтобы избежать этого, файлы «.map» должны быть удалены.

Мы можем удалить или избежать создания этих файлов карты в любом случае.

1. Через файл .env

  • Создайте файл .env в корневой папке проекта.
  • Добавьте GENERATE_SOURCEMAP=FALSE в созданный файл env.

После этого соберите проект с помощью npm run build и разверните приложение. Это позволит избежать создания файлов карт во время сборки. Теперь вы не найдете весь исходный код в браузере.

2. С помощью package.json
 отредактируйте скрипт сборки package.json, как показано ниже:

Вы должны изменить свой скрипт сборки в package.json, добавив для генерации исходной карты значение false.

#windows
build: set \"GENERATE_SOURCEMAP=false\" && react-scripts build
#linux
build: GENERATE_SOURCEMAP=false react-scripts build

Это также еще один способ упомянуть сборку, чтобы избежать создания файлов карты, установив для исходной карты значение false.

3. Использование postbuild
В этом подходе сначала создаются файлы сборки, а затем публикуется сборка, файлы «.map» внутри build/static/js и build/static/css будет удален.

rimraf используется для рекурсивного удаления папок и файлов. Это похоже на команду rm -rf в Linux.

Добавьте скрипт пост-сборки "postbuild":"rimraf build/static/**/*.map" в скрипт и запустите npm build . Сначала он создаст файлы сборки «.map» в папке сборки и удалит эти файлы после сборки. При развертывании приложения в рабочей среде вы не найдете полный исходный код.

Заключение

Таким образом, есть много способов добиться того же. В первых двух подходах мы изначально избегаем создания этих файлов карт, а в последнем подходе мы удаляем файлы «.map» внутри build/static/js и build/static/css. после создания опубликуйте сборку.
Это скроет исходный код на вкладке проверить›исходники в браузере, а также ускорит вашу сборку, а также уменьшит много места в папке сборки.

Не стесняйтесь комментировать свое мнение😊. Вы можете связаться со мной по Linked in.
Надеюсь, этот пост был полезен. Проверьте и другие!



Как создать и настроить проект React с помощью Create React App в Windows?
Вот мой первый пост на Medium😀Надеюсь, он будет полезен!!!medium .com





Как развернуть приложение React в Heroku с помощью пользовательского домена GoDaddy?
Пошаговое руководство по развертыванию статического приложения React в Heroku с помощью пользовательского домена GoDaddy.javascript.plainenglish.io