npm 包 @mbriggs/slush-ts-boilerplate 使用教程

阅读时长 6 分钟读完

当我们使用 TypeScript 开发时,我们需要一些基本环境和工具,例如模板、编译器、测试工具等等。一个好的开发工具能够帮助我们快速搭建开发环境,并且提高效率。今天,我为大家介绍一个非常实用的 npm 包 @mbriggs/slush-ts-boilerplate,它能够使我们在 TypeScript 领域内快速搭建一个基础项目模板,并提供了简单易用的指令和配置,节省了我们很多时间,让我们能够专注于业务需求。

环境要求

  • Node.js : ^14.15.1
  • Slush: ^1.1.0

安装

首先,确保你安装了最新版本的 Nodejs。然后,我们在命令行中运行以下命令:

这些指令将在全局命令行中安装 slush 和 @mbriggs/slush-ts-boilerplate。

使用

在命令行中,我们可以使用 slush 参数调用脚手架指令,如下:

这将初始化一个全新的 TypeScript 项目,具体步骤如下:

  1. 初始化名称和描述信息
  2. 初始化项目结构与配置文件
  3. 自定义配置及基础项目

完成上述步骤后,我们的 TypeScript 项目就已经被初始化了,并且可以通过运行 npm start 指令来启动根文件,然后在浏览器上输入 localhost:8080 访问我们的页面。

自定义配置

我们在开始初始化项目时,也可以选择自定义一些配置。通过运行 slush @mbriggs/slush-ts-boilerplate 指令时,在选择 “Do you need some customization?” 选项时,我们可以选择输入 y 以配置一些自定义选项,这些选项包括:

  1. Web workers 开启 Web Worker (是一个运行在后台的 JavaScript,独立于其他脚本,不会影响页面渲染的部分)。如果选择开启 Web Worker,将会自动创建相应的目录和文件,并在 webpack.config.js 文件中配置。

  2. Redux 开启 Redux。如果选择开启 Redux 将会自动安装对应的依赖,同时自动生成相关配置,例如建立这些目录:

  3. Routing 开启路由。如果选择开启路由将会自动安装路由相关的依赖,并创建相应的目录和文件,例如建立这些目录:

  4. 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

纠错
反馈