Webpack 5.52.1下Stimulus控制器使用计算属性名构建报错如何解决

问题原因 #

你的代码本身存在不符合JavaScript语法规范的写法：使用方括号访问对象动态属性时，不需要在this和方括号之间额外加英文句号.。
之前Webpack 5.40.0版本内置的JS解析器对这类语法错误容错度较高，所以可以正常构建；升级到5.52.1版本后解析器的语法校验规则更严格，就会直接抛出Unexpected token的语法错误。

修复方案 #

把代码中所有this.['xxx']格式的写法，删掉多余的.，改成标准的this['xxx']格式即可。

修正后的代码示例 #

async createDatagridSource(){

    let datagridScName = [];
    let datagridshortName = [];
    Object.entries(this.datagrid).forEach(entry => {
        const [key, value] = entry;
        datagridScName.push(value.controllerNameSc);
        datagridshortName.push(value.shortName);
    });

    for (let i = 0; i < datagridshortName.length; i++) {
        // 去掉多余的.，改成标准方括号访问语法
        this['module' + datagridshortName[i]] = await import('../js/datagrid_config/' + datagridScName[i] + '_config');
        this.module = this['module' + datagridshortName[i]];
        this.datafields = this.module.datafields();

        this.columns = this.module.columns();
        this.columngroups = this.module.columngroups();
        this.config = this.module.config();

        //source des données initiales
        this['source' + datagridshortName[i]] ={
            datafields:this.datafields,
            data: { "viewArchives" : this.viewArchives,...this.sourceOtherdata(datagridshortName[i])},
            url: this.datagrid[datagridshortName[i]].urlInit,

            //********************************
            id: 'data',
            type: "POST",
            datatype: "json",
            root: 'data',
        }
        //adaptater de la source
        this['dataAdapter' + datagridshortName[i]] = new $.jqx.dataAdapter(this['source' + datagridshortName[i]]);
    }

    //renvoi l'identifiant du premier datagrid
    return datagridshortName[0];
}

可选优化建议 #

可以把拼接好的动态属性名提前存为变量，避免重复拼接，提升代码可读性：

for (let i = 0; i < datagridshortName.length; i++) {
    const shortName = datagridshortName[i];
    const moduleKey = `module${shortName}`;
    const sourceKey = `source${shortName}`;
    const adapterKey = `dataAdapter${shortName}`;
    
    this[moduleKey] = await import('../js/datagrid_config/' + datagridScName[i] + '_config');
    // 后续直接用this[moduleKey]、this[sourceKey]等访问即可
}

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