跳到主要内容

从Babel 7开始

Get going with the Babel 7

由于生态系统的宽度,JavaScript是独一无二的。虽然新的标准增加了语法糖,但让它们在浏览器上得到支持需要时间。Babel通过自动转移来解决这个问题。

产品背后的想法很简单:Babel采用ES6或ES7代码,用仿真代码替换新的语法元素。它的输出证实了经典的JavaScript语法,并且运行在更老的浏览器上,比如InternetExplorer。

巴贝尔的第一次释放震惊了整个世界。第一次出现后不久,Reaction、Vue和Ember等各种框架就采用了它。开发人员经常在不知道它在后台工作的情况下使用该产品-不止一个流行的NPM项目依赖Babel。

这些依赖将前辈的发布过程转化为一个充满冲突的事件。Version 7仍然由一个小型的维护团队管理,因此它试图尽可能地兼容。中断的更改很少,而代码生成的质量仍然很高。

如果你以前没有和巴贝尔合作过,那就让这个做你的向导吧。能够在不考虑兼容性的情况下使用高级JavaScript特性会使生活变得更容易。

01.版本检查

Babel通常生活在Node运行时环境中。让我们从检查所使用的版本开始。输出提供了用于创建以下文章的Ubuntu14.04工作站上的版本状态。这不是花哨的-这一步的图显示Babel团队放弃了对相当多的Node.js版本的支持。

Tamhan@tamhan-ThinkPad:~$节点-V8.14.0 Tamhan@tamhan-ThinkPad:~$NPM-版本6.4.1

02.更改包装名称

版本7中的一项重大更改涉及将Babel包移动到它们自己的名称空间中。旧包没有从各种存储库中删除。这一点很重要,因为使用遗留包名称会导致与此步骤相关的图中所示的情况。

Tamhan@tamhan-ThinkPad:~/workspaceB7$NPM安装-保存-dev@Babel/core@Babel/cli@Babel/预设-env@Babel/节点。。。+@Babel/core@7.2.0+@Babel/Node@7.2.0+@Babel/cli@7.2.0+@Babel/预设-env@7.2.0

03.添加生成操作

以上步骤假设您在NPM项目中工作。在这种情况下,通过构建操作运行Babel很容易。打开的package.json并修改它,如下代码所示:

{。。“main”:“index.js”,“script”:{“test”:“echo\”错误:无指定的测试\“&Exit 1”,“Build”:“Babel index.js-d lib”},

04.手动传输代码

让Babel开始工作需要启动构建操作。这最好通过npmrun命令来完成。这,这个,那,那个-d值通知Babel,结果必须放在LIB文件夹-伴随这一步的图形显示,文件夹是动态创建的。

tamhan@tamhan-ThinkPad:~/workspaceB7$NPM运行构建>workspaceb 7@1.0.0 build/home/tamhan/workspaceB7>Babel index.js-d lib成功地用Babel编译了1个文件。

05.配置问题

在没有进一步配置选项的情况下调用Babel并不能实现传递溢出。只有当框架接收到关于目标环境的更多信息时,代码才能被转移。这可以通过命令行参数来完成,或者通过创建一个名为.babelrc在项目根目录中。

06.配置babelrc

Babel通过一组插件进行配置,每个插件都将转换到代码库。我们使用预置-env包-它附带了一组预先配置的转换,旨在覆盖大部分基础。

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

07.测试驱动器的时间

在index.js中添加一些新的JavaScript来测试程序。此步骤附带的代码不能在遗留浏览器上工作-完成后,隐式函数将被替换为正常声明,如图所示。

函数tamstest(){[1,2,3].map(N)=>n+1);}

08.调整瞄准

预置-env默认情况下应用大多数转移溢出:该产品的目标是创建普遍兼容的JavaScript,而不考虑带宽和性能成本。您可以通过传入目标对象-下面的示例针对Chrome和IE的特定版本。

{
	"presets": [
		[
			"@babel/preset-env",
			{
					"targets": {
							 "chrome": "58",
							 "ie": "11"
					}
			}
		]
	]
}

09.先进瞄准

Babel的浏览器目标并不局限于Chrome和InternetExplorer。由于与.的合作浏览器列表,开发人员可以混合和匹配十几个目标,如下所示。

