官网: https://babeljs.io/ 示例: npx babel src --out-dir lib --source-maps 图:babel 使用示例 ? Babel编译转换后: npx babel square.js --out-file square.min.js --source-maps ? 外部SourceMap文件: ? Babel编译转换后: npx babel square.js --out-file square.min.js --source-maps inline ? 图:文件目录结构 ? 4. to Source Maps》: https://blog.teamtreehouse.com/introduction-source-maps https://demos.mattwest.io/source-maps 2016/02/14/how-do-source-maps-work.html webpack 的 Source Map: https://survivejs.com/webpack/building/source-maps
npm install babel-cli usage: babel app.js command: -o --out-file -d --out-dir -w --watch --source-maps
true, parallel: true, sourceMap: true, // Must be set to true if using source-maps
babel/preset-react react类型 @babel/typescript ts类型 常用cli 命令行 --out-file / -d 输出目录 -- watch / -w 文件监听 --source-maps
关于source map更多的信息可以参考:https://web.dev/articles/source-maps 按已编写/已部署分组代码 源代码面板中的按已编写/已部署分组功能,可以快速筛选分类混乱的源码文件
原文:https://web.dev/source-maps/ 代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具
而打开 web.dart 文件可以看到很多可配置参数,其中关键的比如: --no-source-maps : 是否需要生成 source-maps ; -O4 :代表着优化等级,默认就是 -O4,dart2js
而打开 web.dart 文件可以看到很多可配置参数,其中关键的比如: --no-source-maps : 是否需要生成 source-maps ; -O4 :代表着优化等级,默认就是 -O4,dart2js
// new TerserPlugin({ // // sourceMap: true, // Must be set to true if using source-maps
information -t, --source-maps-inline Append sourceMappingURL comment to bottom of code -s, --source-maps
new TerserPlugin({ parallel: true, //开启并行压缩,可以加快构建速度 sourceMap: true, //如果生产环境使用source-maps
--no-source-maps不启用source-maps。 终于,解释完配置项了。下面到了关键时期,就是我们启用下项目好使不。
会遇到的问题,可以参考 《一个编译问题带你了解 Flutter Web 的打包构建和分包实现》 ❞ 在这里可以通过前端的 source-map-explorer 工具去分析这个文件,首先在编译时要添加 --source-maps
在源码的 source-maps 这一块有讲,看大家需要做自己的处理,但是按照上面的方法去配置,是完全OK的。