Babel 如何解决 Unsafe Scripts 警告-JavaScript中文网-JavaScript教程资源分享门户

在现代的 Web 开发中，前端工程师们经常需要使用 ES6+ 的语法来编写 JavaScript 代码。然而，这些新的语法特性并不被所有的浏览器都支持，这就需要使用 Babel 这样的工具来将这些代码转换成浏览器可以理解的旧版 JavaScript 代码。但是，当我们在使用 Babel 转换代码的时候，有时候会遇到一些警告，其中最常见的就是 "Unsafe Scripts" 警告。

什么是 Unsafe Scripts 警告

当我们使用 Babel 将 ES6+ 代码转换成 ES5 代码时，有一些转换操作可能会产生一些安全隐患。例如，如果我们使用了 Object.assign() 方法，Babel 会将其转换成一个函数调用，这个函数会使用 for...in 循环来遍历对象的属性。然而，如果我们的代码中包含了一些用户输入的数据，那么这个 for...in 循环可能会遍历到一些我们不希望暴露的属性，从而导致安全问题。

为了避免这样的问题，Babel 会在转换代码时插入一些安全检查的代码，这些安全检查会在运行时检查我们的代码是否存在安全隐患。然而，由于这些检查会影响代码的性能，所以 Babel 会在转换后的代码中插入一个特殊的注释，用来警告我们可能存在的安全问题。这个注释的内容就是 "Unsafe Scripts"。

如何解决 Unsafe Scripts 警告

当我们在使用 Babel 转换代码时，如果遇到了 "Unsafe Scripts" 警告，那么我们应该如何解决呢？其实，有两种方法可以解决这个问题。

方法一：手动添加注释

第一种方法是手动添加一个注释，告诉 Babel 我们已经处理过了安全问题，不需要再插入检查代码了。具体来说，我们可以在代码中添加一个特殊的注释，内容为 /* eslint-disable */。这个注释告诉 Babel 不要插入任何检查代码，因为我们已经通过其他方式解决了安全问题。

// javascriptcn.com 代码示例
const obj = {
  name: 'Alice',
  age: 18,
};

// eslint-disable-next-line
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

在上面的示例代码中，我们使用了 Object.keys() 方法来获取对象的所有键名，并且使用 forEach() 方法来遍历这些键名。由于这个操作可能会存在安全隐患，所以 Babel 会在代码中插入一个 "Unsafe Scripts" 的警告注释。然而，由于我们已经知道这个操作是安全的，所以我们可以在代码前面添加一个 /* eslint-disable */ 的注释，告诉 Babel 不要插入检查代码。

方法二：使用 @babel/plugin-transform-runtime 插件

第二种方法是使用 @babel/plugin-transform-runtime 插件。这个插件可以在代码中自动插入一些安全检查的代码，从而避免 "Unsafe Scripts" 警告。具体来说，我们需要先安装 @babel/plugin-transform-runtime 插件：

npm install --save-dev @babel/plugin-transform-runtime

然后，在 .babelrc 配置文件中添加如下配置：

{
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

这样，当我们使用 Babel 转换代码时，@babel/plugin-transform-runtime 插件会自动将一些可能存在安全隐患的代码转换成安全的代码，从而避免 "Unsafe Scripts" 警告。例如，当我们使用 Object.assign() 方法时，@babel/plugin-transform-runtime 插件会将其转换成一个安全的函数调用，从而避免使用 for...in 循环遍历对象的属性。

import { assign } from "@babel/runtime-corejs3/core-js/object";

const obj = {
  name: 'Alice',
  age: 18,
};

assign({}, obj);

总结

在使用 Babel 转换代码时，我们可能会遇到 "Unsafe Scripts" 警告。这个警告是由于 Babel 在转换代码时插入了一些安全检查的代码，用来避免一些可能存在的安全隐患。然而，这些检查会影响代码的性能，从而导致性能下降。为了避免这个问题，我们可以手动添加一个注释，告诉 Babel 我们已经处理过了安全问题，不需要再插入检查代码了；或者使用 @babel/plugin-transform-runtime 插件，让 Babel 自动处理安全问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65694ffad2f5e1655d1db096