名称不区分大小写:

  • Android的用于Android WebView。
  • 百度用于百度浏览器。
  • 黑莓要么Bb黑莓浏览器。
  • 谷歌Chrome。
  • ChromeAndroid要么和chr用于Android的Chrome。
  • 边缘用于Microsoft Edge。
  • 电子用于电子框架。它将被转换成Chrome版本。
  • 探险家要么用于InternetExplorer。
  • 探索者移动要么聚众用于InternetExplorer移动。
  • 火狐要么法夫用于Mozilla Firefox。
  • FirefoxAndroid要么和夫用于Android的Firefox。
  • IOS版要么IOS SAF用于iOS Safari。
  • 节点用于Node.js.Opera。
  • 操作极小要么OP迷你为了小歌剧。
  • OperaMobile要么OP暴民歌剧院的手机。
  • QQAndroid要么和QQ用于Android的QQ浏览器。
  • 苹果浏览器用于桌面Safari。
  • 三星三星互联网。
  • UCAndroid要么和_uc用于Android的uc浏览器。

10。高级瞄准,第二部分

Browserlist还可以接受高级查询。其主页列出配置选项,几乎所有配置选项都可以通过修改在Babel内部使用。巴伯尔克。如果您的工作站安装了npx,则可以在本地评估查询。

{
	"targets": "> 0.25%, not dead"
}

11。自动溢出

不得不手工调用Babel很快就会变得单调乏味。nodemon实用程序监视文件系统资源,并在检测到更改时发出命令。从理论上讲,添加nodemon支持是通过对的package.json

{“名称”:“工作空间7”,。。。“main”:“index.js”,“script”:{“start”:“nodemon-exec Babel-node index.js”,

12。检查是否存在

一些工作站诺魔安装在全球。如果不是这样的话,调用程序将产生一个类似于下面所示的错误消息。幸运的是,诺魔通过Npm安装命令。

Tamhan@tamhan-ThinkPad:~/workspaceB7$NPM安装-保存-开发nodemon

13。检查功能

开火Npm开始在终端窗口中,然后继续更改Index.js像Gedit这样的编辑Visual Studio代码。在存钱之后,诺魔将输出状态信息。

[无恶魔]由于改变而重新开始.。[nodemon]启动`babel-节点index.js‘[nodemon]干净的出口-在重新启动之前等待更改

14。固定溢出

诺魔的检测应该完美无缺地工作在这一点上,Index.js中找到的文件LIB不要更新。这是由于巴贝尔节点-它不将已传送的文件提交到磁盘。相反,它会触发NodeCLI的修改版本,该版本可以处理被转移的文件。

15。以编程方式编写的Transpile代码

Babel并不局限于命令行的工作。如果安装了正确的包,代码也可以从另一个程序中传输。此步骤附带的代码段将一组基本转换应用于输入字符串。请记住,配置设置通常是从巴伯尔克文件。

var Babel=需要量(“@Babel/core”);从“@Babel/core”导入{Transform};从“@Babel/core”导入*as Babel;

16。全文件

源代码通常不会存储在字符串变量中。BabelAPI通过一组与文件相关的函数来解释这个问题,这些函数放弃了带有文件名的变量的输入字符串。但是,结果作为普通JavaScript变量返回。

[中英文摘要];

17。同步与异步

Babel 7引入了大多数API调用的同步和异步版本。确保为您的需要选择合适的一个-虽然可以动态地传递小示例,但在更复杂的文件上设置Babel可以很容易地导致延迟运行数十秒。

18。了解各个插件

如果你发现自己想知道背景发生了什么,只需访问这一页。它提供了目前包含在Babel发行版中的所有插件的列表,并为所有那些试图创建自己的插件的人提供了一些提示。

19。去掉打字稿的细节

Babel并不局限于转换新时代的JavaScript元素。该产品包含一个功能受限的类型记录引擎。它删除了键入信息并替换了高级元素。不幸的是,Babel没有执行类型检查-这就消除了类型记录语言最重要的优点之一。

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

20。在线运行Babel

虽然转移溢出操作通常运行顺利,但有时也会出现问题。在这种情况下,Babel REPL是有帮助的。它在您的工作站的浏览器中运行Babel,并显示输入和输出就在另一个旁边。

21。了解痛点

我们的介绍解释说,Babel在各个项目中都有广泛的应用。Babel的维护团队使用详细变更日志。如果以编程方式使用Babel,请不要忘记查阅API升级指南

这篇文章最初发表在“创意网页设计”杂志第283期。网页设计者在这里购买问题283要么在这里订阅Web Designer

相关文章:



翻译字数超限