npm 包 pika-plugin-build-web-babel 使用教程-JavaScript中文网-JavaScript教程资源分享门户

如果你正在进行前端项目的开发工作，那么你一定会遇到需要使用到 ES6 、ES7、TypeScript 等新的前端语言的情况。这些新语言拥有更好的开发体验，但也给前端构建工作带来了新的挑战。其中之一就是需要将这些新的语言编译成浏览器能够识别的 JavaScript。本文将介绍一个解决这个问题的 npm 包：pika-plugin-build-web-babel。

什么是 pika-plugin-build-web-babel？

pika-plugin-build-web-babel 是一个 pika 模块，可以将新式的前端语言转换为浏览器可识别的 JavaScript。该npm 包是基于 Babel 的，Babel 是一个转换 JavaScript 代码的工具。该工具可以根据不同的插件将其转换成浏览器能够识别的代码。

pika-plugin-build-web-babel 的安装

你可以通过 npm 安装 pika-plugin-build-web-babel。

$ npm i pika-plugin-build-web-babel

如何使用 pika-plugin-build-web-babel

首先，将 pika-plugin-build-web-babel 加入到你的项目中。
```
"devDependencies": {
  "pika-plugin-build-web-babel": "*"
}
```
然后，在配置文件中添加 pika-plugin-build-web-babel。将下面的代码添加到你的 package.json 文件中.
```
-- -------------------- ---- -------
------- -
  ---------- -
    -
      ------------------------------
      -
        --------- -------------------
      -
    -
  -
-
```
注意：这里的 @babel/preset-env 是一个配置项，表示自动根据你所使用的语法版本自动转换，比如转换 ES6 代码为 ES5 代码。
告诉 pika 使用你新添加的编译器。在命令行中运行以下命令:
```
$ pika build
```

这就是整个 pika-plugin-build-web-babel 的使用流程。

pika-plugin-build-web-babel 的示例代码

下面的示例均是在 JavaScript 中使用不同的语法来定义一个对象。这些语法都是浏览器不能理解的，因此需要使用到 pika-plugin-build-web-babel 来将其转换为浏览器可识别的 JavaScript。下面是示例代码：

-- -------------------- ---- -------
----- ------ -
  ----------------- ---- -
    --------- - -----
    -------- - ----
  -

  ------- -
    ------------------- - -- ------------ --- - -- ----------- ----- -------
  -
-

TypeScript

-- -------------------- ---- -------
----- ------ -
  ------- ----- -------
  ------- ---- -------

  ----------------- ------- ---- ------- -
    --------- - -----
    -------- - ----
  -

  ------ ------- -
    ------------------- - -- ------------ --- - -- ----------- ----- -------
  -
-

通过 pika-plugin-build-web-babel 编译后都会变成类似下面的代码来供浏览器执行。

-- -------------------- ---- -------
----- ------ -
  ----------------- ---- -
    --------- - -----
    -------- - ----
  -

  ------- -
    ------------------- - -- - - --------- - - --- - -- - - -------- - - ----- -------
  -
-

结论

在现代 JavaScript 的开发中，使用新的语法是常见的。然而，这些语法在老版本的浏览器中并不支持。所以，我们需要将这些新语法转换为老版本浏览器支持的语法。pika-plugin-build-web-babel 提供了一个非常有用的方法来实现转换，并能够让你各种语法变得更加简单易懂。因此，这个社区中对于这个 npm 包一直存在着极高的评价与推崇。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedc7d8b5cbfe1ea06122c1