在前端开发中，我们经常需要将 ES6+ 的语法转换成 ES5 以兼容更多的浏览器。而 Babel 就是实现这一任务的工具之一。但是，有些时候我们并不想要在项目中安装、配置 Babel，这时就可以使用 npm 包 @citycide/babel-standalone。
@citycide/babel-standalone 是基于 Babel 的一个独立包，不需要额外的安装和配置，即可完成 ES6+ 代码的转换。其使用方法也非常简单。本文将为大家介绍如何使用 @citycide/babel-standalone 进行代码转换。
安装
我们可以通过 npm 安装 @citycide/babel-standalone：
npm install @citycide/babel-standalone --save-dev
使用
简单使用
当我们安装好 @citycide/babel-standalone 后，我们可以创建一个 HTML 文件，在其中引入@citycide/babel-standalone 即可。
以下是一个简单的 HTML 文件示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------------------------
-------
------
-----------------------------------
--------------- --- -------
---------- ----------
----- --- - -- -- ------ --------
-------------------
-------------
-------- -------------------------- -----------
---------- -------------------------
------- --------------------------------------------------------------------------------------------
--------
----- ---- - ------------------------------------------
----- ------ - --------------------- - -------- ---------- --------
------------------------------------------- - -------
---------
-------
-------我们通过 <script>标签引入 @citycide/babel-standalone 的 CDN 资源，并在 JavaScript 代码中使用 babel.transform() 方法对我们的代码进行转换。由于 ES6 的语法在老版本浏览器中不存在，所以我们需要在转换中使用 presets: ['es2015'] 让代码能够兼容 ES5。
更多用法
@citycide/babel-standalone 提供了更多 API 和配置项，以帮助我们更好地进行代码转换。以下是一些常用的 API：
babel.transform()：将 ES6 代码转化为 ES5 代码。
const code = `const foo = () => 'hello world!';
console.log(foo());`;
const result = babel.transform(code, { presets: ['es2015'] }).code;
console.log(result);babel.transformFromAst()：将 AST 转化为 ES5 代码。
const code = `const foo = () => 'hello world!';
console.log(foo());`;
const ast = babel.parse(code);
const result = babel.transformFromAst(ast, code, { presets: ['es2015'] }).code;
console.log(result);@citycide/babel-standalone 还提供了一些配置项，帮助我们更好地使用 Babel。以下是一些常用的配置项：
presets：使用哪个预设集。预设集是一组插件的集合，以便于在一起使用。
const code = `const foo = () => 'hello world!';
console.log(foo());`;
const result = babel.transform(code, { presets: ['es2015', 'react'] }).code;
console.log(result);plugins：使用哪些插件。
-- -------------------- ---- -------
----- ---- - ------ --- - -- -- ------ --------
---------------------
----- ------ - --------------------- -
-------- -----------
-------- -
----------------------------------------- - -------- --------- ------- ---
--
--------
--------------------总结
通过本文，我们了解了如何使用 npm 包 @citycide/babel-standalone 进行 ES6+ 代码的转换。在前端开发中，使用该包能够让我们更加方便地使用 Babel，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106039