How to prevent Babel from renaming variable name "a" to "_a"

[mayewei]

How to prevent Babel from converting "a" to "_a"

[nicolo-ribaudo]

Variable names aren't semantically observable: even if Babel renames a variable, your program will work the same (ignoring eval, which isn't supported by Babel anyway).

That said, it usually renames a variable only when it's needed. Can you show an example of a becoming _a?

[mayewei]

[nicolo-ribaudo]

I tried copying parts of your code to our repl (https://babeljs.io/repl) but I coundn't reproduce it. Is it possible for you to create an example that I can try running? Are you only using Babel or also other tools?

Btw, if your goal is to use those variables in the HTML code I suggest using window.tradeList instead of var tradeList: by doing so no tool will renamed it, because it's a normal property on an object.

[mayewei]

$(function () {
  login.init(); // $("#goByPassCodeA").hide();
});

var login = {
  init:function(){
  },
  login: function () {
  
    dataOP.post({
      url: dataOP.url.login.login,
      data: datas,
      success: function (data) {  
        
      },
      error: function (error) {
        login.toast(error.message);
        $('.load-wrapp').hide();
        $('.login-btn').show();
      }
    });
  }
};

Hello, you try this code, thank you

[nicolo-ribaudo]

Thanks! I can now explain why that variable is renamed.

You are probably using @babel/preset-env (or, if you are using @babel/preset-es2015, you should replace it with @babel/preset-env).
@babel/preset-env includes a plugin called @babel/plugin-transform-function-name, which adds a name to functions inside of objects identical to the name of the object property. This means that, for example, this code:

var obj = {
  fn: function() {}
}

becomes

var obj = {
  fn: function fn() {}
}

Now, let's see what this plugin would do to your code:

$(function () {
  login.init(); // $("#goByPassCodeA").hide();
});

var login = {
  init:function init(){
  },
  login: function login() {
  
    dataOP.post({
      url: dataOP.url.login.login,
      data: datas,
      success: function sucess(data) {  
        
      },
      error: function error(error) {
        login.toast(error.message);
        $('.load-wrapp').hide();
        $('.login-btn').show();
      }
    });
  }
};

By doing do, the login variable in login.toast(error.message); doesn't refer to the var login anymore, but to function login() { ... }. The only way that Babel has to refer to the correct variable is to rename it (to _login), so that it isn't shadowed anymore.

You can avoid this problem in two ways:

1. Disable @babel/plugin-transform-function-name in your config. It should look similar to this:

   {
      "presets": [
         ["@babel/preset-env", {
            "exclude": ["transform-function-name"]
         }]
      ]
   }

2. Don't use the login variable inside the login function. You can, for example, introduce an l variable alias:

$(function () {
  login.init(); // $("#goByPassCodeA").hide();
});

var login = {
  init:function(){
  },
  login: function () {
  
    dataOP.post({
      url: dataOP.url.login.login,
      data: datas,
      success: function (data) {  
        
      },
      error: function (error) {
        l.toast(error.message);
        $('.load-wrapp').hide();
        $('.login-btn').show();
      }
    });
  }
};
var l = login; // NOTE: Needed otherwise Babel renames login to _login.

[mayewei]

I tried your method and solved my problem. Thank you very much.