简介
随着前端技术的不断发展和应用场景的不断扩大，工程师们也在不断的探索前端的新方向。其中之一就是使用 TypeScript 开发 Universal 应用。
本文将介绍如何使用 npm 包 ts-universal 来实现一个基于 TypeScript 的 Universal 应用，包括如何安装 ts-universal，如何配置 ts-universal，以及如何使用 ts-universal 打包和运行 Universal 应用。
安装 ts-universal
ts-universal 是一个包含了所有生成 Universal 应用所需的配置和依赖的 npm 包。要使用 ts-universal，首先需要在项目中安装 ts-universal：
npm install ts-universal --save-dev
配置 ts-universal
配置 Webpack
ts-universal 的核心是 Webpack。为了使用 ts-universal，需要对 Webpack 进行一些配置。以下是一个基本的 Webpack 配置文件：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- -------------
------ -------------------- ------ -------------
------- -
----- -------------------- --------- ----------
--------- ------------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- ---------------
--
--
--
-------- -
----------- -------- ------ -------
--
--这个配置文件主要是定义了 entry 文件，输出文件路径以及通过 babel-loader 处理 TypeScript 文件。
为了使用 ts-universal，需要对 Webpack 进行一些修改：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------- - --------------------------------
-------------- - -------------
----- -------------
------ -------------------- ------ -------------
------- -
----- -------------------- --------- ----------
--------- ------------
--
---ts-universal/webpack 方法返回一个修改过的 Webpack 配置对象。使用这个方法可以让 ts-universal 自动为项目做出以下的修改：
- 支持 Server-side rendering。
- 自动使用 TypeScript 3.7 以上版本。
- 自动配置 Webpack 打包和构建。
配置 Babel
为了让 Webpack 能够正确地编译 TypeScript 文件，我们还需要配置 Babel。
以下是一个基本的 Babel 配置文件：
-- -------------------- ---- -------
-
---------- -
---------------------------
----------------------
-
--------------------
-
---------- -
------------ ----
-
-
-
--
---------- -
--------------------------------------
--------------------------------
-
-这里需要安装 @babel/preset-typescript 插件，它能够将 TypeScript 编译成 JavaScript。ts-universal 会自动识别 Babel 配置以及配置文件中的所有依赖。
配置 tsconfig
ts-universal 需要知道哪些文件应该在 Server-side rendering 中使用，因此需要定义一个 tsconfig.js 启用这些文件。以下是一个基本的 tsconfig.js 配置文件：
{
"extends": "./node_modules/ts-universal/tsconfig.json",
"compilerOptions": {
"outDir": "./dist"
},
"include": ["src/**/*"]
}这里的 extends 告诉 TypeScript 使用 ts-universal 的默认配置，include 定义了 ts 编译的文件路径，outDir 指定了 ts 编译后的输出路径。
使用 ts-universal 打包和运行 Universal 应用
现在已经完成了 ts-universal 的配置，可以开始构建并运行 Universal 应用了。
构建
运行以下命令来执行初次构建：
npm run build
构建完成后，生成的 Server-side rendering 代码将存在于 dist 目录中。
运行
运行以下命令来启动应用程序：
npm start
然后就能够在浏览器中访问 Universal 应用了。
示例代码
本文的示例代码可在以下仓库中获得：
https://github.com/example/ts-universal-example
结论
ts-universal 是一个非常有用的 npm 包，它可以简化 Universal 应用程序的开发过程，并提供了大量的示例代码和配置文件供参考。在掌握 ts-universal 的使用方法后，我们将能够更快地开发出高质量的 Universal 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/58245