在现代的前端开发中，TypeScript 已经成为一个非常重要的工具。在 TypeScript 中编写和管理代码能够大幅提高开发效率和代码质量。但是，在浏览器中运行 TypeScript 代码需要将其编译成 JavaScript，而这一过程需要使用到 rollup 这样的打包工具。
本文将介绍一个名为 @markis/rollup-plugin-typescript 的 npm 包，它可以让你更加方便地使用 rollup 打包 TypeScript 代码。
安装
使用 npm 进行安装：
npm install --save-dev @markis/rollup-plugin-typescript typescript rollup
@markis/rollup-plugin-typescript 的依赖中同时包含了 TypeScript 和 rollup，因此需要同时安装这两个包。
在 rollup 配置中使用
@markis/rollup-plugin-typescript 是 rollup 的一个插件，因此需要在 rollup 配置中引入它。在 rollup.config.js 中添加如下代码：
-- -------------------- ---- -------
------ ---------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
-------------
--
--plugin 的配置
@markis/rollup-plugin-typescript 中提供了若干个配置项，可以自定义插件的行为。
tsconfig
指定 TypeScript 的配置文件路径。默认为 './tsconfig.json'。
-- -------------------- ---- -------
------ ---------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
------------
--------- -----------------------
---
--
--exclude
指定需要排除的文件或文件夹。默认为空数组。
-- -------------------- ---- -------
------ ---------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
------------
-------- -
------------------
-----------
--
---
--
--include
指定需要包含的文件或文件夹。默认为数组 ['src//*.ts', 'src//.tsx', 'typings/**/.d.ts']。
-- -------------------- ---- -------
------ ---------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
------------
-------- -
--------------
---------------
--------------------
----------------
--
---
--
--factory
自定义 TypeScript 编译器的创建方法。可以用来替换默认的编译器，或者扩展编译器的功能。
-- -------------------- ---- -------
------ ---------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
------------
-------- ---------- -------- -- -
-- --- ---------- ---
----- --------------- - - --------------------------- --
-------------------------------- - -----
----- -------- - ---------------------------------------
-- ------
----- ---------------- - ---- ------------ --------------- -- -
-- ----------------- -- --------------------- --- -------- -
--------------------- - -----
-
--
------ -
---------
-----------------
--
--
---
--
--示例代码
index.ts
export function hello(name: string): string {
return `Hello, ${name}!`;
}rollup.config.js
-- -------------------- ---- -------
------ ---------- ---- -----------------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
--
-------- -
-------------
--
--使用
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -------------
------- ------------------------------
-------
------
--------
----- ------- - ---------------
---------------------
---------
-------
-------总结
使用 @markis/rollup-plugin-typescript 插件能够更加方便地在 rollup 中打包 TypeScript 代码，并且提供了丰富的配置项。希望本文能够对大家有所帮助，也希望大家在使用时多多尝试，发现更多好用的配置和特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcb967216659e244651