如何在使用 Babel 时去掉 "use strict" 全局注释

前言

当我们使用 Babel 转换 ES6 或以上版本的 JavaScript 代码时，它会自动在输出的代码中添加 "use strict"; 全局注释。这是因为通过强制使用严格模式，可以提高代码的安全性和可靠性，并减少隐含错误。但在某些情况下，我们可能希望去掉这个全局注释。

本文将介绍如何在 Babel 中去掉全局 "use strict"; 注释的方法，并讨论使用该技巧的场景和注意事项。

方法

为了让 Babel 不在输出代码中添加 "use strict"; 注释，我们可以将 babel-preset-env 的 useBuiltIns 选项设置为 "usage"。例如：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage"
    }]
  ]
}

使用 "usage" 选项后，Babel 会根据代码中实际使用的功能自动添加必要的 polyfill，并在需要时在函数或模块的顶部添加 "use strict"; 注释。这样可以避免在全局添加注释的同时，仍然保证了代码的可靠性和安全性。

需要注意的是，在使用 "usage" 选项时，Babel 还需要安装 @babel/plugin-transform-runtime 插件，并将其作为 options 配置中的 corejs 选项来使用。例如：

// www.javascriptcn.com code example
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

场景和注意事项

去掉全局 "use strict"; 注释可能会影响代码的可读性和可维护性，并增加了一些潜在的错误。因此，我们应该仅在特定的场景下使用该技巧。

一种常见情况是，在代码的某些区域或模块中，我们已经手动添加了 "use strict"; 注释，因此不希望 Babel 再次添加全局注释。这时我们可以使用上述方法，去掉全局注释，并在需要时手动添加局部注释。

另一个场景是，在编写库或框架时，我们需要以最大兼容性为前提，因此不能强制要求用户在使用时开启严格模式。但是，我们仍然可以通过在库或框架内部显式地使用 "use strict"; 注释来确保代码的可靠性和安全性。

总之，去掉全局 "use strict"; 注释应该谨慎使用，避免引入不必要的风险和错误。同时，我们也应该学会正确地使用严格模式和 Babel，以提高代码的质量和兼容性。

示例代码

// www.javascriptcn.com code example
// 普通示例代码，会在全局添加 "use strict"; 注释
const name = "world";
console.log(`Hello, ${name}!`);

// 使用 "usage" 选项后的示例代码，不会在全局添加注释
const age = 18;
console.log(`You are ${age} years old.`);

// 手动添加局部 "use strict"; 注释的示例代码
(function() {
  "use strict";
  const foo = "bar";
  console.log(`foo is ${foo}.`);
})();

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/28891