在前端开发中，我们经常需要与其他开发者分享代码或者演示功能。一种流行的方式是将代码放在 CodeSandbox 上，但是手动将代码复制到 CodeSandbox 上耗费时间并且容易出错。幸运的是，有一个 npm 包可以很好地处理这个问题：react-codesandboxer。
安装 react-codesandboxer
使用 npm 或者 yarn，我们可以轻松地安装 react-codesandboxer 包：
npm install react-codesandboxer --save # 或者 yarn add react-codesandboxer
使用 react-codesandboxer
接下来，我们来看看 react-codesandboxer 的 API。react-codesandboxer 接收一个对象作为参数，名为 importDeclaration。这个对象拥有两个 key：component 和 source。
其中，component 是你想要导入的 React 组件的名称，source 是你的组件源代码。也就是说，当你使用 react-codesandboxer，你只需要提供一个完整的 React 组件且不需要其他的代码就可以在 CodeSandbox 中使用它了。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------------
----- ----------- - -- -- -
------ -
--------- -----------
--
--
----- ------- - -- -- -
------ -
------------
--------------------
---------- --------------
------- -
----- ----------- - -- -- -
------ -
--------- -----------
--
--
------ ------- ------------
-
--
--
--
--
------------------------ --- ---------------------------------当你运行代码之后，你会看到一个包含代码的 CodeSandbox 窗口被渲染出来。
react-codesandboxer 高级用法
react-codesandboxer 更多的高级用法可以让你更好地掌控代码的复杂度。
样式
如果你需要包含样式文件，你可以在 importDeclaration 对象中添加 style key。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------------
----- ----------- - -- -- -
------ -
---- -------------------------
--------- -----------
------
--
--
----- ------- - -- -- -
------ -
------------
--------------------
---------- --------------
------- -
------ --------------
----- ----------- - -- -- -
------ -
---- -------------------------
--------- -----------
------
--
--
------ ------- ------------
--
------ -
------------- - -- -
------ ----
-
-
--
--
--
--
------------------------ --- ---------------------------------外部依赖
如果你需要使用外部的依赖，你可以在 importDeclaration 对象中添加 dependencies key。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------------
----- ----------- - ------- -- -
------ -
---- -------------------------
----------------------
------
--
--
----- ------- - -- -- -
------ -
------------
--------------------
---------- --------------
------- -
------ - -------- - ---- --------
------ --------------
----- ----------- - ------- -- -
----- ------- --------- - ----------------------
------ -
---- -------------------------
----------------
------- ----------- -- --------------- --------------- -----------
------
--
--
------ ------- ------------
--
------ -
------------- - -- -
------ ----
-
--
------------- -
------ ----------
------------ ---------
-
--
--
--
--
------------------------ --- ---------------------------------自定义标题
默认情况下，react-codesandboxer 会将文件名作为标题。如果你想要自定义标题，你可以向 CodeSandbox 组件传递 title prop。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------------
----- ----------- - -- -- -
------ -
--------- -----------
--
--
----- ------- - -- -- -
------ -
------------
--------------------
---------- --------------
------- -
----- ----------- - -- -- -
------ -
--------- -----------
--
--
------ ------- ------------
-
--
--------- ------ ------
--
--
--
------------------------ --- ---------------------------------自定义依赖管理器
默认情况下，react-codesandboxer 会使用 npm 作为依赖管理器。如果你想要使用自定义的依赖管理器，你可以向 CodeSandbox 组件传递 packageManager prop。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ----------- ---- ----------------------
----- ----------- - -- -- -
------ -
--------- -----------
--
--
----- ------- - -- -- -
------ -
------------
--------------------
---------- --------------
------- -
----- ----------- - -- -- -
------ -
--------- -----------
--
--
------ ------- ------------
-
--
---------------------
--
--
--
------------------------ --- ---------------------------------总结
随着越来越多的人开始使用 react-codesandboxer，这个工具在前端开发中变得越来越流行。在这篇文章中，我们学习了 react-codesandboxer 的基础知识和高级用法，以及如何轻松地将你的应用程序打包到 CodeSandbox 中进行演示和分享。希望这篇文章对你有所帮助并指导你更好地使用 react-codesandboxer 增加你的开发效率。
示例代码
完整示例代码：https://codesandbox.io/s/react-codesandboxer-demo-vz37x
原创文章，转载请注明出处：https://github.com/lydiacx/Tech-Writing/blob/main/npm_package_react-codesandboxer.md
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/171190