零基础入门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许可证）
**