繁琐的配置?
你能快速读懂 babel 的官方文档吗?
你能根据官方文档快速配置好 babelrc 吗?
你能明白自己需要哪些插件吗?
没有搞明白这 3 个问题,请往下看.
快速理解 babel 6
来看一张让人颤抖的 babel 插件图
下图仅仅截取了部分,一屏都截取不完,还有 babel 插件隐藏在下面,你害怕了吗?
忘记上面的图吧,那是罪恶之源
当你忘记一切的时候,你只需要理解几个基本的东西即可.
只需要下面几个 babel 插件,就能解析大部分 ES 方法
上面 6 大插件添加到 package.json,便可完成一个普通开发者的需求了,那么,如果是个 react 开发者,则还需要添加下面几个插件
,babel - core //必备的核心库
,babel - loader //webpack loader配置必备
,babel - preset - env //有了它,你不再需要添加2015,2016,2017,全都支持
,babel - preset - stage - 0 //有了它,你不再需要添加stage-1,stage-2,stage-3,默认向后支持
,babel - plugin - transform - runtime,babel - runtime //5和6是一起使用的,支持helpers,polyfill,regenerator配置
如果你想要支持热更新呢,还需要一个插件
,babel-plugin-transform-decorators-legacy //支持修饰符语法 @connect
,babel-preset-react //支持解析react语法
1,react-hot-loader //虽然它长得不像babel,但是它也需要在babelrc做配置
其他插件呢?
从我的感受来看,上面这几个插件的集合已经覆盖了大部分 ES 语法了,如果是 vue 开发者,则把 react 的替换成 vue.通常我们不再需要考虑其他插件.
这些插件的具体版本号
请注意,babel 插件一直在更新,至今已经出了 babel7.而本章内容是介绍 babel6,请不要乱用版本.
下面提供具体的版本号给大家参考
你相信吗?上面 10 个插件,就能生成图片上那几十个插件,这一切归功于插件之间的依赖关系.
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.3",
"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",
babelrc 配置
现在,你只要考虑上面列举的插件以及版本号,就能把 babel 快速配置出来了,相当简单
webpack loader 配置
{
"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" //修饰符语法转换插件
]
}
babel-loader 配置也相当简单,至于 react-hot-loader 在 webpack 中的配置,请自行查看文档.
总结
module: {
rules: [{
test: /\.jsx?$/,
use: 'babel-loader'
}]
}
我始终相信,一个好的工程,应该尽量用简单的代码去解决简单的事情,而不是用复杂的代码去解决简单的事情.
很多人,包括我自己,在以前也经常被 babel 和 webpack 的配置搞的焦头烂额,特别是 babel,经常报这个插件的错,那个插件的错,有时候不知道少了什么插件.
好了,现在不害怕了,因为 babel 配置原来如此的简单.
3 小时前发布
来源: https://segmentfault.com/a/1190000012753134