npm 包 @gitzone/tsbuild 使用教程

简介

@gitzone/tsbuild 是一个基于 TypeScript 的构建工具,它提供了一些优秀的特性,例如更好的类型推断、代码的可读性以及更好的代码重构。它解决了修改 webpack 配置时繁琐的问题,让我们更专注于业务开发。

安装

在使用 @gitzone/tsbuild 前,我们需要安装它,安装命令如下:

--- ------- ---------------- ----------

安装完毕之后,通过下面的命令,我们可以在项目中开始使用它:

--- ------- ----

配置

配置文件在使用上显得更加重要,我们需要了解 @gitzone/tsbuild 的配置文件。

下面是 @gitzone/tsbuild 的默认配置:

-
  -------- ---------------
  --------- -
    ------- -------
    ----------- ----------
  --
  ------------- -----
  ---------- -
    ------------- ------- ------- ------ -------
  --
  -------- -
    -
      ------- --------------
      ------ -
        --------------------------
        -
          --------- ------------
          ---------- -
            ---------------- ----
          -
        -
      --
      ---------- --------------
    --
    -
      ------- -----------------------
      ------ -
        -------------
      -
    --
    -
      ------- ------------------------------
      ------ -
        -------------
      -
    -
  -
-

它包含了以下字段:

  • entry:入口文件
  • output:构建后的输出目录
  • publicPath:静态资源地址前缀,一般使用 "./"
  • resolve:文件后缀名,支持 TypeScript、JavaScript、JSX 和 TypeScript XML
  • rules:构建规则,使用 @gitzone/tsbuild/loader 解析 TypeScript 文件

在浏览器中使用 JavaScript 类库时,需要将类库打包成一个文件后在引入,而在 node.js 中则不需要。实现这个需求是很简单的。

-
  --------- -
    ---------------- ------
    ---------- --------------
  --
-

其中,libraryTarget 可以设置为 commonjs、amd、umd 或者 window,直接使用 library 作为全局变量。

运行

在配置完毕之后,我们就可以运行起来,让它将编写的 TypeScript 代码构建发布出来。

开发模式

--- --- ---

打包发布

--- --- -----

结束语

@gitzone/tsbuild 方便了前端开发工作,在开发 react、vue 和 node.js 应用程序时是非常有用的。它大大减少了开发人员处理构建工具方面的负担,使他们能够专注于业务逻辑的开发。如果您对 TypeScript 开源社区感兴趣,那么我们希望您在这个社区中留下自己的足迹。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/198060


