FrontJS 支持 Source Map, 并且 Source Map 文件包含源码, FrontJS 会主动显示源码。
Source Map 可以在 项目设置 里面管理
对于不同的前端打包工具, 打开 Source Map 支持的方式是不一样的。
如果在创建项目时使用前端脚手架工具, 那么生成 Source Map 是默认打开的, 生成的 Source Map 默认会与打包好的 JS 脚本文件存放在同一个目录下。
如果在项目在创建是没有使用脚手架工具, 那么可能需要手动打开生成 Source Map 的选项, 具体需要参照构建工具的文档。
以下是一些常见的构建工具打开生成 Source Map 选项的配置方法
需要 SourceMapDevToolPlugin 的支持, 设置 devtool 属性为 source-map 或 nosources-source-map 即可, 具体参照以下链接
Webpack: Devtool
Github: webpack/examples/source-map/
需要在 grunt-contrib-uglify 或 grunt-contrib-uglify-es 的支持, 在设计压缩任务时, 设置 sourceMap 选项为 true 即可, 具体参照以下链接
Github: gruntjs/grunt-contrib-uglify
Github: gruntjs/grunt-contrib-uglify-es
如果 FrontJS 堆栈信息中出现 您的 Source Map 文件不完整 的提示, 说明您上传的 Source Map 文件中没有嵌入源码, 您可以忽略这条提示, 直接按照 Source Map 解析结果去定位您的错误即可, 如果您确实需要堆栈信息中显示源文件而不是混缩的文件, 您需要在 Source Map 生成的过程中嵌入源代码, 则需要打开源码嵌入。
对于不同的前端打包工具, 嵌入源码的设置也不一样, 具体需要参照构建工具的文档。
以下是一些常见的构建工具打开生成 Source Map 选项的配置方法
需要 SourceMapDevToolPlugin 的支持, 设置 devtool 属性为 source-map 即可, 具体参照以下链接
Webpack: Devtool
Github: webpack/examples/source-map/
需要在 grunt-contrib-uglify 或 grunt-contrib-uglify-es 的支持, 在设计压缩任务时, 设置 sourceMap.includeSources 选项为 true 即可, 具体参照以下链接
Github: gruntjs/grunt-contrib-uglify
Github: gruntjs/grunt-contrib-uglify-es