零基础入门babel

681 阅读3分钟

零基础入门babel

目录

- 1 本文所涉及的学习环境:

- 2 本文读者对象

- 3 概述

- 4 正文

- 4.1 什么是babel?

- 4.2 首次试用babel

- 4.3 开始使用babel

- 5 附录:

- 6 课后作业:

本文所涉及的学习环境:

系统环境:win10

编码软件:VS code

浏览器:chrome,Firefox,safari等现代浏览器。

babel版本:7.x

npm版本:6.9.0

本文读者对象

有一些计算机基础知识的初学者。

学习过JavaScript。

概述

本文是关于如何入门babel,即使完全不懂babel的新手也能看懂,希望尽可能的能帮助大家入门babel。

吃码小妖:官网文档更适合入门后当手册查阅,而不适用于初学者入门的,所以才写了这篇文章。

本文写作时间:2020年4月30日。

正文

什么是babel?

babel的发音是美 [ˈbeɪbl] 。

可以简单的理解为JavaScript的转换器。

我们的JavaScript每年都有新功能出现,但是使用JS的浏览器却并不是及时同步更新的。同时,我们的用户也不会经常更新浏览器版本。

所以,如果我们需要使用一些JS新功能时,就必须将新功能的JS代码转换为大部分现代浏览器能运行的JS版本。也就是babel的主要作用了,主要将ES6+的JS代码转换为ES5代码。

babel也是起到过渡作用,等浏览器更新换代到一定程序,它的使命也就结束了。如同IE6时代的结束,解放了我们,不需要再写一些复杂斑驳的兼容代码一样。

首次试用babel

我们可以先看看babel的效果。

通过babel官方提供的在线转换地址:babeljs.io/repl/(下图)

图片.png

例子1:ES5是没有let和const的,只有var来声明变量。

这里用的一个小例子:

let name = "cat";

立刻将let转换为var了。

var name = "cat";

例子2:ES6新加了箭头函数。

let name = "cat";[1,2,3].map(val => val + 1);

转换后变为:

"use strict";

var name = "cat";
[1, 2, 3].map(function (val) {
  return val + 1;
});

图片.png

开始使用babel

我们平时都是在项目中使用babel。这样只需要一次配置,就足够使用了。

1、首先安装一些库。

在命令行中输入下面的代码,也就是cmd.exe中。cmd.exe可以通过win+s输入找到。

npm  i -d  babel-loader @babel/cli @babel/core @babel/polyfill  @babel/preset-env 

解释说明:

npm 是安装库的工具。具体用法可以到它的官网去学习。这里只简单的介绍一下。

npm i 是npm install 的缩写,也就是安装的意思。

npm i -d 是将库信息保存到package.json.js中。便于下次的安装复用。

babal-loader //webpack所需要的loader转换器。

@babel/cli //从终端运行Babel。

@babel/core //babel的核心代码。

@babel/preset-env //转换ES6+为ES5的库

@babel/polyfill //给浏览器添加不支持的功能。

通过若干时间的安装后,最后安装结果如下:

图片.png

这个时候,babel和它需要的库都安装好了,接下来配置它的选项。

2、配置babel。

在项目根目录创建一个 .babelrc 文件。内容如下:

{
    "presets":["@babel/preset-env"]
}

或者:在package.json中。

{
    "name": "test",
    "version": "1.0.0",
    "babel": {
        "presets": ["@babel/preset-env"] 
        // "plugins": ["babel-plugin-myPlugin"], 
    } 
    }

一行代码配置完毕。简单吧。

3、结合webpack使用babel。

通过配置webpack.config.js,按照下面的代码就可以了。

module: {
    rules: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
    }]
}

解释说明:

test:后面是用于匹配文件的正则。

exclude:顾名思义就是排除我们不需要解析的文件夹。也是正则语法。

loader:就是我们用到的loader转换器。

点个赞吧,爱你呦。(づ ̄3 ̄)づ╭❤~

如有任何疑问,欢迎在下面留言。

附录:

babel官网地址:babeljs.io/

babel在线转换地址:babeljs.io/repl/

课后作业:

babel是什么?

如何使用babel?

babel的功能有哪些?

实现一个简单的babel插件。