升级Rails至6后Sprockets移除模块sourceMappingURL与sourceURL问题
Rails 4 升级至 6 后 Sprockets 4 截断 Webpack 生成代码的 sourceURL/sourceMappingURL 问题
背景
正在将 Rails 从 4 版本升级至 6 版本,存在一个基于 Webpack 的独立前端项目,会生成名为 ui.js 的输出文件,通过 Sprockets 的 //=require 'ui' 引入该文件。在旧技术栈(Rails 4.2.11.3、Sprockets 2.12.5、Uglifier 4.1.20)下一切正常,可正常向客户端提供文件且无报错。
Rails 4 中可正常运行的 ui.js 片段:
eval("\nvar $export = __webpack_require__(/*! ./_export */ \"./node_modules/core-js/modules/_export.js\");\nvar $map = __webpack_require__(/*! ./_array-methods */ \"./node_modules/core-js/modules/_array-methods.js\")(1);\n\n$export($export.P + $export.F * !__webpack_require__(/*! ./_strict-method */ \"./node_modules/core-js/modules/_strict-method.js\")([].map, true), 'Array', {\n // 22.1.3.15 / 15.4.4.19 Array.prototype.map(callbackfn [, thisArg])\n map: function map(callbackfn /* , thisArg */) {\n return $map(this, callbackfn, arguments[1]);\n }\n});\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvY29yZS1qcy9tb2R1bGVzL2VzNi5hcnJheS5tYXAuanM/NmQ2NyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBYTtBQUNiLGNBQWMsbUJBQU8sQ0FBQyw0REFBVztBQUNqQyxXQUFXLG1CQUFPLENBQUMsMEVBQWtCOztBQUVyQyxpQ0FBaUMsbUJBQU8sQ0FBQywwRUFBa0I7QUFDM0Q7QUFDQTtBQUNBO0FBQ0E7QUFDQSxDQUFDIiwiZmlsZSI6Ii4vbm9kZV9tb2R1bGVzL2NvcmUtanMvbW9kdWxlcy9lczYuYXJyYXkubWFwLmpzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBzdHJpY3QnO1xudmFyICRleHBvcnQgPSByZXF1aXJlKCcuL19leHBvcnQnKTtcbnZhciAkbWFwID0gcmVxdWlyZSgnLi9fYXJyYXktbWV0aG9kcycpKDEpO1xuXG4kZXhwb3J0KCRleHBvcnQuUCArICRleHBvcnQuRiAqICFyZXF1aXJlKCcuL19zdHJpY3QtbWV0aG9kJykoW10ubWFwLCB0cnVlKSwgJ0FycmF5Jywge1xuICAvLyAyMi4xLjMuMTUgLyAxNS40LjQuMTkgQXJyYXkucHJvdG90eXBlLm1hcChjYWxsYmFja2ZuIFssIHRoaXNBcmddKVxuICBtYXA6IGZ1bmN0aW9uIG1hcChjYWxsYmFja2ZuIC8qICwgdGhpc0FyZyAqLykge1xuICAgIHJldHVybiAkbWFwKHRoaXMsIGNhbGxiYWNrZm4sIGFyZ3VtZW50c1sxXSk7XG4gIH1cbn0pO1xuIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/core-js/modules/es6.array.map.js\n")
实际问题
将 Sprockets 从 2 版本升级至最新的 4.2.1 后出现问题:Rails/Sprockets 提供的上述代码丢失了 sourceURL 和 sourceMappingURL,导致浏览器控制台报错且 UI 崩溃。
处理后的代码片段:
eval('\nvar $export = __webpack_require__(/*! ./_export */ "./node_modules/core-js/modules/_export.js");\nvar $map = __webpack_require__(/*! ./_array-methods */ "./node_modules/core-js/modules/_array-methods.js")(1);\n\n$export($export.P + $export.F * !__webpack_require__(/*! ./_strict-method */ "./node_modules/core-js/modules/_strict-method.js")([].map, true), \'Array\', {\n // 22.1.3.15 / 15.4.4.19 Array.prototype.map(callbackfn [, thisArg])\n map: function map(callbackfn /* , thisArg */) {\n return $map(this, callbackfn, arguments[1]);\n }\n});\n//# sourceURL=[module]\n.js\n')
丢失的内容:
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvY29yZS1qcy9tb2R1bGVzL2VzNi5hcnJheS5tYXAuanM/NmQ2NyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBYTtBQUNiLGNBQWMsbUJBQU8sQ0FBQyw0REFBVztBQUNqQyxXQUFXLG1CQUFPLENBQUMsMEVBQWtCOztBQUVyQyxpQ0FBaUMsbUJBQU8sQ0FBQywwRUFBa0I7QUFDM0Q7QUFDQTtBQUNBO0FBQ0E7QUFDQSxDQUFDIiwiZmlsZSI6Ii4vbm9kZV9tb2R1bGVzL2NvcmUtanMvbW9kdWxlcy9lczYuYXJyYXkubWFwLmpzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiJ3VzZSBzdHJpY3QnO1xudmFyICRleHBvcnQgPSByZXF1aXJlKCcuL19leHBvcnQnKTtcbnZhciAkbWFwID0gcmVxdWlyZSgnLi9fYXJyYXktbWV0aG9kcycpKDEpO1xuXG4kZXhwb3J0KCRleHBvcnQuUCArICRleHBvcnQuRiAqICFyZXF1aXJlKCcuL19zdHJpY3QtbWV0aG9kJykoW10ubWFwLCB0cnVlKSwgJ0FycmF5Jywge1xuICAvLyAyMi4xLjMuMTUgLyAxNS40LjQuMTkgQXJyYXkucHJvdG90eXBlLm1hcChjYWxsYmFja2ZuIFssIHRoaXNBcmddKVxuICBtYXA6IGZ1bmN0aW9uIG1hcChjYWxsYmFja2ZuIC8qICwgdGhpc0FyZyAqLykge1xuICAgIHJldHVybiAkbWFwKHRoaXMsIGNhbGxiYWNrZm4sIGFyZ3VtZW50c1sxXSk7XG4gIH1cbn0pO1xuIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./node_modules/core-js/modules/es6.array.map
注:该问题仅出现在这一个模块,其他模块均可正常提供。
已尝试的解决方案
- 修改 Uglifier 配置(如
mangle: { eval: false}等),未解决问题 - 切换至 Terser 替代 Uglifier,无效
- 调整 Rails 资产配置:开启/关闭
assets.debug、assets.compress、assets.compile,均无效果
需求
寻求配置 Sprockets 的方法,使其不再截断代码中的 sourceURL 和 sourceMappingURL。
系统配置
- sprockets 4.2.1
- uglifier 4.1.20
- sprockets-rails 3.4.2
- Ruby 版本 2.7.3
- Rails 6.1.7.7
内容的提问来源于stack exchange,提问作者Panczo
相关产品推荐
相关产品推荐

