本文最初是由Salem Olorundare在Honeybadger Developer Blog上撰写的。

如果我告诉您，即使在浏览器支持之前，您可以使用代码中的所有现代JavaScript功能怎么办？在过去的几年中，JavaScript经历了许多更改，包括Promises，React，Arrow功能，传播运算符以及键入Javascript（例如Typescript和Flow）等框架中使用的JSX。

。

JavaScript在浏览器中运行，因此需要浏览器支持才能正确解释和执行这些新功能。浏览器中新的JavaScript功能的集成需要时间，并且如果没有浏览器支持，JavaScript代码将无法执行。

编码工具（例如Babel）是解决此问题的解决方案。在本文中，您将学习以下内容：

• Babel是什么以及为什么使用它。
• 编译和转移的过程。
• 什么是Sucrase。
• Babel和Sucrase的一些替代品。

Babel是什么，它做什么？

Babel是一个免费的开源JavaScript编译器。它将您的ES6+（现代JavaScript）代码转换为ES5浏览器友好的代码，因此您可以在无需等待浏览器支持的情况下便利地使用JavaScript的新功能代码。

随着JavaScript随着新功能的添加和升级而更改，开发人员采用并使用这些新功能来构建其应用程序。不幸的是，有些浏览器不支持这些新更改。较旧的浏览器无法运行JavaScript的新功能，因为它们尚未更新或增强以处理此类任务。

以使用打字稿来构建Web应用程序。 Typescript是基于JavaScript的编程语言。为了运行Typescript代码，必须首先将其编译到Plain JavaScript中。这样做的原因是，由于浏览器没有完全支持它，因此无法直接运行Typescript。 Babel使JavaScript应用程序可以在旧浏览器和新浏览器上运行。这些浏览器不一定需要与仅添加的JavaScript功能兼容。

这是Babel如何将带有现代功能编写的JavaScript代码转移到旧浏览器可以理解的代码中的一个示例：

• ES6箭头功能
  

  const a = (x, y) => {
      return x + y
  };
  

  此编译为
  

  var a = function(x, y) {
      return x + y
  };
  

• 使用Backticks
  模板

  var name = "John";
  var food = "Vegetables";
  
  `Hello, I am ${name}, and I love ${food}?`;
  

  此编译为
  

  var name = "John";
  var food = "Vegetables";
  
  "Hello, I am " + name + ", and I love " + food;
  

浏览器支持JavaScript的新功能的演变需要时间。

babel是一种JavaScript转板器，将高级JavaScript代码转换为更兼容的JavaScript形式，较旧的浏览器可以理解。它试图理解现代JavaScript代码，并将其重写为浏览器可以理解的较旧语法。

编译，转移和多填充有什么区别？

计算机或任何数字设备仅了解二进制代码。但是，我们用看起来像英语的语言编码，计算机显然不理解。计算机如何理解我们的代码作为人类开发人员并执行对它们的要求？这是编译和 transpliting 进来的地方。

编译 - 编译器是一种软件，将更高级别的代码解释为机器可以理解的机器代码或代码。在编译过程中，用一种编程语言编写的代码被翻译成另一种编程语言。

transpliting 是将源代码从一种语言转换为同一语言的不同版本的过程。转运器是一种编译器；但是，虽然编译器采用源代码并将其转换为低级代码，但Transpiler采用源代码并将其转换为相同高级的代码。

一个很好的例子是使用打字稿来构建应用程序。在Typescript可以在浏览器上运行之前，需要首先将其转移到Plain JavaScript，这允许浏览器有效地解释代码。

babel transpiles代码用高级语言写入高级代码中，可以在浏览器或其他软件中执行。

polyfilling '允许您添加不在本地存在的功能。这是在不了解此功能的旧浏览器上复制现代JavaScript代码功能的一种方法。

有时，新的语言功能包括该语言中从未存在的其他功能或内置方法。浏览器无法解释此功能；因此，它需要一个转换器（称为polyfiller）才能更改或重写此函数，以解释浏览器可以解释的功能。

babel是可用的最突出的多填料之一，可帮助浏览器不了解此新功能，以找到与新功能相同任务的类似函数。

