繁琐的配置？
你能快速读懂babel的官方文档吗？
你能根据官方文档快速配置好babelrc吗？
你能明白自己需要哪些插件吗？
没有搞明白这3个问题，请往下看。
快速理解babel 6
来看一张让人颤抖的babel插件图
下图仅仅截取了部分，一屏都截取不完，还有babel插件隐藏在下面，你害怕了吗？
忘记上面的图吧，那是罪恶之源
当你忘记一切的时候，你只需要理解几个基本的东西即可。
1、babel-core //必备的核心库 2、babel-loader //webpack loader配置必备 3、babel-preset-env //有了它，你不再需要添加2015、2016、2017，全都支持 4、babel-preset-stage-0 //有了它，你不再需要添加stage-1,stage-2,stage-3,默认向后支持 5、babel-plugin-transform-runtime 6、babel-runtime //5和6是一起使用的，支持helpers，polyfill，regenerator配置
上面6大插件添加到package.json，便可完成一个普通开发者的需求了，那么，如果是个react开发者，则还需要添加下面几个插件
1、babel-plugin-transform-decorators-legacy //支持修饰符语法 @connect 2、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" //修饰符语法转换插件
]
}
webpack loader配置
babel-loader配置也相当简单，至于react-hot-loader在webpack中的配置，请自行查看文档。
module: {
rules: [{
test: /\.jsx?$/,use: 'babel-loader'
}]
}
总结
我始终相信，一个好的工程，应该尽量用简单的代码去解决简单的事情，而不是用复杂的代码去解决简单的事情。
很多人，包括我自己，在以前也经常被babel和webpack的配置搞的焦头烂额，特别是babel，经常报这个插件的错、那个插件的错，有时候不知道少了什么插件。
好了，现在不害怕了，因为babel配置原来如此的简单。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
