介绍
@verdaccio/babel-preset 是一个基于 Babel7 的 preset，专门设计用来编译 ES6, ES7 和 ES8 语法。此外，它还支持 TypeScript（.tsx 和 .ts）的转码，以及解析 React 相关的语法，包括 JSX。
安装
首先，你需要先安装 @verdaccio/babel-preset 包。你可以通过以下方式来完成此操作：
npm install @verdaccio/babel-preset --save-dev
配置
接下来，需要通过 babel.config.js 文件来配置 Babel，包括引入 @verdaccio/babel-preset 插件和设置转码规则等。
在这个例子中，我们将会针对一个包含 TypeScript 和 React 代码的工程库作为案例来说明。假设我们有以下 package.json 文件：
-- -------------------- ---- -------
-
------- -------------
---------- --------
------- ----------------
---------- ------
------------------ -
-------------------------- ---------
-------------- ----------
-------------------- ----------
--------------------------- ----------
---------------------- ----------
------------- --------
--
---------- -
-------- ------
----------------- ---- --- ----- -- ----- --- --------- ---- ------------- --------
------- ----- -------- -- ---- ----------- -- ---- --
-
-然后，在你的项目根目录下创建一个 babel.config.js 文件，输入以下内容：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------------
----------------------
---------------------------
-
--------------------
-
------- ----
-------- ------
------------ --------
--
--
--
--这个文件的意义是告诉 Babel，我们安装了哪些要使用的 preset。包括 @verdaccio/babel-preset 插件，用来支持 TypeScript 和 React 的转码；@babel/preset-react 用来解析 React 的 JSX 语法；@babel/preset-typescript 用来转换 TypeScript 代码；@babel/preset-env 则是基于当前目标环境添加必要的 polyfill 和特性。
示例代码
下面是一个使用 TypeScript 和 React 的示例代码，演示了如何通过 @verdaccio/babel-preset 来编译它们：
-- -------------------- ---- -------
------ - -- ----- ---- --------
--------- ----- -
--------- -------
-
----- ----------- --------------- - -- -------- -- -- -
-----
-------------- ---- -----------
------
--
------ ------- -----------在我们的项目中，这个文件可能是一个叫做 src/components/HelloWorld.tsx 的文件。执行 npm run prepublishOnly 命令后，它将会编译成以下 JavaScript 代码：
-- -------------------- ---- -------
------ - -- ----- ---- --------
--- ---------- - -------- ---- -
--- -------- - ------------
------ --------------------------- -----
------------------------- -----
---------
- ---- -----------
--
------ ------- -----------总结
在这篇文章中，我们介绍了 @verdaccio/babel-preset 所提供的功能和用法，并展示了初步的配置和一个示例代码。使用 @verdaccio/babel-preset 能够极大的简化你在编译 TypeScript 和 React 代码时的工作。希望这篇文章能对初学者和有些经验的前端工程师们有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc7b9b5cbfe1ea06122af