suukii/articles

记录自己的学习轨迹

Now is no time to think of what you do not have. Think of what you can do with what there is.

articles's Issues

厘清各种 Babel 概念: `babel-core` 和 `@babel/core` 是什么关系？`@babel/preset-env` 有什么用？

babel-core 和 @babel/core 有什么区别？

本质上，@babel/core 就是一个新版本的 babel-core。之所以改了名字，是因为 Babel 团队希望能把官方的模块和社区的模块区分开来，所以从 Babel7 开始，Babel 就使用了 scoped packages 的方式，将官方的模块名统一由 babel- 改为 @babel/。

@babel/core 有什么用？

Babel 是一个编译器，负责将 ES6 转换成 ES5，或者你也可以转换成 ES3。

更准确地说，Babel 是一个 transplier(or source-to-source compiler)，一般 compiler 是将高级语言转换成机器语言，而 transpiler 则是将高级语言转换成另一种高级语言，比如 Babel 将 ES6 转换成 ES5。TypeScript 编译器也是一个 transpiler，将 TypeScript 转换成 JavaScript。

而 @babel/core 是 Babel 的核心库，它的编译工作可以分为 3 个阶段：

1. parsing: 将 JS 源码解析成 AST
2. transforming: 对生成的 AST 进行修改
3. generating: 将修改后的 AST 转换成 JS 代码

其中第二步 transforming 就是将 ES6 转换成 ES5 的关键，但 @babel/core 在这一步其实什么都没做。如果单用 @babel/core 来编译 JS，我们得到的编译结果和源码是一模一样的。想要对源码进行转化，就必需引入 plugin 或者 preset。

plugin 和 preset 是什么？

Babel 的官网也说了，Babel doesn’t do anything out of the box，所有的事情是通过引入 plugin 和 preset 来完成的。

plugin

举个例子，如果我们在源码中使用了箭头函数语法，而低版本的浏览器可能并不支持箭头函数语法。我们就需要引入 Babel plugin @babel/transform-arrow-functions 来完成这个任务。

每个 plugin 都是一个独立的 npm 包，使用时，我们只需要通过 npm 下载并通过配置文件告诉 Babel 在编译过程中要用哪些 plugin 来对源码进行处理。

但是，每个 plugin 只负责一件事，比如 @babel/transform-arrow-functions 就是将箭头函数转换成普通函数。但 ES6 的新特性那么多，我们总不能每用到一个新特性就手动引入一个 plugin 来处理它们吧，这不合理呀，于是 preset 就出现了。

preset

实际上，preset 就相当于一堆 plugin 的集合。为了让我们不用一个一个 plugin 地安装，Babel 就把一些常用的 plugin 打包成了一个 preset。我们只要安装某个 preset，就相当于安装了 preset 中的所有 plugin。每个 preset 也都是一个独立的 npm 包。

Babel 官方的 perset 有以下 4 个，另外社区也有很多 preset，你甚至还可以写一个自己的 preset：

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

@babel/preset-env 有什么用？

@babel/preset-env 是官方的一个 preset。

在使用 plugin 的时候，我们需要什么功能就要引入对应的 plugin，而在使用 preset 的时候，完全不需要这么麻烦。

使用 @babel/preset-env 的时候，我们只需要通过配置文件告诉 Babel，我们想要支持哪些环境，是浏览器还是 Node，是哪些版本的浏览器，Babel 就会根据这些配置合理地对代码进行编译。

配置项可以在 .babelrc 或者 package.json 文件中指定，也可以使用 .browserlistrc 文件。

如果没有配置，Babel 就会根据默认配置来进行编译。(这是不推荐的用法)

浏览器版本越低，支持的功能就越少，如果我们要兼容这样的浏览器，需要进行编译的源码也就越多，编译后的代码量就会很大。如果我们合理地设置需要支持的浏览器，Babel 会根据这个设置合理地编译源码，浏览器都支持的功能就不需要再编译了，代码量就减少了。

@babel/polyfill 和 core-js 的关系是什么？

长话短说

首先，@bable/polyfill 已经是 deprecated 了(从 Babel7.4.0 开始)，官方文档现在推荐使用 core-js/stable(用于支持 ES 新特性) 和 regenerator-runtime/runtime(用于支持 generator 语法) 来替代。

为什么 @babel/polyfill deprecated 了？

@bable/polyfill 本来是 core-js 和 regenerator-runtime 的结合体，但是因为它跟 core-js@2 耦合太深，难以升级到 core-js@3，所以被放弃了。

什么是 core-js？

core-js 的特点之一就是模块化，它把各个功能的 polyfill 拆分成模块，这样便于按需引入。

.babelrc 配置文件

.babelrc 是 Babel 的配置文件，我们把这个文件放在项目的根目录下，来告诉 Babel 要使用哪些 plugin 或者 preset。

命令行介绍

命令行

定义

命令行，就是一个可以让你输入计算机命令的地方(一个程序)。

找到命令行

Mac OS X

在 /Applications/Utilities/ 文件夹下找到一个叫做终端(Terminal)的程序。

Linux

• KDE: click K button -> select System -> click on Konsole
• Gnome: click the Application button -> select System Tools -> click on Terminal

Windows

Windows 系统自带的命令行工具并不是标准的命令行工具(难用很多)，所以我们得自己另外下载一个命令行工具。eg. Babun

命令语法

命令都由 3 个部分组成：命令、选项、参数，其中 命令 是必需，后两者则不是。

ls -l ~/Desktop

• ls 是命令，用来指示计算机做什么，可以单独使用。
• -l 是选项，用来稍微修改命令的行为，比如显示多点信息还是少点信息，以一或两个 - 开始。
• ~/Desktop 部分是参数。

基础命令

注：以下命令中，$CAPITAL 部分指参数。

man $UTIL

manual，提供命令的名称作为参数，可以查看该命令的用法。

ls $DIR

list，打印指定文件夹下的内容，如果没有指定参数，则打印当前文件夹下的内容。可以通过指定 -l 选项来打印更详细的信息。

cd $DIR

change directory，进入指定文件夹。

pwd

print working directory，打印当前文件夹完整路径。

less $FILE

打印指定文件的内容，按 Q 可以回到命令行模式。

cp $FILE $LOCATION

copy，复制指定文件到指定路径。

mv $FILE $LOCATION

move ，移动指定文件到指定路径。

rm $FILE

remove，永久删除文件，没有办法恢复。

sudo $CMD

super user do，它的参数是另一个完整的命令行，包括命令、选项、参数。使用 super user 的身份执行某个命令。

计算机会限制普通用户进行某些操作，比如删除某些文件，但 super user 不受此限制。

小技巧

按 Tab 自动补全命令

比如输入 cd Desk，按 Tab 按键，命令行会自动把命令补全 cd Desktop。

快捷键

• 使用上下箭头按键可以切换最近输入的命令
• 使用 ~ 可以表示根目录。

危险的命令

sudo rm -rf /

会把计算机里所有的文件都删掉，无法恢复。

:(){ :|:& };:

这个东西叫做 fork bomb，它会一直执行，不断请求资源，最终耗尽计算机的资源，导致计算机无法响应，不过重启可以解决这个问题。

further reading

• http://matt.might.net/articles/basic-unix/

作者你好，我想参加91天算法，但是时间已经过了，我想有偿购买算法讲义，不知道你能否发个联系方式？