《深入理解ES6》阅读笔记 --- babel

《深入理解ES6》阅读笔记 --- babel

《深入理解ES6》阅读笔记并不会照搬书上的内容,因为我觉得那很无趣,这些读书笔记会贯穿我自己所积累的知识和理解,而今天要给大家写一写babel。(2017年10月3日,更新babel的配置讲解)

时间:2017年10月3日,使用npm install babel-preset-es2015出现的Deprecated

babel-preset-es2015@6.24.1: We're super 😸 excited that you're trying to use ES2015 syntax, but instead of making more yearly presets 😭 , Babel now has a better preset that we recommend you use instead: npm install babel-preset-env --save-dev. preset-env without options will compile ES2015+ down to ES5 just like using all the presets together and thus is more future proof. It also allows you to target specific browsers so that Babel can do less work and you can ship native ES2015+ to user 😎 ! We are also in the process of releasing v7, so please give http://babeljs.io/blog/2017/09/12/planning-for-7.0 a read and help test it out in beta! Thanks so much for using Babel 🙏, please give us a follow on Twitter @babeljs for news on Babel, join http://slack.babeljs.io for discussion/development and help support the project at opencollective.com/babel

现在你需要的是 install babel-preset-env ,并且卸载掉之前的babel-preset-es2015。

查询如何配置

(如果你是第一次听说到babel不要害怕,继续往下看,我保证配置会非常简单),我应该不会写任何配置代码,授人以鱼不如授以渔,我会教会你如何通过官方找到你想要的内容。打开这个网站 babeljs.io/ 你会看到babel的简单介绍 Babel is a JavaScript compiler,看样子是需要Node.js的支持了。(至于怎么安装Node.js可能要你自行Google了,我会默认你已经安装好了Node.js。)不管你用Webpack还是gulp,你都可以通过Docs -> Setup(菜单上)来找到对应的构建工具支持:

点击Webpack看看,😊。

高级篇

【下图,通过点击Webpack而来。】

试着通过从2-4步骤编写一个简单的例子,比如:

let name = 'icepy'  // -> index.js

看看这个文件是如何运行的,如果运行成功的话,那么恭喜你完成了第一步,接下来你要学习到如何配置preset和plugins了。

这两个URL你可以通过Docs -> plugins 以及在.babelrc这里点击env preset。现在的babel将核心功能通过preset 和 plugin 来配置,正常情况下,你只需要配置 env 即可,默认情况下env会与最新的preset表现一致。

举例:

const profile = { name: 'icepy', id: 'nices'}
console.log(...profile)

Experimental Presets

如果你仔细阅读过文档,你应该可以发现有Stage 0,Stage 1这样的字样,Stage 目前来说是按照JavaScript提案来区分的,数字越小,说明提案的时间与现在的时间越接近,这也意味着Stage 0 包含所有的 Stage,这些预设选项,你都可以通过配置来让其工作。

plugin

当然你也可以通过plugin找到对应的插件,如果你有兴趣,不妨阅读一下 github.com/babel/babel- 这个文件。

{
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

输出配置

当你对编译输出的代码有环境上的需求时,你还可以通过Options来开启一些额外的功能:

presets:['env',{ //Options }]

比如此刻我想设置一下我的代码需要支持的环境,你可以如此配置:

presets:['env',{
  targets:{
    node: 'current'
  }
}]  

又比如我想设置一下模块的支持,当然默认就是支持commonjs的,如果你想还回到过去,比如amd,那么你就需要设置这个modules属性了。

presets:['env',{
   modules: 'amd'
}]

babel的东西不多,基本上如何配置你都可以在官网上找到答案,尝试着用一下吧。如果你对编写插件或preset有兴趣,你也可以阅读 babeljs.io/docs/plugins 或者 babeljs.io/docs/plugins 来找到你想要的答案。

编辑于 2018-08-12

文章被以下专栏收录