Babel是什么?

2019-08-14 10:02:07来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

要是官方文档写得好的话,我也许就不用自己做个笔记。

官方文档

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情:

1、语法转换

2、通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

3、源码转换 (codemods)

4、更多! (查看这些 视频 获得启发)

PS:https://www.babeljs.cn/docs/

指南文档第一篇关于babel的解释,就有三个问题:

1、第2句中“通过 Polyfill 方式”这一段。在解释一个概念时,引入自己的内容细节作延伸解释,会让人产生另一个疑问,这东西又是什么?它该回答的是这是什么,而不应该包含这怎么做。

2、第4句的更多查看视频的,更让人无语。我从没看过一个框架、库或工具,是需要读者看视频来总结该东西的功能的。连一个工具的功能都不能简洁说明,实在不明白写文档的人在想什么。

3、文档组织缺少逻辑,比较零散。例如指南刚说了Babel的功能,下面却写了一些插件的使用方法,以此反向引出Babel的功能,即散乱,又不全面。

Babel是什么

Babel是将ES6及以上版本的代码转换为ES5的工具。

它用 babel.config.js 或 .babelrc 文件作为配置文件,其中最为重要的配置参数是presets和plugins。

plugins:Babel插件可以将输入源码进行转换,输出编译后的代码。

presets:一组Babel插件,目的是方便使用。官方已经内置了一些preset,如babel-preset-env。

PS:其他的查看Babel文档就行。

现学现用

以 .babelrc 配置文件为例,解释常用的用法。

例子一:

{
   "presets": [["es2015", { "modules": false }]],
   "plugins": [
     [
       "component",
       {
         "libraryName": "element-ui",
         "styleLibraryName": "theme-chalk"
       }
     ]
   ]
}

PS:ES2015 = ES6

这个Babel配置:

1、使用 babel-preset-es2015(简写为es2015)将ES6的代码转为ES5。

PS:https://www.npmjs.com/package/babel-preset-es2015

2、“ modules: false”,是不把模块转换成其他模块类型("amd" | "umd" | "systemjs" | "commonjs" | "cjs" )。

3、”component",其实也就是 babel-plugin-component 插件,它是将组件的引用代码进行转换。

PS:https://www.npmjs.com/package/babel-plugin-component

Converts
import { Button } from 'components'
to
var button = require('components/lib/button’)
require('components/lib/button/style.css')

例子二:

{
 "presets": [
   ["env", {
     "modules": false,
     "targets": {
       "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
     }
   }],
   "stage-2"
 ],
 "plugins": [],
 "env": {
   "test": {
     "presets": ["env", "stage-2"],
     "plugins": ["istanbul"]
   }
 }
}

这个Babel配置:

1、使用 babel-preset-env 将ES6的代码转为ES5。presets里的“env” 是模块名称,作为第一个参数,第二个参数是该模块的传入参数。

虽然 babel-preset-es2015 与 babel-preset-env 的功能类似,但推荐使用 babel-preset-env ,babel-preset-es2015已不建议使用。

PS:详细参数解释请看https://www.npmjs.com/package/babel-preset-env,比官方文档写得更清晰。

2、presets设置了env和stage-2,模块的执行顺序是从下至上,从高级版本到低级版本。这很好理解,例如代码里包含ES7和ES6的语法,那你肯定得先转换ES7,再转换ES6,因为ES7的代码可能转换成ES6的代码。

3、根层级的“env”,则是在不同NODE_ENV参数下,另一套生效的Babel配置。如里面的“test”所配置的,就是在 NODE_ENV=test 时的Babel配置。

PS:babel-plugin-istanbul请看https://www.npmjs.com/package/babel-plugin-istanbul

总结

要是想看babel的一些插件的具体用法,建议是直接在npm上看,Babel的文档看起来实在难受。 


原文链接:https://www.cnblogs.com/lovesong/p/11109002.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Vue学习之Webpack基本使用小结(十三)

下一篇:Vue学习之路由vue-router传参及嵌套小结(十)