？你能快速阅读babel的官方文档吗？能否根据官方文档快速配置babelrc？你能找出你需要哪些插件吗？如果您不明白这3个问题，请继续阅读。快速了解babel6，看一张让人毛骨悚然的babel插件图忘记上图吧，那是万恶之源当你忘记一切的时候，你只需要了解一些基本的东西。解析大部分ES方法只需要以下babel插件1、babel-core//需要核心库2、babel-loader//webpackloader配置需要3、babel-preset-env//有了它，你不再需要toadd2015,2016,2017,allsupport4,babel-preset-stage-0//有了它，就不用再添加stage-1,stage-2,stage-3了，默认向后支持5,babel-plugin-transform-runtime6,babel-runtime//5和6一起使用，支持helpers,polyfill,regenerator配置以上6大插件添加到package.json中，一个普通开发者可以完成需要，那么，如果你是react开发者，还需要添加如下插件1、babel-plugin-transform-decorators-legacy//支持修饰符语法@connect2,babel-preset-react//支持解析react语法如果想要支持热更新，还需要一个插件1、react-hot-loader//虽然看起来不像babel，但也需要在babelrc中配置其他插件？在我看来，以上插件的合集已经涵盖了绝大部分的ES语法。如果您是Vue开发人员，请将React替换为Vue。通常我们不需要再考虑其他插件了。请注意这些插件的具体版本号，babel插件已经更新，目前babel7已经发布。本章内容为介绍babel6，请勿乱用版本。下面提供了具体的版本号供大家参考"babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-decorators-legacy":"^1.3.4","babel-plugin-transform-runtime":"^6.23.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-runtime":"^6.26.0","react-hot-loader":"^3.1.2",你相信吗它？以上9个插件可以生成图片上的几十个插件，这都是插件之间的依赖关系。babelrc配置现在，你只需要考虑上面列出的插件和版本号就??可以快速配置babel了，相当简单{"presets":["env","react","stage-0"],"plugins":[["transform-runtime",{"helpers":false,//建议为false"polyfill":false,//是否开启polyfill，根据你的网站兼容性，一般我不开启，打开它添加很多额外的代码"regenerator":true//必须为true，否则js没用}],"react-hot-loader/babel",//热更新插件"transform-decorators-legacy"//decorsyntaxConversionplugin]}webpackloader配置babel-loader的配置也很简单，关于webpack中react-hot-loader的配置请自行查看文档。module:{rules:[{test:/\.jsx?$/,use:'babel-loader'}]}总结我一直认为一个好的项目应该尽量用简单的代码来解决简单的事情，而不是使用复杂的代码解决简单的事情。很多人，包括我自己，以前经常被babel和webpack的配置所困扰，尤其是babel，经常报这个插件那个插件的错误，有时候不知道少了什么插件。好了，现在不用害怕了，因为babel配置就是这么简单。
