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

Jeff 发布于2019-08-21 18:43 / 1097人阅读

摘要：下面提供具体的版本号给大家参考你相信吗上面个插件，就能生成图片上那几十个插件，这一切归功于插件之间的依赖关系。好了，现在不害怕了，因为配置原来如此的简单。

繁琐的配置？

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

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

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

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

快速理解babel 6 来看一张让人颤抖的babel插件图

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

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

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

只需要下面几个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-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配置原来如此的简单。

服务器托管私有云深入理解系列怎么理解前端工程师快速开发前端前端快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90747.html

库，组件，框架 - 收藏集 - 掘金

摘要：哈哈，我理解，架构就是骨架，如下图所示译年月个有趣的和库前端掘金我们创办的使命是让你及时的了解开发中最新最酷的趋势。翻译 | 上手 Webpack ? 这篇就够了！ - 掘金译者：小 boy （沪江前端开发工程师）本文原创，转载请注明作者及出处。原文地址：https://www.smashingmagazine.... JavaSrip... 读 Zepto 源码之代码结构 - ...

tommego 2019-08-20 16:33 评论0 收藏0
babel6 入门-配置安装使用_byKL

摘要：入门什么是是一个广泛使用的转码器，可以将代码转为代码，从而在现有环境执行。 babel6 入门什么是babel Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。因为es6比es5的代码更为适合编写程序,但是因为历史的原因,现在普遍的浏览器并不支持es6代码(普遍支持es5),即如果你写es6代码之后,在浏览器上运行出错,因为浏览器的javas...

qianfeng 2019-08-20 14:31 评论0 收藏0
babel基础配置

摘要：基础配置如下设置转码规则和插件字段设定转码规则，官方提供以下的规则集，按需安装。结合许多工具需要进行前置转码，如和在项目根目录下，新建一个配置文件，在其中加入字段。在之中，加入相应的脚本部分参考到底该如何配置 babel 标签（空格分隔）： babel babel Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 Babel 会在正在被转录的文...

UsherChen 2019-08-23 14:58 评论0 收藏0
Webpack初学遇到的问题

摘要：的功能包转译过程中使用到的插件，其中是步骤使用的。阶段使用到的一系列标准新增的原生对象和的，实现上仅仅是和两个包的封装。功能类似一般用于或者中，因为它不会污染全局变量引入图片资源时遇到的问题 Module parse failed: Unexpected character � (1:0) You may need an appropriate loader to handle th...

taoszu 2019-08-22 18:49 评论0 收藏0