在前端开发中，我们经常会使用 Babel 技术来进行代码的转译和编译，以达到更好的兼容性和更高的效率。然而，在使用 Babel 编译JavaScript 代码时，我们有时会遇到一个常见的问题——"use strict"被Babel 自动插入，导致代码出现问题。本文将介绍这种问题的具体表现，以及解决方法，并通过示例代码帮助读者更好地理解和掌握该技术。
问题的表现
当我们使用 Babel 进行编译时，有时会发现编译后的代码自动添加了 "use strict"，这通常会导致代码在执行时出现问题。具体来说，可能出现如下几种情况：
1. 报错提示：
"use strict" code should not include statements outside of function bodies or function parameters
2. 变量未定义提示:
foo = 10; // ReferenceError: foo is not defined
3. this未定义提示:
function test () {
// 在严格模式下，函数内的 this 指向 undefined
console.log(this); // undefined
}问题的原因
当我们使用 Babel 编译代码时，默认情况下，Babel 会自动将 "use strict" 语句添加到编译后的代码的顶部。这意味着，如果我们在已经使用 "use strict" 的代码中再次添加 "use strict"，就会导致上述问题的发生。
此外，ES6 以及更新的版本本身就已经默认启用了严格模式，因此，如果我们的代码没有指定使用严格模式，Babel 就会在编译时为我们添加 "use strict"。
解决方法
既然问题的原因已经清楚了，我们相信解决起来也不难。下面是几种常见的解决方法：
1. 删除多余的 "use strict"
当我们发现代码中多次出现 "use strict" 的时候，我们需要检查代码中是否重复添加了 "use strict"。如果是，我们可以删除多余的 "use strict" 语句，只保留一个即可。
2. 保留一个 "use strict"
如果我们确实需要在代码中启用严格模式，我们可以在代码的起始位置添加一个 "use strict"，而不是让 Babel 自动添加。这样可以避免出现多个 "use strict" 的问题。
"use strict"; // your code ...
3. 关闭严格模式
如果你的代码不需要使用严格模式的特性，你可以选择关闭严格模式。在 Babel 的配置文件 .babelrc 中添加以下代码即可：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------- ----
-
-
-
-在代码中关闭严格模式的示例：
-- -------------------- ---- ------- -- ---------- -------- -- -- - ------------------ - -- ------ ----- --- - - ----- -------------- -- ----------- -- ------
4. 其他解决方法
还有其他方法可以解决 "use strict" 的问题，例如：
在代码中添加一个 IIFE（立即执行函数），并在其中使用严格模式
使用 Babel 插件 "transform-remove-strict-mode"，在编译时删除 "use strict"
总结
本文详细介绍了在使用 Babel 进行编译时，出现 "use strict" 的问题以及相关解决方法。我们建议，任何时候都要谨慎地添加 "use strict"，并在多次出现 "use strict" 的情况下检查代码，以保证代码的稳定性和可维护性。
在实际开发中，我们要根据不同的情况选择不同的解决方法，并学会灵活应用，以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647fbe3448841e9894f4c7d8