在前端开发中，我们经常需要使用到一些第三方库和工具，npm 就是一个非常方便的包管理工具。在本文中，我们将会介绍一个 npm 包 @shylog/express-tsx-dev 的使用教程。
安装
npm install @shylog/express-tsx-dev --save-dev
什么是 @shylog/express-tsx-dev ？
@shylog/express-tsx-dev 是一个基于 express 搭建的开发环境，支持 TypeScript 和 React，可以快速启动一个基于 TS 和 React 的应用程序。
这个 npm 包对于初学者来说非常友好，可以快速上手 TS 和 React 的项目开发，并且提供了一些非常有用的工具和功能。
如何使用？
在你的项目根目录下，执行以下命令：
npx express-tsx-dev [project-name]
注意：这里的 [project-name] 是你想要创建的项目名称。如果不填写此参数，将使用默认名称 my-project。
然后，等待一段时间，会看到以下的输出：
Server started on port 3000
至此，你已经成功创建了一个基于 TS 和 React 的开发环境！可以访问 http://localhost:3000 进行预览。
当控制台输出以下内容时表示服务已经成功启动：
Listening on http://localhost:3000 GET / 404 16.892 ms - 139
文件结构
当你执行 npx express-tsx-dev [project-name] 命令后，会在你的当前目录下创建一个新的项目目录，其中包含以下文件结构：
-- -------------------- ---- ------- ---------- --- ------------ --- --- - --- ------- - --- ---------- - --- --------- - --- ---------- - - --- --------- - --- ------ - --- --------- --- ----------------- --- ------------ --- -------------
- node_modules：存放项目所需的第三方库。
- src：源代码文件夹，存放应用程序的代码和资源文件。
- App.tsx：应用程序的主入口，里面可以添加自己的代码。
- index.html：应用程序的 html 模板文件。
- index.tsx：应用程序的主入口文件，通常不需要修改。
- components：组件文件夹，存放 React 组件。
- styles：样式文件夹，存放 CSS 文件。
- package-lock.json：锁定包的版本号。
- package.json：应用程序的配置文件。
- tsconfig.json：TypeScript 配置文件。
示例代码
Hello 组件
-- -------------------- ---- -------
------ ----- ---- --------
--------- ---------- -
----- -------
-
----- ------ -------------------- - -- ---- -- -- -
------ -
-----
------ -------
------
--
--
------ ------- ------App 组件
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ---------------------
------ ---------------------
----- ---- -------- - -- -- -
------ -
---- --------------------------
------ ------------ --
------
--
--
------ ------- ----index.tsx
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------
----------------
------------------
---- --
--------------------
-------------------------------
--index.html
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
------------ -----------
-------
------
------------- ---- -- ------ ---------- -- --- ---- ---------------
---- ----------------
-------
-------总结
通过以上的学习，相信你已经掌握了如何使用 @shylog/express-tsx-dev 进行快速开发的技巧。不仅如此，你还学会了如何搭建 React 和 TypeScript 开发环境的方法。
以上示例代码仅作为参考，建议自行进行拓展和改进。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005677d81e8991b448e3e2e