Я использую create-react-app для разработки повторно используемых компонентов React, которые могут быть импортированы индивидуально в другие проекты (эти проекты, как правило, также будут проектами создания-реагирования-приложений). Я использую Gulp для создания файлов, которые будут использоваться, используя комбинацию gulp-sourcemaps и gulp-babel, т.е.
gulp.task("build:lib", function () {
let js = gulp.src([ "./src/**/*.js", "!./src/index.js"])
.pipe(sourcemaps.init())
.pipe(babel({presets:["react-app"]}))
.pipe(sourcemaps.write("."}))
.pipe(gulp.dest("lib"));
Я вижу, что файлы .js.map успешно создаются и что в выходных файлах есть комментарий, указывающий на существование исходной карты, например:
//# sourceMappingURL=Create.js.map
Проблема, с которой я сталкиваюсь, заключается в том, что когда файлы импортируются в потребляющий проект, я не вижу исходный источник, отображаемый в инструментах разработчика браузера, однако при наведении курсора на файл (на вкладке источников в Chrome, в «webpack:// "дерево) вижу всплывающую подсказку:
Create.js (из исходной карты)
Поэтому я не могу сказать, действительно ли я неправильно генерирую исходные карты или это просто конфигурация webpack-dev-server, используемая create-react-app, не обслуживает файлы .js.map (я, конечно, не не вижу их в дереве webpack:// на вкладке источников в Chrome, но я не уверен, ожидал бы я этого или нет).
Будем очень признательны за любые советы о том, неверен ли мой скрипт gulp или о том, что должен поддерживать create-react-app/webpack-dev-server.
Я прочитал документацию для gulp-sourcemaps и пробовал многие из варианты, но безуспешно.
