源地图未加载/从导入到create-react-app的NPM包中检测到

Question

我使用create-react-app来开发可单独导入其他项目的可重用React组件（这些项目通常也会是create-react-应用程序项目）。我使用的是咕嘟咕嘟生成的文件使用一饮而尽，sourcemaps的组合来消耗大口喝，巴贝尔，即

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中的sources选项卡中，在“webpack：//”树中）时，我看到工具提示：

Create.js（从源地图）

所以我不能告诉与否实际上，我产生了源映射不正确或者是否只是在的WebPack-dev的服务器配置由create-react-app使用不会为.js.map文件提供服务（我当然在Chrome的sources标签下的webpack：//树中看不到它们，但我不确定我是否期望）。

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

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

Answer 1

我已经找到了自己解决这个问题的方法。我将我的Gulp任务转换为构建源地图inline（这对于使用应用程序来说不应该是一个问题，因为它是作为注释嵌入的，因此它将在构建时从分发文件中除去）。

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