Webpack: возможно ли скрыть исходную карту только в производстве? - PullRequest
Новая
       0

Webpack: возможно ли скрыть исходную карту только в производстве?

0 голосов
/ 12 января 2020

Я хочу отладить свое приложение реакции локально в браузере, но я установил для свойства devtool значение hidden-source-map в файле webpack.config. js, чтобы скрыть свой исходный код в рабочей среде. Есть ли возможность отладки локально, не подвергая мою исходную карту производству?

Ответы [ 2 ]

2 голосов
/ 12 января 2020

Вы можете включить исходную карту на производстве, но разместить ее на сервере, который разрешает запрос только с IP-адресов из белого списка. Если запрос пришел с IP, не занесенного в белый список, вы можете просто вернуть ошибку 403 или 404.

Допустим, вы используете загрузку исходных карт в amazon s3: 

// we use webpack.SourceMapDevToolPlugin for more flexible setups. Set the 'devtool' option to 'false' when you are doing this.
plugins: [
   new webpack.SourceMapDevToolPlugin({
      filename: '[name].[contenthash].js.map',
      // this is a s3 private bucket that is only accessible via whitelisted IPs
      // regular user will not be able to access the bucket
      append: `\n//# sourceMappingURL=https://s3.ap-southeast-1.amazonaws.com/sources-maps/[url]`,
      ...options,
    }),

    // other plugins.
  ]

Ваш сгенерированный JS по-прежнему будет содержать комментарий magi c в конце файла: 

//# sourceMappingURL=https://s3.ap-southeast-1.amazonaws.com/sources-maps/main.js.map

Но браузеры devtools могут загружать исходную карту, только если она обращается к ней с IP-адреса из белого списка, такого как ваш офисная сеть, VPN компании и др. c.

Другой подход заключается в том, что вы можете просто установить sourceMappingURL на localhost. При таком подходе у вас должны быть все файлы *.map, доступные локально на вашем компьютере. Если вы хотите отладить производственный код, просто запустите сервер stati c (например: ecstati c) локально для обслуживания исходных карт. Таким образом, вы можете быть уверены, что только вы можете получить доступ к исходным картам. Но для загрузки и обслуживания исходных карт требуется ручная работа.

0 голосов
/ 12 января 2020

Для этого вы можете использовать переменную окружения. Это будет что-то вроде этого: 

devtool: process.env.SOURCE_MAP ? 'inline-source-map' : 'hidden-source-map',

Тогда вы можете запустить такие тесты, например: 

SOURCE_MAP=true yarn test (just an example)

Вы должны проверить этот модуль https://www.npmjs.com/package/dotenv. Можно создавать файлы .env и использовать конфигурацию для различных потоков, таких как тестирование и сборка, поэтому вам не нужно вручную указывать переменные env перед выполнением команды.

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

...