当我们使用 TypeScript 开发时，我们需要一些基本环境和工具，例如模板、编译器、测试工具等等。一个好的开发工具能够帮助我们快速搭建开发环境，并且提高效率。今天，我为大家介绍一个非常实用的 npm 包 @mbriggs/slush-ts-boilerplate，它能够使我们在 TypeScript 领域内快速搭建一个基础项目模板，并提供了简单易用的指令和配置，节省了我们很多时间，让我们能够专注于业务需求。
环境要求
- Node.js : ^14.15.1
- Slush: ^1.1.0
安装
首先，确保你安装了最新版本的 Nodejs。然后，我们在命令行中运行以下命令：
--- ------- -- ----- --- ------- -- -----------------------------
这些指令将在全局命令行中安装 slush 和 @mbriggs/slush-ts-boilerplate。
使用
在命令行中，我们可以使用 slush 参数调用脚手架指令，如下：
----- -----------------------------
这将初始化一个全新的 TypeScript 项目，具体步骤如下：
- 初始化名称和描述信息
------- ------ ------- ------------------ ---------- ------- ------ ------- - ----------- --- ---- -------- - ------ -------
- 初始化项目结构与配置文件
---
- 自定义配置及基础项目
------- -- --- ---- ---- -------------- ----- ------ ----------------------
完成上述步骤后，我们的 TypeScript 项目就已经被初始化了，并且可以通过运行 npm start 指令来启动根文件，然后在浏览器上输入 localhost:8080 访问我们的页面。
自定义配置
我们在开始初始化项目时，也可以选择自定义一些配置。通过运行 slush @mbriggs/slush-ts-boilerplate 指令时，在选择 “Do you need some customization?” 选项时，我们可以选择输入 y 以配置一些自定义选项，这些选项包括：
Web workers开启 Web Worker （是一个运行在后台的 JavaScript，独立于其他脚本，不会影响页面渲染的部分）。如果选择开启 Web Worker，将会自动创建相应的目录和文件，并在webpack.config.js文件中配置。Redux开启 Redux。如果选择开启 Redux 将会自动安装对应的依赖，同时自动生成相关配置，例如建立这些目录：--- ------- --- --------
Routing开启路由。如果选择开启路由将会自动安装路由相关的依赖，并创建相应的目录和文件，例如建立这些目录：--- ------
Material-UI开启 Material-UI。如果选择 Material-UI，将会自动安装相关依赖，并按照官方文档设置相关配置，这些设置包括处理 css 的 loader，以及安装 Material-UI 依赖
示例代码
这里提供一些示例代码给大家参考：
webpack.config.js
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
------ -
-
----- ----------
---- ------------
-------- ---------------
--
-
----- ---------
---- -
-
------- ---------------
--
-
------- -------------
--
--
--
-
----- -----------------------
---- ----------------
--
--
--
-------- -
----------- -------- ------ -------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ --- -----
--------- ----------------------
---
--
--index.ts
------ - -- -------- ---- ------------ ------ - -- ----- ---- -------- ------ ----------- ---- --------------------------- ---------------------------- --- ---------------------------------
MyComponent.tsx
------ - -- ----- ---- --------
--------- ----------------- --
--------- ----------------- --
----- ----------- ------- ---------------------------------- ------------------ -
-------- -
------ -
-----
--------- ---- ----------------
------
--
-
-
------ ------- ------------结论
使用 npm 包 @mbriggs/slush-ts-boilerplate，我们能够简单地搭建一个基础的 TypeScript 项目模板，并且可以通过指令自定义一些选项。这对于初学 TypeScript 或日常开发中使用 TypeScript 的开发者非常实用。同时，这也能帮助我们提高效率以及节省时间，让我们更专注于业务需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bcb967216659e244745