零基础入门babel

零基础入门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官方提供的在线转换地址：https://babeljs.io/repl/（下图）

例子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;
});

开始使用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 //给浏览器添加不支持的功能。

通过若干时间的安装后，最后安装结果如下：

这个时候，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官网地址：https://babeljs.io/

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

课后作业：

babel是什么？

如何使用babel?

babel的功能有哪些？

实现一个简单的babel插件。

• 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）