Jenkins构建出现Bundler & Minifier语法错误，本地构建正常求排查

问题场景 #

在Jenkins执行构建命令：

dotnet build "Vizualization.csproj" -c Release -o /app/build

时触发Bundler & Minifier语法错误，但本地执行相同构建命令无异常，手动检查代码未发现括号不匹配问题，现提供报错信息及涉事JS文件源码。

报错信息 #

Bundler: Begin processing bundleconfig.json

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(29,21,29,21): Bundler & Minifier error 0: Expected '}' ... [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(32,33,32,33): Bundler & Minifier error 0: Expected ';' [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(32,33,32,33): Bundler & Minifier error 0: Expected expression: : [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(46,14,46,14): Bundler & Minifier error 0: Expected '}' : ; [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(61,5,61,5): Bundler & Minifier error 0: Expected ')': } [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(61,6,61,6): Bundler & Minifier error 0: Expected ')': ; [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(62,1,62,1): Bundler & Minifier error 0: Syntax error: } [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(62,2,62,2): Bundler & Minifier error 0: Expected expression: ) [/src/Vizualization/Vizualization.csproj]

/src/Vizualization/wwwroot/js/datatables-knockout-binding.min.js(62,3,62,3): Bundler & Minifier error 0: Expected expression: ) [/src/Vizualization/Vizualization.csproj]

Bundler: Done processing bundleconfig.json

涉事JS源码 #

(function (factory) {
    if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        factory(require("jquery"), require("knockout"));
    }
    else if (typeof define === "function" && define["amd"]) {
        define(["jquery", "knockout"], factory);
    }
    else {
        factory($, ko);
    }
}(function ($, ko) {
    function getOptions(allBindings) {
        return allBindings.get("tableOptions") || {};
    }

    ko.bindingHandlers.datatable = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            const data = valueAccessor();
            const update = () => {
                const oldTable = $(element).closest("table").DataTable();
                const pageInfo = oldTable.page.info();
                const page = pageInfo.page;
                const pageLength = pageInfo.length;
                const order = oldTable.order();
                const search = oldTable.search();
                oldTable.destroy();
                ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
                const tableOptions = {
                    ...getOptions(allBindings),
                    order,
                    pageLength,
                    deferLoading: true
                };

                if (tableOptions.search) {
                    tableOptions.search.search = search;
                }
                else {
                    tableOptions.search = { search };
                }

                $(element).closest("table")
                    .DataTable(tableOptions)
                    .page(page)
                    .draw();
            };

            data.subscribe(update, null, "arrayChange");
            ko.utils.arrayForEach(element.childNodes, function (node) {
                if (node && node.nodeType !== 1 /*element*/) {
                    node.parentNode.removeChild(node);
                }
            });

            ko.bindingHandlers.foreach.init(element, valueAccessor, allBindings, viewModel, bindingContext);
            ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext);
            const tableOptions = getOptions(allBindings);
            $(element).closest("table").DataTable(tableOptions);
            return { controlsDescendantBindings: true };
        }
    };
}));

原因分析 #

1. ES6语法兼容性问题：涉事代码使用了const、箭头函数() =>、对象扩展运算符...、属性简写{ order, pageLength }等ES6语法。Jenkins环境中使用的Bundler & Minifier工具版本较低，不支持这些ES6语法，导致解析报错；而本地环境的工具版本支持ES6，因此无异常。
2. 文件命名误导工具：文件后缀为.min.js，但实际是未压缩的ES6代码。Bundler & Minifier工具可能默认对.min.js文件进行二次处理（如校验或再压缩），但工具本身不兼容ES6，触发语法错误。

解决方案 #

• 调整文件命名与构建配置：将datatables-knockout-binding.min.js重命名为datatables-knockout-binding.js，在bundleconfig.json中配置对该文件进行压缩处理，避免工具直接处理未兼容的ES6代码文件。
• 升级工具版本：更新Jenkins环境中的Bundler & Minifier工具至支持ES6语法的版本，确保语法解析兼容性。
• 预转译ES5：提前使用Babel等工具将该JS文件转译为ES5语法后再提交代码库，消除环境差异导致的兼容性问题。

内容的提问来源于stack exchange，提问作者Erik Blessman