BabelJS - Babel 预设

BabelJS - Babel 预设

Babel presets是 babel-transpiler 的配置详细信息,告诉它以指定的模式进行转换。以下是我们将在本章中讨论的一些最受欢迎的预设:

  • ES2015
  • Env
  • React

我们需要使用具有我们希望转换代码的环境的预设。或者例如,es2015 preset 会将代码转换为 es5。带有值 env 的预设也将转换为 es5。它还具有附加功能,即选项。如果您希望最新版本的浏览器支持该功能,只有当这些浏览器不支持该功能时,babel 才会转换代码。使用 Preset react,Babel 将在何时做出反应时转译代码。

要使用预设,我们需要在项目根文件夹中创建 .babelrc 文件。为了显示工作,我们将创建一个项目设置,如下所示。

npm init

我们必须安装所需的 babel 预设,如下所示以及 babel cli、babel core 等。

Babel 6 packages

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Babel 7 Packages

npm install @babel/cli @babel/core @babel/preset-env --save-dev

注意 - babel-preset-es2015 从 babel 7 开始被弃用。

es2015 or @babel/env

在项目根目录下创建 .babelrc 文件(babel 6)

在 .babelrc 中,预设是 es2015。这是向 babel 编译器的指示,我们希望将代码转换为 es2015。

对于 babel 7,我们需要使用预设如下

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

这是安装后的package.json

由于我们在本地安装了 babel,所以我们在 package.json 的 scripts 部分添加了 babel 命令。

让我们用一个简单的例子来检查使用预设 es2015 的转译。

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

转译为 es5,如下图所示。

npx babel main.js --out-file main_es5.js

main_es5.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Env

使用 Env 预设,您可以指定最终代码要转译到的环境。 我们将使用上面创建的相同项目设置,并将预设从 es2015 更改为 env,如下所示。

另外,我们需要安装 babel-preset-env。我们将执行下面给出的命令来安装它。

npm install babel-preset-env --save-dev

我们将再次编译 main.js 并查看输出。

main.js

let arrow = () => {
   return "this is es6 arrow function";
}
npx babel main.js --out-file main_env.js

main_env.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

我们已经看到转译后的代码是 es5。如果我们知道我们的代码将在其中执行的环境,我们可以使用这个预设来指定它。例如,如果我们将浏览器指定为 chrome 和 firefox 的最后 1 个版本,如下所示。

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

我们现在得到了箭头函数的语法。它不会被转译成 ES5 语法。这是因为我们希望我们的代码支持的环境已经支持箭头功能。

Babel 负责使用 babel-preset-env 编译基于环境的代码。我们也可以基于nodejs环境进行目标编译如下图

代码的最终编译如下图所示。

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Babel 按照当前版本的 nodejs 编译代码。

React Preset

我们在使用 Reactjs 时可以使用 react preset。我们将处理一个简单的示例,并使用 react preset 来查看输出。

要使用预设,我们需要安装 babel-preset-react (babel 6) 如下

npm install --save-dev babel-preset-react

对于 babel 7,如下

npm install --save-dev @babel/preset-react

babel6 对 .babelrc 的改动如下

对于babel 7

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

main.js

<h1>Hello, world!</h1>
npx babel main.js --out-file main_env.js

main_env.js

React.createElement(
   "h1",
   null,
   "Hello, world!"
);

main.js 中的代码使用预设:react 转换为 reactjs 语法。

版权声明:著作权归作者所有。

相关推荐

使用ANDROID_ID唯一标识Android设备

使用Settings.Secure#ANDROID_ID 会返回每个用户唯一的64位hex字符串,它是在设备首次boot时生成。我们可以使用它来唯一标识Android设备。import android.provider.Settings.Secure; private String android_id = Secure.getStri

PHP7设置和删除cookie

PHP设置和删除cookie都是使用setcookie函数:bool setcookie ( string $name [, string $value = "" [, int $expire = 0 [, string $path = "" [, string $domain = "" [, bo

设置Log4j显示的日期格式

一个简单的log4j配置如下:log4j.rootLogger=DEBUG, console log4j.appender.console=org.apache.log4j.ConsoleAppender log4j.appender.console.Target=System.out log4j.appender.console.layout=org.apache.log4j.Patt

CSS设置placeholder字体样式

CSS标准里是没有直接对placeholder设置样式的选择器,这里主要是通过各个浏览器的兼容前缀来给输入框的placeholder设置字体样式。/* WebKit browsers*/  input::-webkit-input-placeholder {    color:#999;     font-s

Jackson设置JSON的日期格式

Jackson使用ObjectMapper解析JSON数据,如果需要设置JSON日期格式,可以使用ObjectMapper的setDateFormat方法设置:ObjectMapper om = new ObjectMapper(); om.configure(Feature.WRITE_DATES_AS_TIMESTAMPS, false); o

Maven设置项目JDK版本为1.8

导入一个项目到iDEAL,项目中使用到lambda表达式的地方都报错,提示jdk版本不对。想到的第一种解决方案就是修改iDEAL的配置,修改两处的设置,如下:File → Settings → Java Compiler → Target bytecode version 改为1.8File → Project Structure → Modules → Language level 改为 8-L

Linux设置命令行ip代理

Linux设置命令行代理 有些场景下需要为系统设置代理,比如OpenCV3在进行cmake编译时需要在线从amazon下载一些第三方包。现在多数同学采用的代理方案应该都是基于socks5协议,而默认的终端工具支持的代理类型都是http或https,所以这里需要socks协议到http协议的转换,转换之后采用终端的代理变量设置http代理即可。 我的系统环境为ubuntu 16.04,其他系统类似

Pytorch Dataloader的num_workers设置建议

Dataloader 参数设置示例:Dataloader(dataset, num_workers=8, pin_memory=True)Dataloader的num_worker设置多少才合适,这个问题是很难有一个推荐的值。有以下几个建议:num_workers=0表示只有主进程去加载batch数据,这个可能会是一个瓶颈。num_workers = 1表示只有一个worker进程用来加载batc

VS Code设置自动保存

 Visual Studio Code编辑文件,默认情况下自动保存是关闭的,我们必须手动保存它。这里介绍如何在 Visual Studio Code 中设置编辑器自动保存。设置自动保存在Visual Studio Code 找到与自动保存相关的设置。请单击“文件”菜单中的“首选项”,然后单击显示的子菜单中的“设置”。 将显示 Visual Studio Cod

CKEditor 5设置编辑器高度

CKEditor 5提供的几种编辑器,它们的高度是随着内容变化的,官方没有提供设置编辑器高度的参数配置。如果要给编辑器固定高度有以下两种做法。对于经典版(classic editor build),可以通过CSS:.ck-editor__editable_inline {  height: 200px;}对于所有版本,可以通过js来设置:editor.editing.view.chang