当我们使用 TypeScript 开发时，我们需要一些基本环境和工具，例如模板、编译器、测试工具等等。一个好的开发工具能够帮助我们快速搭建开发环境，并且提高效率。今天，我为大家介绍一个非常实用的 npm 包 @mbriggs/slush-ts-boilerplate，它能够使我们在 TypeScript 领域内快速搭建一个基础项目模板，并提供了简单易用的指令和配置，节省了我们很多时间，让我们能够专注于业务需求。
环境要求
- Node.js : ^14.15.1
- Slush: ^1.1.0
安装
首先，确保你安装了最新版本的 Nodejs。然后，我们在命令行中运行以下命令：
npm install -g slush npm install -g @mbriggs/slush-ts-boilerplate
这些指令将在全局命令行中安装 slush 和 @mbriggs/slush-ts-boilerplate。
使用
在命令行中，我们可以使用 slush 参数调用脚手架指令，如下：
slush @mbriggs/slush-ts-boilerplate
这将初始化一个全新的 TypeScript 项目，具体步骤如下：
- 初始化名称和描述信息
Slush@: Please provide your-project-name: my-project Slush@: Please provide a description for this project: A simple project
- 初始化项目结构与配置文件
...
- 自定义配置及基础项目
Slush@: Do you need some customization? [y/n] //如果选择 “y”，将会自动让你选择哪些特殊配置需要设置
完成上述步骤后，我们的 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 将会自动安装对应的依赖，同时自动生成相关配置，例如建立这些目录：├── actions └── reducers
Routing开启路由。如果选择开启路由将会自动安装路由相关的依赖，并创建相应的目录和文件，例如建立这些目录：└── routes
Material-UI开启 Material-UI。如果选择 Material-UI，将会自动安装相关依赖，并按照官方文档设置相关配置，这些设置包括处理 css 的 loader，以及安装 Material-UI 依赖
示例代码
这里提供一些示例代码给大家参考：
webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
------ -
-
----- ----------
---- ------------
-------- ---------------
--
-
----- ---------
---- -
-
------- ---------------
--
-
------- -------------
--
--
--
-
----- -----------------------
---- ----------------
--
--
--
-------- -
----------- -------- ------ -------
--
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- -------------------
------ --- -----
--------- ----------------------
---
--
--index.ts
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import MyComponent from './components/MyComponent';
ReactDOM.render(<MyComponent />, document.getElementById('root'));MyComponent.tsx
-- -------------------- ---- -------
------ - -- ----- ---- --------
--------- ----------------- --
--------- ----------------- --
----- ----------- ------- ---------------------------------- ------------------ -
-------- -
------ -
-----
--------- ---- ----------------
------
--
-
-
------ ------- ------------结论
使用 npm 包 @mbriggs/slush-ts-boilerplate，我们能够简单地搭建一个基础的 TypeScript 项目模板，并且可以通过指令自定义一些选项。这对于初学 TypeScript 或日常开发中使用 TypeScript 的开发者非常实用。同时，这也能帮助我们提高效率以及节省时间，让我们更专注于业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244745