在使用 Babel7 进行前端开发时，经常会遇到 useBuiltIns 这个配置项。它可以用来自动引入 polyfill，以便让代码在不支持某些新特性的浏览器中正常运行。但是，useBuiltIns 又分为 'entry' 和 'usage' 两种模式，这两种模式有什么区别呢？本文将详细探讨这个问题，并给出示例代码和指导意义。
useBuiltIns: 'entry'
在 'entry' 模式下，Babel 会根据配置的目标浏览器或者运行环境，自动引入所有需要的 polyfill。这种模式下，所有的 polyfill 都会被打包到最终的输出文件中，不管实际上是否被使用到。
例如，我们可以这样配置：
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'entry',
targets: {
chrome: '58',
ie: '11'
}
}]
]
}这样做的效果是，Babel 会自动引入所有在 Chrome 58 和 IE 11 中缺失的新特性的 polyfill，不管我们的代码是否用到了这些特性。这样做的好处是，我们不需要手动引入 polyfill，也不需要考虑是否需要引入哪些 polyfill。但是，缺点也很明显，即最终的输出文件会比较大，包含了很多实际上并没有用到的 polyfill。
useBuiltIns: 'usage'
在 'usage' 模式下，Babel 会根据代码中用到的新特性，只引入必要的 polyfill，而不会引入所有的 polyfill。这种模式下，最终输出的文件大小会比较小，因为只有实际用到的 polyfill 被引入了。
例如，我们可以这样配置：
// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3,
targets: {
chrome: '58',
ie: '11'
}
}]
]
}这样做的效果是，Babel 会根据我们的代码中用到的新特性，自动引入必要的 polyfill。在这个例子中，我们指定了 corejs 版本为 3，这意味着 Babel 会使用 core-js@3 中的 polyfill。另外，我们还指定了目标浏览器为 Chrome 58 和 IE 11。这样做的好处是，我们只引入了实际需要的 polyfill，最终输出的文件大小比较小。
总结
'entry' 模式和 'usage' 模式各有优缺点，我们需要根据实际情况进行选择。如果我们的代码中用到了很多新特性，而且我们不想手动管理 polyfill，那么可以选择 'entry' 模式。如果我们的代码中只用到了一些新特性，而且我们希望最终输出的文件大小比较小，那么可以选择 'usage' 模式。但是，无论选择哪种模式，我们都需要注意一点，那就是不要忘记指定 core-js 的版本，否则可能会引入错误的 polyfill。
示例代码
下面是一个示例代码，演示了如何在 'usage' 模式下使用 Babel7：
// index.js
const obj = {
a: 1,
b: 2
};
const arr = [1, 2, 3];
const arr2 = arr.map(item => item + 1);
const arr3 = Object.values(obj);
console.log(arr2);
console.log(arr3);// babel.config.js
module.exports = {
presets: [
['@babel/preset-env', {
useBuiltIns: 'usage',
corejs: 3,
targets: {
chrome: '58',
ie: '11'
}
}]
]
}指导意义
在实际开发中，我们需要根据项目的实际情况选择合适的 useBuiltIns 模式。如果我们的项目需要支持较老的浏览器，那么可以选择 'entry' 模式。如果我们的项目只需要支持现代浏览器，那么可以选择 'usage' 模式。但是，无论选择哪种模式，我们都需要注意一点，那就是不要忘记指定 core-js 的版本，否则可能会引入错误的 polyfill。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bdd41dadd4f0e0ff771d74