require js 不支持捆绑过程中的可选链接（grunt 捆绑程序）

Question

Running "requirejs:desktop" (requirejs) task
    Error: Parse error using esprima for file:
    C:/projects/GitProjects/vendorgames-sonarqube/ndcasinocommon/base_common/fcga
mes/vendorgames/utilities/utils.js
    Error: Line 17: Unexpected token .
    In module tree:
       desktop/init
           controller
               lobbyService
Warning: RequireJS failed. Use --force to continue.

Aborted due to warnings.

在 CMD 中显示此错误，在捆绑程序的一个文件中使用 JavaScript 可选链接时，require js 正在使用 grunt build 命令破坏捆绑过程

"use strict";

module.exports = function(grunt) {

  var buildVersion = grunt.option('buildVersion') || '1.0';
  var currentVersion = grunt.option('currentVersion') || '1.0';

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    buildVersion: buildVersion,
    currentVersion: currentVersion,
    requirejs: {
      desktop: {
        options: {
          uglify2: {
            mangle: false
          },
          baseUrl: "./",
          mainConfigFile: "desktop/init.js",
          name: "desktop/init",
          out: "desktop/___FilesToBeCached___desktop.min.js",
          optimize: "none"
        }
      }
    },
    replace: {
      desktopReplace: {
        src: ["./Controller.html"],
        dest: "./",
        replacements: [{
          from: "desktop-min-<%=currentVersion%>",
          to: "desktop-min-<%=buildVersion%>"
        }]
      }
    },
    uglify: {
      desktop_build: {
        files: {
          "desktop/build.js": ["desktop/*.js", "desktop/**/*.js", "utilities/*.js"]
        }
      }
    }
  });

  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-requirejs");
  grunt.loadNpmTasks("grunt-text-replace");
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.file.setBase("../");
  grunt.registerTask("desktop", ["requirejs:desktop"]);
  grunt.registerTask("desktopReplace", ["replace:desktopReplace"]);
  grunt.registerTask("build", ["desktop", "desktopReplace"]);
};

这是发生捆绑的桌面代码所需的js

require.config({
    baseUrl: "./",
    paths: {
        utils: "utilities/utils",
    },
    shim: {
        jqueryUI: {
            deps: ['jquery']
        },
        jqueryTouch: {
            deps: ['jqueryUI']
        }
    }
});

在此文件中，我使用可选链接，这是该函数

function getCookie(cname) {
    var name = cname + "=";
    var ca = document?.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

我正在使用 grunt 捆绑器

如果文件涉及缩小文件，则面临此问题。

我想使用 es6 可选链接功能使构建成功捆绑所有文件

我正在使用 grunt 捆绑器并需要 js 来导入和导出文件

Answer 1

出现您所面临的错误是因为 RequireJS 和 Esprima 版本（RequireJS 在捆绑过程中使用的 JS 解析器）本身并不支持 ES6+ 功能，例如可选链接 (

?.

)。由于您使用 Grunt 来管理构建过程，因此有几种方法可以解决此问题。

1.将 Babel 添加到您的构建过程中以转译 ES6+ 功能：

Babel 可以将您的现代 JavaScript 代码（具有可选链等 ES6 功能）转换为与旧版 JavaScript 引擎和 RequireJS 兼容的版本。

以下是将 Babel 集成到 Grunt 设置中的方法：

第1步：安装 Babel 依赖项

npm install grunt-babel @babel/core @babel/preset-env --save-dev

第 2 步：在 Gruntfile 中配置 Babel

在 RequireJS 处理之前，您需要添加 Babel 将 ES6 代码转译为 ES5。

修改您的

Gruntfile.js

以包含 Babel：

  module.exports = function(grunt) {
  var buildVersion = grunt.option('buildVersion') || '1.0';
  var currentVersion = grunt.option('currentVersion') || '1.0';

  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    buildVersion: buildVersion,
    currentVersion: currentVersion,
    
    // Babel configuration
    babel: {
      options: {
        presets: ['@babel/preset-env']
      },
      dist: {
        files: [{
          expand: true,
          src: ['utilities/*.js', 'desktop/**/*.js'], // Transpile these files
          dest: 'build/' // Output to a 'build' folder
        }]
      }
    },

    requirejs: {
      desktop: {
        options: {
          uglify2: {
            mangle: false
          },
          baseUrl: "./build", // Use the transpiled files in the build folder
          mainConfigFile: "desktop/init.js",
          name: "desktop/init",
          out: "desktop/___FilesToBeCached___desktop.min.js",
          optimize: "none"
        }
      }
    },

    replace: {
      desktopReplace: {
        src: ["./Controller.html"],
        dest: "./",
        replacements: [{
          from: "desktop-min-<%=currentVersion%>",
          to: "desktop-min-<%=buildVersion%>"
        }]
      }
    },

    uglify: {
      desktop_build: {
        files: {
          "desktop/build.js": ["desktop/*.js", "desktop/**/*.js", "utilities/*.js"]
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-babel');
  grunt.loadNpmTasks("grunt-contrib-uglify");
  grunt.loadNpmTasks("grunt-contrib-requirejs");
  grunt.loadNpmTasks("grunt-text-replace");
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  grunt.file.setBase("../");

  grunt.registerTask("desktop", ["babel", "requirejs:desktop"]);  // Babel transpilation before bundling
  grunt.registerTask("desktopReplace", ["replace:desktopReplace"]);
  grunt.registerTask("build", ["desktop", "desktopReplace"]);
};

第 3 步：更新

require.config

中的路径

确保 RequireJS 从转译位置加载文件。 Babel 转译文件后，它们应该位于

build/

文件夹中。

require.config({
    baseUrl: "./build", // Point to the transpiled files
    paths: {
        utils: "utilities/utils",
    },
    shim: {
        jqueryUI: {
            deps: ['jquery']
        },
        jqueryTouch: {
            deps: ['jqueryUI']
        }
    }
});

2.使用 Babel 处理可选链：

可选链将被转换为兼容的 ES5 格式。例如，像

document?.cookie

这样的可选链接表达式将被转换为类似：

document == null ? undefined : document.cookie

这将避免旧版 JavaScript 引擎或 RequireJS 等尚不支持可选链的工具的解析问题。

运行 Grunt 任务

修改你的

Gruntfile.js

并确保 Babel 已集成后，运行：

grunt build

这应该会转译您的 ES6+ 代码，将其捆绑，并通过可选链接避免解析错误。

替代方案（如果你不能使用 Babel）

如果您不想引入 Babel，您可以重构代码以避免可选链并改用传统检查：

function getCookie(cname) {
    var name = cname + "=";
    var ca = document && document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

这可以避免这个问题，但它不如使用现代语法优雅。如果您想继续使用 ES6+ 功能，建议使用 Babel 方法。