保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

反应巴别:您需要了解的一切

关于React Babel的简介:

反应巴别是一个非常著名且实现良好的JavaScript开源转编译器。我们主要使用它来将ECMA脚本代码转换为JavaScript版本。而且,这是向后兼容性,也可以由许多版本的JavaScript运行。它在开发人员中非常流行。我们还可以将其用于JavaScript的新功能作为一种编程语言。

开发人员可以轻松地使用Babel将其源代码转换为JavaScript版本。结果,新的浏览器在此过程中没有任何困难。通天塔可以做许多其他有力的事情,值得探索。

 

安装React Babel:

Babel的npm模块是babel-core。而且,我们将以不同于React和React DOM的方式安装babel-core。因此,而不是使用命令npm install–保存babel-core,我们将使用命令npm install–save-dev babel-core。这样做的原因是,我们将仅在用于开发的模式下使用Babel。当该React应用程序交付生产时,不需要任何转换。另外,–save-dev标志仅出于开发版本的目的为npm保存模块。就像我们可以写–保存为-S,我们可以写–将dev保存为-D。我们还可以安装其他两个与Babel相关的模块,即babel-loader和babel-preset-react。 

 

组态:

预设可以配置Babel。在这里,这些预设几乎可以移植所有Web技术。这些技术可供我们使用,包括css,jsx,js等。在这里,我们将看到如何利用react和env这两个预设。 Package.json甚至cli都可以配置Babel。但是我们最喜欢使用package.json进行配置。预设基本上就像模块,可以帮助我们将一种语言转换成另一种语言。 

反应巴别

接下来要做的是将上述几行添加到package.json文件中。在那之后,它只会让React Babel知道这些特定的预设用于转送。

 

Webpack for Babel的配置:

现在,我们要做的是配置Webpack以便与Babel一起使用。为此,我们将使用babel-loader。 Webpack为我们提供了处理文件的有价值的挂钩。对于我们开发人员来说,这些新模块非常有用且易于配置。规则很简单,指定了遇到特定文件时应采取的措施。文本键指定文件正则表达式。并且,我们将使用它来选择所有扩展名为.m和.js的文件。但它’ll排除诸如node_module和bower_components之类的文件夹。这是因为我们不’如果我们已经指定了babel-loader,则想转译node_module文件。

 

利用CSS文件:

为了在CSS中使用Babel,我们将使用Babel的style-loader和css loader。使用键还可以采用由对象组成的数组,也可以由字符串组成。由于我们的加载程序是从最后到第一个首先加载的,因此我们的填充将进入CSS加载程序。结果,它使我们的css独占了导入它的一个组件。 CSS的加载程序将解析CSS文件中的所有导入。之后,样式加载器将这些样式以样式标签的形式添加到头部。

 

Babel插件:

Babel的预设和插件是Babel配置的详细信息。我们将这些用于转载代码的目的。 Babel支持许多插件。如果我们知道要执行的环境和代码,我们也可以单独使用它。

 

Babel Polyfills:

Babel CLI向我们介绍了许多功能。这些功能基本上包括方法和对象。但是我们可以’请勿将其用于移植目的。 

 

使用Babel的优势:

  1. 基本上,Babel为JavaScript中新添加的所有功能提供向后兼容性。这些与现有的任何浏览器兼容。
  2. Babel具有这种独特的能力,可以进行转译并将其提升到一个新的水平。它需要即将发布的JavaScript版本和尚未发布的版本。
  3. Babel非常通用,我们可以将其与gulp,webpack,react,打字稿,流程等配合使用。结果,这使其成为非常强大的工具,可用于非常大的项目。而且,它使开发人员的生活更加轻松。 
  4. 就语法而言,它还可以与React JSX一起使用。并且,我们可以用JSX格式很好地编译它。
  5. 许多插件和polyfills支持babel,这使开发人员可以很轻松地工作。

巴别塔的缺点:

  1. Babel可以在转换时更改语法。因此,它’在编码上要困难得多。此外,产品在生产后发布时甚至很难理解代码。
  2. 与原始代码相比,大多数情况下,已编译的代码的大小要大得多。
  3. 由于Ecma脚本中将包含新功能,因此变得更加难以移植。因此,我们需要使用polyfill,以便它可以支持所有其他浏览器。

结论:

在本文中,我们了解了很多有关React Babel以及如何安装它的知识。我们还讨论了React Babel的配置以及如何实现它以与React Webpack一起使用。但是可能会很详细,这只是它的概述。我们可以根据需要在配置中进行无数的更改。这是因为它是高度可定制的。我们需要记住,我们必须对项目中要使用的每个文件使用加载程序。还有更多与Babel兼容的技术,我们可以根据需要自由使用它们。

当您要设置自己的React项目时,自定义和优化更新依赖关系非常容易。从EcmaScript 2015推出之日起,JavaScript社区几乎每年都会引入新版本。结果,我们必须在Babel中获得翻译功能。我们希望本文能够帮助您进一步了解Babel。

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。