Web前端最全史上最简单的Babel入门教程,2024年最新字节跳动客服面试情景模拟

最后

如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

touch index.js

一顿操作以后,我们新建的项目目录为:

/babel-basic

|- /src

|- index.js

|- package.json

然而,package.json 是最原始的配置,而 index.js 暂时没有代码:

{

“name”: “babel-basic”,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

“test”: “echo “Error: no test specified” && exit 1”

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {}

}

@babel/core


学习 Babel,首先要了解一个叫 @babel/core 的东西,它是 Babel 的核心模块,所以首先要安装:

npm i --save-dev @babel/core

安装成功之后就可以在我们的代码中使用了, 你可以采用CommonJS 的引用方式:

const babel = require(‘@babel/core’);

babel.transform(“code”, options);

这里的知识点有很多, 不过你不用急于的掌握它, 只需要知道它是Babel 的核心, 让我们接着往下看。

@babel/cli


这是一个终端运行工具,内置的插件,运行你从终端使用 babel 的工具。同样也需要安装:

npm i --save-dev @babel/cli

接着,在 src/index.js 中写一段简单代码:

const fn = () => 1; // 箭头函数, 返回值为1

console.log(fn());

用法一:命令行的形式

babel src --out-dir lib

这行代码的意思是:它使用我们设置的解析方式来解释 src 目录下的所有 js 文件,并将转换后的每个文件都输出到 lib 目录下。

但是,到目前为止我们并没有设置任何的解析方式,所以在执行这行代码后,能看到项目中多了一个 lib 目录,里面的代码和 src 目录中的是一致的。至于如何设置解析方式,就涉及到后面讲的 pluginspresets 了。

另外,还可以通过 npx babel src --out-dir lib 来代替上面的命令,两者的结果是一致的。

用法二:给 package.json 中配置命令:

{

“name”: “babel-basic”,

“version”: “1.0.0”,

“description”: “”,

“main”: “index.js”,

“scripts”: {

  •   "build": "babel src -d lib"
    

},

“keywords”: [],

“author”: “”,

“license”: “ISC”,

“devDependencies”: {

  •   "@babel/cli": "^7.8.4",
    
  •   "@babel/core": "^7.8.4"
    

}

}

运行 npm run build 效果也是一致的。上面的 -d--out--dir 的缩写。

plugins


plugins 的本质是一个 js 程序,指示着 Babel 如何转换代码,如何解析代码。

案例:

在上面的例子中,我们在 index.js 中写了一个箭头函数,然而箭头函数在低版本浏览器是不兼容的,所以得进行代码转换,将箭头函数转换为普通的函数,这里就涉及到怎么设置 babel 的代码解析方式了。

官方提供了一个插件,用于将箭头函数转换为普通的函数:

npm i --save-dev @babel/plugin-transform-arrow-functions

安装完成后就可以通过命令行的方式来运行:

npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

结果在 lib 目录中的代码被转换了:

const fn = function () {

return 1;

}; // 箭头函数, 返回值为1

console.log(fn());

虽然已经实现了箭头函数的转换功能,但是其他的 ES6+ 语法还是不能进行转换的,这是因为我们使用的这个插件仅仅支持函数转换。那么问题来了,ES6+ 有那么多语法,如果一个浏览器不支持 ES6+ ,那么我们不就需要安装很多这样的插件吗??

Presets


上面问题的答案显然是否定的,Presets 正是用于解决这种问题的。它是一组插件的集合,可以使用官方的,也可以自己自定义。

@babel/preset-env

这是一个将 ES6+ 转换为低版本代码的插件集合。

安装:

npm i --save-dev @babel/preset-env

比如:我们使用 ES7 的乘方运算符和函数参数支持尾部逗号:

const fn = () => 1; // ES6箭头函数, 返回值为1

let num = 3 ** 2; // ES7求幂运算符

let foo = function(a, b, c, ) { // ES7参数支持尾部逗号

console.log(‘a:’, a)

console.log(‘b:’, b)

console.log(‘c:’, c)

}

foo(1, 3, 4)

console.log(fn());

console.log(num);

命令行运行:

npx babel src --out-dir lib --presets=@babel/preset-env

结果,在 lib 目录下的代码进行了转换:

“use strict”;

var fn = function fn() {

return 1;

}; // 箭头函数, 返回值为1

var num = Math.pow(3, 2);

var foo = function foo(a, b, c) {

console.log(‘a:’, a);

console.log(‘b:’, b);

console.log(‘c:’, c);

};

foo(1, 3, 4);

console.log(fn());

console.log(num);

好了,到目前为止我们了解了 @babel/core@babel/clipluginspresets,但是你会发现一个问题,我们一直使用命令行的方式来执行代码,这显然不是简洁的方式,所以,接下来我们需要将这些复杂的命令做成配置项。

配置


在项目中创建一个 babel.config.js 文件:

const presets = [

[

“@babel/env”,

{

targets: {

edge: “17”,

chrome: “64”,

firefox: “60”,

safari: “11.1”

}

}

]

]

module.exports = { presets };

加上这个配置的作用是:

  • 使用了 env preset

  • env preset 只会为目标浏览器中没有的功能加载转换插件

现在,我们只需要使用命令 npm run build 这个命令就可以进行代码转换了。然而,你会好奇 Babel 是如何找到这个配置文件的呢?答案是默认情况下它会去项目的根目录找一个名为 babel.config.js 的文件(或者 babelrc.js)作为配置文件。

如何非得改这个配置文件的名称,那么我们的命令就需要带上参数了:

{

“scripts”: {

“build”: “babel src -d lib --config-file ./babel.config.js”

}

}

最后

如果你已经下定决心要转行做编程行业,在最开始的时候就要对自己的学习有一个基本的规划,还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标,然后为之努力,坚持到底。如果你有幸看到这篇文章,希望对你有所帮助,祝你转行成功。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值