猜你喜欢

  • npm 包 prettier-config-ackee 使用教程

    什么是 prettier? prettier 是一个现代化的代码格式化工具,它可以帮助开发人员规范化代码格式,增强代码可读性,并且不会造成冲突。 在前端开发中,我们常常遇到不同开发团队或者不同程序员在...

    5 年前
  • npm 包 @types/lodash.snakecase 使用教程

    什么是 lodash.snakecase? lodash.snakecase 是一个将字符串转换为下划线风格的 JavaScript 工具库。这个库可以方便地将一个字符串从驼峰式转换为下划线式。

    5 年前
  • npm 包 @types/lodash.isempty 使用教程

    前言 lodash 是一个非常流行的 JavaScript 工具库,其作为一个实用工具库一直被广泛应用于 JavaScript 开发中。lodash.isempty 则是 lodash 当中的一个关于...

    5 年前
  • npm 包 @types/lodash.defaultsdeep 使用教程

    在前端开发中,经常会用到 Lodash 这个工具库。为了方便 TypeScript 代码的编写,使用 Lodash 时,我们需要安装 @types/lodash 这个 TypeScript 类型定义包...

    5 年前
  • npm 包 @types/inflection 使用教程

    @types/inflection 是一款 TypeScript 类型定义文件,用于为操作字符串的 JavaScript 库 inflection 提供类型提示。inflection 可以处理英文单词...

    5 年前
  • npm 包 temp-dir 使用教程

    在前端开发中,我们经常需要创建临时文件夹来存放一些临时的文件,比如说日志文件、缓存文件等等。虽然手动创建临时文件夹并不困难,但是如果能够使用 npm 包来简化这个过程,会大大提高我们的开发效率。

    5 年前
  • npm 包 @types/is-root 使用教程

    在前端开发过程中,我们经常需要检查用户是否有 root 权限以及其它权限等。而 npm 包 @types/is-root 提供了一种简单且易于理解的方式来判断当前环境是否具有 root 权限。

    5 年前
  • npm 包 @types/gzip-size 使用教程

    简介 在前端开发中,为了提高网站的加载速度,很多网站都会采用 Gzip 压缩技术来减小页面的大小。而在 JavaScript 中,如果想要获取某个文件被 Gzip 压缩后的大小,我们可以使用 npm ...

    5 年前
  • npm 包 phreatic 使用教程

    前言 在前端开发中,我们经常需要处理地图数据、可视化、图表等一系列数据展示、处理的任务。而 phreatic 可以帮我们更轻松地实现这些功能。 什么是 phreatic phreatic 是一个基于 ...

    5 年前
  • npm 包 fastify-helmet 使用教程

    在 Web 开发中,安全性一直是非常关键的一个问题。为了提高 Web 应用程序的安全性,“安全头盔”组件是必不可少的。 在 Node.js 功能强大的生态系统中,有许多工具可以实现这个目标。

    5 年前
  • npm包 fastify-boom使用教程

    简介 npm是JavaScript世界的包管理工具。fastify-boom是一个npm包,提供了对Boom插件的支持,可以用在Fastify应用框架中,方便地处理HTTP响应。

    5 年前
  • npm 包 bookshelf-paranoia 使用教程

    什么是 bookshelf-paranoia bookshelf-paranoia 是一个基于 bookshelf.js 的插件,可以对数据表中的数据进行删除操作,逻辑上的删除会将目标数据的 del_...

    5 年前
  • npm 包 bookshelf-eloquent 使用教程

    什么是 bookshelf-eloquent bookshelf-eloquent 是一个基于 Node.js 平台的 ORM(对象关系映射)库,使得开发者可以使用 JavaScript 对象来操作数...

    5 年前
  • npm 包 @iguazu/yaguar 使用教程

    在前端工程化中,npm 包是重要的工具,它们可以方便地完成日常开发工作。在本文中,我们将介绍如何使用 @iguazu/yaguar 这个 npm 包来实现前端开发中常见的表单验证功能。

    5 年前
  • npm 包 serve-placeholder 使用教程

    在前端开发中,我们经常需要在页面中使用一些占位图像。而像 Lorem Pixel 这样的在线服务通常在开发环境下不太稳定。为了更好地进行本地开发和测试,我们可以使用 npm 包 serve-place...

    5 年前
  • npm 包 browserslist-useragent 使用教程

    如果你是一名前端工程师,你一定知道浏览器兼容性是一个非常重要的问题。在这个要求不断提升的时代,如何保证我们的网站在不同浏览器中都可以正常显示和运行,是我们需要考虑的一个重要问题。

    5 年前
  • npm 包 @types/pify 使用教程

    前言 在前端开发中,使用第三方库是非常常见的。而大多数第三方库都是用 JavaScript 编写的,这意味着我们在使用这些库的时候,需要使用 TypeScript 进行类型检查。

    5 年前
  • npm 包 @nuxtjs/youch 使用教程

    在前端开发中,调试是非常重要的一环。当我们开发一个应用时,难免会遇到一些错误和异常。如何快速地定位问题并进行调试呢?这时候,一个好用的错误展示工具就显得尤为重要。@nuxtjs/youch 就是一个非...

    5 年前
  • npm 包 @etsx/utils 使用教程

    介绍 在将 Vue.js 应用程序构建成服务端渲染应用时,我们需要使用服务器端的工具以及一些辅助工具来帮助我们快速完成应用程序的构建。这些工具通常需要涉及各类模块的引入和安装。

    5 年前
  • npm 包 @etsx/renderer 使用教程

    前言 随着移动互联网和 Web 技术的发展,前端技术变得越来越重要。而 npm 包 @etsx/renderer 的出现,为前端工程师带来了更加高效和便捷的开发方式。

    5 年前

相关推荐

    暂无文章