预订和用法

Babel是开发人员易于使用的工具。按照以下步骤配置机器上的babel。

1. 创建一个迷你项目并使用NPM初始化：

   npm init -y

2. 安装 - 运行此命令将Babel添加到您的package.json文件：
   

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

3. 使用以下代码添加一个babel.config.json文件：
   

   {
       "presets": [
           [
               "@babel/preset-env",
               {
                   "targets": {
                       "edge": "17",
                       "firefox": "60",
                       "chrome": "67",
                       "safari": "11.1"
                   },
                   "useBuiltIns": "usage",
                   "corejs": "3.6.5"
               }
           ]
       ]
   }
   

4. 编写您的JavaScript代码，然后将其添加到Root Directory中的文件夹中，称为src：
   

   const styles = {
       ...defaults,
       color: "#f5da55",
   };
   

   让我们编译此JavaScript代码并查看输出。

5. 在您的终端中运行以下命令以编译JavaScript代码：

   npx babel src --out-dir js

   此命令编译了在src文件夹中编写的所有JavaScript代码，并将编译的JavaScript代码添加到js文件夹中。

   输出：
   

   "use strict";
   
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
   
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   
   function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
   
   const styles = _objectSpread(_objectSpread({}, defaults), {}, {
       color: "#f5da55"
   });
   

   以上结果是我们编译的JavaScript代码的输出。

使用Babel的利弊

专利：

• Babel的基本设置相对简单。
• 有大量的社区支持以及不断的更新和改进。

cons：

• 它的编译时间很慢。
• 它需要很多依赖项，不包括安装超过269个软件包的DEV依赖性。

什么是Sucrase，与Babel有何不同？

sucrase是Babel的超级快速潜在替代品，可以更快地进行开发。它声称比Babel快20倍。

与Babel不同，Sucrase不会将大量的JS功能汇编为ES5或更低的功能，无法在较旧的浏览器中工作。取而代之的是，它假设您正在使用最近的浏览器开发，并专注于编译非标准语言扩展：JSX，Typescript和Flow。弹酶的小范围使其比Babel快得多。

babel将所有代码汇编为您的浏览器可以运行的内容，而Sucrase则专注于Babel所做的一小部分。

Sucrase利用编译器体系结构使其更具性能（就开发构建而言），但范围更低和可维护。因此，对于生产环境而言，这不是建议的选择。仅应在开发过程中考虑。

Sucrase建立在Babel的基础上，因为它的解析器（Sucrase）是从Babel Parser分叉的。这使Sucrase非常依赖Babel，并且没有Babel就不可能存在。

Sucrase设置和用法

使用Sucrase转换打字稿应用程序很简单。请按照以下步骤使用Sucrase编译您的第一个打字稿应用程序。

1. 安装：

   yarn add --dev sucrase或npm install --save-dev sucrase

2. 在root项目目录中创建一个src文件，并添加带有以下代码的打字稿文件：
   

   function addNumbers(a: number, b: number) {
       return a + b;
   }
   
   var sum: number = addNumbers(10, 15)
   
   console.log('Sum of the two numbers is: ' +sum);
   

3. 用Sucrase编译您的打字稿代码：

   sucrase ./src -d ./js --transforms typescript,imports

   命令将您的打字稿代码（.ts）转移到JS文件夹中的JavaScript代码（.js）。

   输出：
   

   "use strict";
   function addNumbers(a, b) {
       return a + b;
   }
   
   var sum = addNumbers(10, 15)
   
   console.log('Sum of the two numbers is: ' +sum);
   

   以上是您的thexpript到JavaScript代码。

使用Sucrase的利弊

专利：

• 更快的开发构建。

cons：

• Sucrase不会检查错误的代码，应始终与Linter或Type-Checker一起使用。
• Sucrase不利用插件。需要写入转换以相互合作；每个其他转换都需要大量工作。
• 该工具对原型语言扩展和即将到来的语言功能不利。 Sucrase的更快架构使新的转换更加脆弱，更难编写。

使用大型代码库时，重要的是要使用快速JavaScript编译器快速构建应用程序。

