未从导入到create-react-app的NPM包加载/检测到源映射

Question

我正在使用create-react-app来开发可重复使用的React组件，这些组件可以单独导入到其他项目中（这些项目通常也是create-react-app项目）。我正在使用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（来自源地图）

因此，我无法判断我是否实际上错误地生成了源映射，或者是否只是create-react-app使用的webpack-dev-server配置没有提供.js.map文件（我当然不会在Chrome的“源”选项卡下的webpack：//树中看到它们，但我不确定我是否期望这样。）

关于我的gulp脚本是否错误或者create-react-app / webpack-dev-server应支持的任何建议都将不胜感激。

我已经阅读了documentation gulp-sourcemaps并尝试了许多选项，但没有成功。

Answer 1

我自己实际上找到了解决这个问题的方法。我转换了我的Gulp任务来构建源映射inline（这对于使用应用程序来说不应该是一个问题，因为它作为注释嵌入时会在构建时被剥离出分发文件）

我需要做的另一件事是将create-react-app中的devtools配置从cheap-module-source-map转换为eval（不幸的是，这需要ejecting）。但它确实至少解决了这个问题。