React系列——快速理解babel6配置过程

WalkerElvis 发布于13天前 阅读46次
0 条评论

繁琐的配置?

你能快速读懂babel的官方文档吗?

你能根据官方文档快速配置好babelrc吗?

你能明白自己需要哪些插件吗?

没有搞明白这3个问题,请往下看。

快速理解babel 6

来看一张让人颤抖的babel插件图

下图仅仅截取了部分,一屏都截取不完,还有babel插件隐藏在下面,你害怕了吗?

React系列——快速理解babel6配置过程

忘记上面的图吧,那是罪恶之源

当你忘记一切的时候,你只需要理解几个基本的东西即可。

只需要下面几个babel插件,就能解析大部分ES方法

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-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",

你相信吗?上面10个插件,就能生成图片上那几十个插件,这一切归功于插件之间的依赖关系。

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配置原来如此的简单。

查看原文: React系列——快速理解babel6配置过程

  • yellowwolf
  • browngoose
  • organicbird
  • crazylion
  • organickoala
  • goldenladybug
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。