尽管Sucrase是快速应用程序开发和良好编译器的非常有生产力的工具，但它没有Babel的全部范围和多功能性。这是Sucrase不涵盖的一些功能：

• Sucrase不是类型检查器。它在不检查正确的情况下运行代码。
• Sucrase不会为IE等旧浏览器传输代码，因为它假设开发人员正在使用最近的浏览器进行开发。
• Sucrase不会检查您的代码是否错误。如果给出有效的代码，Sucrase将产生有效的代码，反之亦然。在开发过程中，应将合适的类型检查器与Sucrase一起使用以检查错误。

Sucrase和Babel的替代品

除了将Babel和Sucrase用作移植和Polyfill JavaScript代码的编译器外，还可以在构建应用程序时考虑其他编译器选项。一些替代方法如下：

• Eslint-plugin-compat
• Speedy Web Compiler(SWC)

其他替代方案

• Closure compiler
• TypeScript compiler(tsc)

Eslint-Plugin-Compat

此插件在构建代码时消除了转移过程，并在应用程序中存在太现代的浏览器时，您的代码编辑器提醒您。

如果没有现代功能，您将无法没有编码，则可以手动进行多填充。如果没有，您可以在需要时简单地使用旧语法。

此插件消除了依靠转板器的需求，并使您可以控制生产代码。它可以轻松地与您的Visual Studio代码集成。

设置

1. 安装：

   npm install --save-dev eslint eslint-plugin-compat

2. 创建以下.eslintrc.json文件并添加以下设置：
   

   {
   +   "extends": ["plugin:compat/recommended"],
   +   "env": {
   +       "browser": true
   +   },
       // ...
   }
   

3. 将此代码添加到您的package.json文件中以配置浏览器目标：
   

   {
       // ...
   +   "browserslist": [
   +       "defaults"
   +   ]
   }
   

注意：确保安装了VS Code ESLint extension。它是VS代码编辑器插件。

快速的网络编译器（SWC）

SWC是用Rust编写的超快速JavaScript编译器。它是用于生产JavaScript代码的编译，缩小和捆绑的开发人员工具。

SWC是Babel的竞争对手，因为它比Babel快20倍。它也可以用来实现更快的开发构建。

SWC设置和用法

SWC可以从Node Package Manager（NPM）中安装为软件包。以下是使机器上的SWC编译器及其使用情况的程序。

1. 创建一个目录并导航到您要安装SWC的目录。

   mkdir swc_project

2. 初始化package.json：

   npm init

3. 安装SWC核心和SWC CLI工具：

   npm install --save-dev @swc/core @swc/cli

4. 在您的终端上运行以下命令以将文件传输：

   npx swc ./filename.js

使用SWC的利弊

ProS

• 比Babel快20倍。
• 需要更少的依赖项。

cons

• 不支持所有公寓的特征。
• 有一个小社区和很少的贡献者。

闭合编译器

CLOSURE编译器是使JavaScript应用程序运行速度更快的工具。 CLOSURE通过更有效地减少和重写代码来编译JavaScript应用程序代码。它还检查类型和语法，并提供有关代码错误的警告。

关闭在代码汇编方面非常有效。它减少了JavaScript文件的大小。闭合编译器通过检查代码库中非法代码的错误和警告开发人员，帮助开发人员以更少的错误编写代码。这使代码更可维护。

打字稿编译器（TSC）

这是打字稿的默认编译器。当您的计算机上安装打字稿时，它将在全球安装。
Typescript编译器可用于使用React等工具的前端项目。这是用于基于打字稿的项目的简单工具。

运行tsc filename.ts将您的打字稿应用于JavaScript。

结论

Babel是软件开发行业中最受欢迎，最常用的JavaScript编译器之一。

除了在开发构建过程中Babel的性能缓慢外，Babel是建立生产应用程序时要考虑的重要生产工具。不建议在生产环境中使用更快的版本。

有很多选择可以选择用于传输您的代码。在构建软件应用程序之前，必须对您的潜在客户使用良好的浏览器进行良好的分析研究，以选择合适的生产工具。