Preset预设在前端开发中的实战应用与常见问题解决

先看效果，再看代码

大家好，今天要和大家分享的是Presets预设的使用经验。这个东西在前端开发中挺常见的，特别是用到一些脚手架工具时，比如Create React App或者Vue CLI。直接上代码，我们来看看怎么用。

核心代码就这几行

首先，假设你已经有一个项目了，我们来加个Presets配置试试。


module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
};


这段代码是在Babel配置文件（通常是.babelrc或babel.config.js）里写的。@babel/preset-env 和 @babel/preset-react 是两个常用的Presets，分别用于处理ES6+语法和React JSX。

这个场景最好用

我在一个实际项目中遇到过这种情况：项目需要支持多个浏览器版本，而且用到了很多新的ES6+特性。这时候，手动配置兼容性很麻烦，用了@babel/preset-env 就省心多了。这个Preset会根据你的目标浏览器列表自动转译代码，非常方便。

踩坑提醒：这三点一定注意

• 配置文件位置： 确保你的Babel配置文件在项目的根目录下。有时候因为路径问题，可能会导致配置不生效。我有一次就是因为把配置文件放在了一个子目录里，折腾了半天才发现。
• 依赖安装： 使用Presets之前，一定要确保相关的依赖已经安装好了。比如@babel/preset-env 和 @babel/preset-react，不然会报错。用npm或yarn安装就行：


npm install --save-dev @babel/preset-env @babel/preset-react


• 目标浏览器设置： 如果你在.browserslistrc文件里设置了目标浏览器，记得检查一下配置是否正确。如果目标浏览器列表有误，会导致代码转译不到位，影响兼容性。我的做法是直接在.browserslistrc文件里写：


> 0.5%
last 2 versions
Firefox ESR
not dead


高级技巧：自定义Preset

有时候，你可能需要自定义一个Preset来满足特定需求。比如，你希望在项目中统一使用某个插件或者某些特定的配置。这时候可以自己写一个Preset。下面是一个简单的例子：


// my-preset.js
module.exports = function() {
return {
plugins: [
'transform-runtime',
'syntax-dynamic-import'
],
presets: [
['@babel/preset-env', { targets: { browsers: ['last 2 versions'] } }],
'@babel/preset-react'
]
};
};


然后在你的Babel配置文件里引用这个自定义Preset：


module.exports = {
presets: [require.resolve('./my-preset')]
};


这样做的好处是，你可以集中管理所有项目的Babel配置，避免每个项目都重复配置。亲测有效，推荐大家试试。

拓展用法还有很多，后续继续分享

以上就是我对Presets的一些实战经验和心得。其实这个技术的拓展用法还有很多，比如结合Webpack、Rollup等构建工具的配置，或者在CI/CD流程中的应用。后续我会继续分享这类博客，希望能帮到大家。

如果你们有更好的实现方式或有什么问题，欢迎评论区交流。谢谢大家！