`npm` 包 `babel-preset-es2015-argon` 使用教程

babel-preset-es2015-argon 是一个用于 Babel 6.x 的 preset ,该 preset 可以让你在浏览器或者 Node.js 运行环境中使用 ES2015+ 语法,这个 preset 主要针对于阿里云 Serverless 框架中使用的 Node.js 版本,因为 Serverless 框架中的 Node.js 版本比较旧,可能不支持最新的 ECMAScript 语法,因此需要使用 babel-preset-es2015-argon 进行转换。

安装

首先需要安装 Babelbabel-preset-es2015-argon,在项目根目录下执行下面的命令:

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

配置

在项目根目录下,创建 .babelrc 文件,内容如下:

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

其中 { "targets": { "node": "6.10" } } 指定了你打算在哪个版本的 Node.js 中运行该代码。

使用

package.json 中添加以下两条 script

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

其中 "build" 的意思是将 src 目录下的所有文件转换成 lib 目录下的文件,并且会将 src 下所有非 Javascript 文件一同拷贝到 lib 目录下。

"start" 的意思是在 lib 目录下执行 index.js 文件。

现在,你已经可以使用新版本的 ECMAScript 语法了。

示例代码

ES2015

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

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

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

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

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

ES2016

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

ES2017

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

结论

通过上面的教程,你已经学会了如何在 Serverless 框架中使用 Babelbabel-preset-es2015-argon 转换 ECMAScript 语法。现在,你可以放心的使用最新的 ECMAScript 语法编写你的项目了。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5eedc3f6b5cbfe1ea0612172


猜你喜欢

  • npm 包 semantic-release-github 使用教程

    前言 在开发过程中,发布版本是非常重要的。而版本发布过程中,需要注意的方面也很多,例如版本号更新规则、版本发布流程等等。在前端开发中,我们通常会使用 npm 来管理我们的项目依赖,同时也会使用 sem...

    4 年前
  • NPM 包 @types/global-agent 使用教程

    前言 在前端开发过程中,我们常常需要使用到一些第三方库和包,如 axios、lodash 等。而这些库和包都是通过 NPM 进行安装和管理的。 在使用这些库和包时,有时我们会遇到一些类型定义不全或缺失...

    4 年前
  • npm 包 numerizer 使用教程

    介绍 在前端开发中,经常会涉及到数字的处理,而且数字的格式有时候十分复杂。比如说,有一个字符串 3.5 million,我们希望将它转化为数字 3500000。在这个情况下,我们就需要用到一个 npm...

    4 年前
  • npm 包 node-units 使用教程

    在前端开发中,尤其是涉及到布局、样式计算等需要进行单位转换的场景中,我们经常需要使用不同的单位进行换算。node-units 是一个能够将不同的单位进行转换的 npm 包,它可以帮助我们更加便捷高效地...

    4 年前
  • npm 包 grunt-css-url-embed 使用教程

    在前端开发中,我们经常需要将 CSS 中引用的图片或其他资源进行压缩或 base64 编码,以减少 HTTP 请求的数量,提高页面性能。grunt-css-url-embed 是一个可以帮助我们实现这...

    4 年前
  • npm 包 swagger-typescript-codegen 使用教程

    为什么需要 swagger-typescript-codegen 在开发 Web 应用程序时,API 接口是必不可少的。通常情况下,API 接口需要使用一种格式进行定义,最常见的格式是 Swagger...

    4 年前
  • npm包jslint-core使用教程

    什么是jslint-core? JSLint是一个JavaScript语法检查器,它是由Douglas Crockford编写的。JSLint可以以一种严格的方式解析JavaScript代码,并根据D...

    4 年前
  • NPM 包 `secure-compare` 使用教程

    在 Web 应用程序的开发过程中,我们通常需要比较两个字符串的相等性。如果我们使用 JavaScript 的 == 或 === 运算符来比较两个字符串是否相等,那么可能会受到定时攻击。

    4 年前
  • npm 包 template-copy 使用教程

    简介 在前端开发过程中,经常会使用到一些公共的模板或组件,而 template-copy 就是一款可以将已有项目中的模板自动复制到新项目中的 npm 包。这个包的使用可以大大提高前端开发的效率,避免重...

    4 年前
  • NPM包 Watchd的使用教程

    介绍 Watchd是一种基于JavaScript编写的NPM包,用于监测系统或网站的某些变化。它特别适用于前端开发的场景,可以通过自动重新构建、重载和部署,简化了开发和测试流程,并提高了生产力。

    4 年前
  • npm 包 gentle-cli 使用教程

    前言 在前端开发过程中,我们常常需要通过命令行进行各种操作,比如构建项目、依赖管理等等。而 npm 是前端开发中非常重要的一个工具,它提供了包管理、依赖管理、项目构建等多种功能。

    4 年前
  • npm 包 eslint-plugin-mediawiki 使用教程

    介绍 eslint-plugin-mediawiki 是一个用于 eslint 的插件,可用于在 mediawiki 代码中进行静态代码分析。在开发过程中,只要你遵循了 mediawiki 制定的代码...

    4 年前
  • npm 包 eslint-docgen 使用教程

    前言 eslint-docgen 是一个能够生成文档的 ESLint 插件,它可以通过检查你的代码和注释来自动生成各种文档,比如 API 文档、组件文档等等。本文将介绍如何使用 eslint-docg...

    4 年前
  • npm 包 eslint-plugin-no-jquery 使用教程

    在前端开发中,jQuery 是一个广泛使用的 JavaScript 库。不过,在现代前端开发中,很多 jQuery 的特性已经可以使用原生 JavaScript 实现。

    4 年前
  • npm 包 eslint-plugin-wdio 使用教程

    本文介绍如何使用 eslint-plugin-wdio 这个 npm 包来规范 WebdriverIO 的前端开发。WebdriverIO 是一个自动化测试框架,让我们用 Javascript 编写 ...

    4 年前
  • npm 包 @npmcli/move-file 使用教程

    前言 在前端开发过程中,经常需要在项目中进行文件的移动操作。移动文件的工具有很多,但是本文将介绍一个 npm 包 @npmcli/move-file,它是一个简单易用的文件移动工具。

    4 年前
  • npm 包 dommo 使用教程

    npm 包 dommo 使用教程 什么是 dommo dommo 是一款 JavaScript 封装库,旨在让开发者能够更加方便地使用 DOM API 来操作 HTML 元素。

    4 年前
  • npm 包 @test-runner/el 使用教程

    引言 前端自动化测试是一个重要的环节,它可以提高效率、保证质量,避免出现 bug 。而自动化测试需要使用一些工具来实现,而这些工具中的一个重要的部分是测试框架。在 JavaScript 中,目前比较流...

    4 年前
  • npm 包 @test-runner/web 使用教程

    前言 在前端开发中,我们常常需要进行自动化测试,以确保代码质量和功能正确性。而 @test-runner/web 就是一款方便易用的自动化测试工具,可以用于各种类型的前端项目。

    4 年前
  • npm 包 minipass-collect 使用教程

    如果你是一名前端开发者,那么你一定知道 npm 这个工具,并且也用它来管理和安装依赖包。而 minipass-collect 是一个非常有用的 npm 包,它可以让你方便地将多个流数据合并为一个流数据...

    4 年前

相关推荐

    暂无文章