下载掌阅APP，畅读海量书库
立即打开
本章内容是本书的重点部分，主要介绍TypeScript项目的开发与配置，具体包括如何通过Babel编译工具、Rollup打包工具（以下简称Roullp工具）和webpack构建工具（以下简称webpack工具）进行TypeScript项目的开发与配置。
本章主要涉及的知识点如下。
●通过Babel编译工具编译TypeScript代码。
●通过Rollup工具打包TypeScript模块。
●通过webpack工具构建TypeScript项目。
本节主要介绍通过Babel编译工具编译TypeScript项目的方法。Babel是一款现代的JavaScript和TypeScript代码编译器，目前得到了广泛应用。
对大多数读者而言，可能对Babel编译工具并不太熟悉，但该工具在JavaScript语言开发领域扮演着十分重要的角色。Babel是一款JavaScript编译器，主要用于将基于ES6以上最新语法编写的JavaScript代码转换为向后兼容JavaScript语法的代码，以便满足运行在当前（或旧版本）浏览器中的要求。
换句话讲，Babel编译工具的作用就是通过语法转换器，让基于新版本JavaScript语言开发的代码能够运行在绝大多数的主流浏览器中。上述原因很好理解，主流浏览器厂商为了兼容性考虑，不会轻易将新增的JavaScript语法特性加入浏览器内核。但是，开发人员不这么考虑，新增的JavaScript语法特性往往能带来更好的编程体验与更高的编程效率，因此开发人员十分乐于使用这些新功能。Babel编译工具恰恰就是二者之间进行平衡的桥梁。
下面简单概括一下通过Babel编译工具能够完成的功能。
●语法转换（ES6以上→ES5、JSX→js）。
●通过polyfill方式在目标环境中添加缺失的特性（通过core-js模块实现）。
●源码转换（CommonJS→js、ts→js）。
Babel编译工具官方网站如图2.1所示。
图2.1 Babel编译工具官方网站
如图2.1所示，Babel编译工具官方网站首页演示了将“下一代”JavaScript代码转换为当前浏览器可兼容（运行）的JavaScript代码的效果，这正是Babel编译工具最显著的功能之一。
下面介绍通过Babel编译工具编译JavaScript代码的具体操作方法，这里使用的是最新的Babel 7.15版本。
第1步：通过命令行终端创建一个工程项目目录babel-ts（见图2.2）；然后，继续在该目录下创建两个子目录src和lib。
目录src用于存放源码文件，目录lib用于存放通过Babel编译工具编译后的代码文件。
第2步：在命令行终端中执行“npm init”命令，初始化工程项目并创建package.json配置文件，如图2.3所示。
图2.2 创建工程项目目录babel-ts
图2.3 初始化工程项目并创建配置文件
如图2.3所示，每条配置项均选择了默认值（用户可以自定义），操作完成后的效果如图2.4所示。
图2.4 初始化工程项目目录效果
如图2.4所示，工程项目目录中新增了名称为package.json的配置文件。package.json配置文件的内容如图2.5所示。
图2.5 package.json配置文件的内容
第3步：继续添加Babel编译工具的核心功能模块，具体包括＠babel/core、＠babel/cli和＠babel/preset-env。这3个核心功能模块的具体介绍如下。
●＠babel/core模块：Babel编译工具的核心功能。
●＠babel/cli模块：一个能够在命令行终端（终端控制台）中使用的工具。
●＠babel/preset-env模块：插件和预设功能模块，如代码转换功能等。
安装Babel编译工具核心功能模块的方法也是在命令行终端中通过npm工具完成的，详细命令如下。
安装Babel编译工具核心功能模块的过程如图2.6所示。
图2.6 安装Babel编译工具核心功能模块的过程
如图2.6所示，在命令行终端中执行“npm install”命令完成了＠babel/core、＠babel/cli和＠babel/preset-env这3个核心功能模块的安装。其中，参数--save-dev表示安装方式为“开发依赖”。
所谓开发依赖，就是在项目开发阶段所需要的依赖项，在最终的项目发行版中是不需要的。指定参数--save-dev的安装项，会记录在package.json配置文件的devDependencies字段中，具体如图2.7所示。
如图2.7所示，在devDependencies字段中记录了刚刚安装的＠babel/core、＠babel/cli和＠babel/preset-env这3个核心功能模块。
第4步：在项目根目录下创建一个命名为babel.config.json的配置文件，具体如图2.8所示。该配置文件是Babel编译工具所需的（适用于Babel 7.8.0以上版本）。
如图2.8所示，在presets预设字段中记录了＠babel/env模块。下面添加一个用于将ES6箭头语法转换为ES5语法的官方插件＠babel/plugin-transform-arrow-functions，详细命令如下。
图2.7 devDependencies字段
图2.8 创建babel.config.json配置文件
更新babel.config.json配置文件，具体如图2.9所示。
如图2.9所示，在plugins插件字段中记录了刚刚安装的＠babel/plugin-transform-arrow-functions插件。
以上工作均准确无误地完成后，就可以测试一下Babel编译工具将ES6语法转换为ES5语法的功能了。
下面先编写一个JavaScript代码，通过ES6语法中的箭头函数，实现向命令行终端中输出日志信息的功能。
图2.9 更新babel.config.json配置文件
【例2.1】 通过ES6语法中的箭头函数实现向命令行终端输出日志的功能。
相关源代码如下。
上述代码说明如下。
在第5行代码中，通过箭头函数语法定义了一个自定义函数fn。该函数返回了一行字符串信息。
在第8行代码中，通过方法console.log（）调用函数fn获取了返回值，并向命令行终端进行了输出操作。
在命令行终端中输入下述命令，通过Babel编译工具将ES6语法代码转换为ES5语法代码。
通过Babel编译工具完成语法转换如图2.10所示。
如图2.10所示，提示信息表明Babel编译工具成功转换了一个代码文件。借助Visual Studio Code开发工具的代码窗口拆分功能，将源文件（ES6语法代码）与编译后的文件（ES5语法代码）进行对比，效果如图2.11所示。
图2.10 通过Babel编译工具完成语法转换
图2.11 ES6语法代码与ES5语法代码的对比
如图2.11所示，左侧代码窗口中定义的是箭头函数，右侧代码窗口中是转换后的传统ES5语法代码。
下面在Visual Studio Code开发工具的命令行终端中通过“node”命令运行编译后的代码文件，具体如图2.12所示。
图2.12 通过“node”命令运行编译后的代码文件
如图2.12所示，命令行终端中成功输出了【例2.1】中所定义的一行字符串信息。
前面介绍了通过Babel编译工具将TypeScript代码转换为JavaScript代码的方法，本节将介绍通过Babel编译工具编译TypeScript代码的具体方法。
在最新版的Babel 7.15中，添加了对TypeScript语言的支持，开发人员只需添加＠babel/preset-typescript模块，就可以完成该功能。
添加＠babel/preset-typescript模块的详细命令如下。
另外，在某些场景下，需要添加＠babel/plugin-proposal-class-properties和＠babel/plugin-proposal-object-rest-spread插件。这两个插件分别用于转换语法特性“类属性”和“对象扩展”（二者目前均处于“提议”阶段）。
添加上述两个插件的详细命令如下。
更新babel.config.json配置文件，具体如图2.13所示。
图2.13 更新babel.config.json配置文件
如图2.13所示，预设字段中记录了刚刚添加的＠babel/preset-typescript模块，插件字段中记录了刚刚添加的＠babel/plugin-proposal-class-properties和＠babel/plugin-proposal-object-rest-spread插件。
通过“tsc--init”命令初始化一个tsconfig配置文件，用于实现自动编译TypeScript代码功能。
下面编写一个TypeScript代码，用于实现加法运算的应用。
【例2.2】 TypeScript版本加法运算的应用。
该应用的源代码如下。
上述代码说明如下。
在第5行和第6行代码中，定义了两个数字常量a和b，并进行了初始化。
在第8～10行代码中，定义了一个自定义方法add（），返回了两个数字常量a和b的算术和。
在第13行代码中，定义了一个数字常量result，赋值为自定义方法add（）的返回值。
打开package.json配置文件，在scripts字段中添加通过Babel编译工具编译TypeScript代码的配置信息，具体如图2.14所示。
图2.14 编辑package.json配置文件
添加通过Babel编译工具编译TypeScript代码的详细命令如下。
上述的“babel”命令首先指定了源文件目录src，然后通过参数--out-dir指定了编译目标文件的输出目录lib，最后通过参数--extensions指定了编译目标文件的后缀.ts。
在命令行终端中执行“npm run babel”命令，调用＠babel/cli模块执行编译TypeScript代码，具体如图2.15所示。
如图2.15所示，通过Babel编译工具已经成功将TypeScript代码转换为JavaScript代码，具体代码如【例2.3】所示。
图2.15 通过Babel编译工具编译TypeScript代码
【例2.3】 JavaScript版本加法运算的应用（通过Babel编译工具编译生成）。
该应用的源代码如下。
由上述代码可知，编译生成的JavaScript代码完整地实现了【例2.2】中定义的TypeScript代码。
在命令行终端中通过“node”命令运行编译后的JavaScript代码，具体如图2.16所示。
图2.16 运行编译后的JavaScript代码
如图2.16所示，通过Babel编译工具将TypeScript代码转换为的JavaScript代码，完整地实现了原始TypeScript代码中定义的全部功能。
本节将介绍Rollup工具，以及通过Rollup工具打包TypeScript项目的方法。
Rollup是一款JavaScript模块的打包工具，可将多个小的代码片段编译为完整的库或应用。Rollup工具与传统的CommonJS和AMD类非标准化的解决方案不同，其使用的是ES6版本JavaScript语言中的模块标准，全新的ES模块可以让开发人员自由地、无缝地按需使用库中有用的单个函数。Rollup工具的这个特性能够保证开发人员随心所欲地使用JavaScript模块函数，最大程度地发挥JavaScript语言的开发灵活性。
一般情况下，开发人员如果能将项目应用拆分为一个个较小的模块，开发工作就能变得更容易。在开发大型项目应用时，都会按照业务逻辑或功能模块等方式进行拆分，更小的模块可以显著地降低开发过程中所遇到问题的复杂程度，也可以避免代码出现异常的情况。然而，JavaScript语言的最初创造者并未考虑到上述情况（时代局限性），这导致了在早期开发过程中出现了很多问题。
幸运的是，随着ES6版本JavaScript语言的推出，为开发人员提供了import和export语法功能（ES6 Module）。该语法功能可以实现在多个脚本中共享函数和数据。虽然import和export语法已经成为ES6的事实标准，但是目前Node.js尚未支持该标准。
Rollup工具的出现确保了开发人员可以放心地使用import和export语法来编写代码，并编译为当前被广泛支持的CommonJS、AMD或IIFE等多种代码格式。CommonJS、AMD、IIFE、ESM、UMD的具体输出格式介绍如下。
●CommonJS：Node.js默认的模块规范，可以通过webpack工具来加载。
●AMD：通过RequireJS来加载。
●IIFE：自执行函数，可以通过＜script＞标签来加载。
●ESM：ES6 Module标准规范，可以通过webpack工具和Rollup工具来加载。
●UMD：兼容IIFE、AMD、CJS三种模块规范。
Rollup工具除了能够让开发人员使用标准的ES模块，还可以对所用的代码进行静态分析，并将未实际使用的代码进行剔除。Rollup工具的这一特性可以让开发人员放心地使用已有的工具和模块来创建应用，而不需要担心存在冗余的依赖和代码。
Rollup工具官方网站如图2.17所示。
图2.17 Rollup工具官方网站
本节将介绍通过Rollup工具打包JavaScript项目的具体操作方法，这里使用的是Rollup 3.17版本。
第1步：确认已经安装好Node.js开发环境和npm工具（此处不再赘述）。
第2步：通过命令行终端创建一个Rollup项目目录rollup-js，并在该目录下创建两个子目录src和dist。其中，目录src用于存放源码文件，目录dist用于存放通过Rollup工具输出的Bundle文件。
在命令行终端中执行“npm init”命令，完成初始化项目并创建package.json配置文件。
第3步：通过命令行终端安装Rollup工具模块及相关插件，具体命令如下。
第4步：在目录src中新建几个JavaScript代码文件，用于测试Rollup工具的打包功能。
【例2.4】 测试Rollup工具打包JavaScript代码模块的应用（1）。
该应用的源代码如下。
上述代码说明如下。
在第4行和第5行代码中，通过import关键字导入了两个子模块sayHelloTo和sayByeTo。
在第7～10行代码中，调用方法sayHelloTo（）和sayByeTo（）输出两行文本信息。
【例2.5】 测试Rollup工具打包JavaScript代码模块的应用（2）。
该应用的源代码如下。
上述代码说明如下。
在第4～8行代码中，定义了子模块sayHelloTo，传递了一个参数name，并通过export关键字导出了该子模块。
在第5～7行代码中，通过参数name定义了一行文本信息，作为该子模块的返回值。
【例2.6】 测试Rollup工具打包JavaScript代码模块的应用（3）。
该应用的源代码如下。
上述代码说明如下。
在第4～8行代码中，定义了子模块sayByeTo，传递了一个参数name，并通过export关键字导出了该子模块。
在第5～7行代码中，通过参数name定义了一行文本信息，作为该子模块的返回值。
第5步：这是关键的一步，在rollup-js项目根目录下新建rollup.config.js配置文件，并添加Rollup工具的相关配置信息，具体如图2.18所示。
图2.18 新建rollup.config.js配置文件
如图2.18所示，rollup.config.js配置文件通过export关键字导出了一组配置信息，input字段中定义了应用的入口文件src/main.js，output字段中定义了一组应用输出文件路径及对应的文件格式CJS、es和IIFE。其中，文件格式IIFE使用了代码压缩插件的方法terser（）。
配置好rollup.config.js配置文件后，需要将rollup配置加入rollup-js项目的package.json配置文件的scripts字段，具体如图2.19所示。
如图2.19所示，dev编译选项中定义了使用Rollup工具编译为开发版，build编译选项中定义了使用Rollup工具编译为生产版。
第6步：通过“npm run dev”命令执行打包JavaScript代码模块的操作，具体如图2.20所示。
如图2.20所示，命令行终端中给出的提示信息表明通过Rollup工具打包JavaScript代码模块的操作成功完成了。
图2.19 编辑package.json配置文件
图2.20 通过“npm run dev”命令执行打包JavaScript代码模块的操作
第7步：查看目录dist中生成的JavaScript代码模块文件，具体如图2.21、图2.22和图2.23所示。
图2.21 查看目录dist中生成的代码模块main.bundle.js
图2.21 查看目录dist中生成的代码模块main.bundle.js（续）
图2.22 查看目录dist中生成的代码模块mian.es.js
图2.23 查看目录dist中生成的代码模块mian.min.js
如图2.21所示，代码模块main.bundle.js将应用入口main（main.js）和子模块（hello.js和bye.js）打包在一起了，同时添加了使用JavaScript语言严格模式的关键字use strict。
如图2.22所示，代码模块main.es.js与main.bundle.js相同，但没有添加使用JavaScript语言严格模式的关键字use strict。
如图2.23所示，代码模块main.min.js将JavaScript代码进行了压缩，是通过rollup-plugin-terser插件实现的。
第8步：在命令行终端中测试一下以上3个JavaScript代码模块，具体如图2.24所示。
图2.24 在命令行终端中的测试结果（1）
如图2.24所示，3种文件格式（CJS、es和IIFE）的JavaScript代码模块全部输出了正确的运算结果。
本节将尝试通过TypeScript代码重构一下上面的JavaScript应用，并通过Rollup工具输出多种文件格式的代码模块。
第1步：编写TypeScript代码需要安装语言开发包并创建相关ts（tsconfig.json）配置文件，具体命令如下。
第2步：安装Rollup工具模块及相关插件，具体命令如下。
第3步：安装Rollup工具关联TypeScript语言的相关插件，具体命令如下。
第4步：这是关键的一步，在rollup-ts项目根目录下新建rollup.config.js配置文件，并添加Rollup工具相关的配置信息，具体如图2.25所示。
图2.25 新建rollup.config.js配置文件
如图2.25所示，rollup.config.js配置文件先通过import关键字导入了一组Rollup插件，再通过export关键字导出了一组配置信息。其中，input字段中定义了应用的入口文件src/main.ts，output字段中定义了一组应用输出文件路径及对应的文件格式CJS、es和IIFE。其中，文件格式IIFE使用了代码压缩插件的方法terser（）。
配置好rollup.config.js配置文件后，需要将rollup配置加入rollup-ts项目的package.json配置文件的scripts字段，具体如图2.19所示。
第5步：在目录src中新建几个TypeScript代码文件，用于测试Rollup工具的打包功能。
【例2.7】 测试Rollup工具打包TypeScript代码模块的应用（1）。
该应用的源代码如下。
上述代码说明如下。
在第4行和第5行代码中，通过import关键字导入了两个子模块sayHelloTo和sayByeTo。
在第7～10行代码中，调用方法sayHelloTo（）和sayByeTo（）输出两行文本信息。
【例2.8】 测试Rollup工具打包TypeScript代码模块的应用（2）。
该应用的源代码如下。
上述代码说明如下。
在第4～8行代码中，定义了子模块sayHelloTo，传递了一个字符串类型参数name，并通过export关键字导出了该子模块。
在第5～7行代码中，通过参数name定义了一行文本信息，作为该子模块的返回值。
【例2.9】 测试Rollup工具打包TypeScript代码模块的应用（3）。
该应用的源代码如下。
上述代码说明如下。
在第4～8行代码中，定义了子模块sayByeTo，传递了一个字符串类型参数name，并通过export关键字导出了该子模块。
在第5～7行代码中，通过参数name定义了一行文本信息，作为该子模块的返回值。
第6步：通过“npm run dev”命令执行打包TypeScript代码模块的操作，具体如图2.26所示。
图2.26 通过“npm run dev”命令执行打包TypeScript代码模块的操作
如图2.26所示，命令行终端中给出的提示信息表明通过Rollup工具打包TypeScript代码模块的操作成功完成了。
第7步：查看目录dist中生成的TypeScript代码模块文件，具体如图2.27、图2.28和图2.29所示。
图2.27 查看目录dist中生成的代码模块main.bundle.ts.js
图2.28 查看目录dist中生成的代码模块mian.es.ts.js
图2.29 查看目录dist中生成的代码模块mian.min.ts.js
第8步：在命令行终端中测试一下以上3个TypeScript代码模块，具体如图2.30所示。
图2.30 在命令行终端中测试结果
如图2.30所示，3种文件格式（CJS、es和IIFE）的TypeScript代码模块全部输出了正确的运算结果。
本节将介绍webpack工具，以及通过webpack工具构建TypeScript项目的方法。
webpack是用于Web应用程序（基于JavaScript、TypeScript等前端语言）的静态模块打包工具。当使用webpack工具处理Web应用程序时，会首先在内部从一个或多个入口点构建一个依赖图（Dependency Graph），然后应用中所需的每个模块组合成一个或多个Bundle（均为静态资源），用于展示Web应用程序内容。
webpack工具中一些核心概念的简单介绍如下。
●入口（Entry）：入口起点（Entry Point），指示webpack工具应该使用哪个模块来作为构建内部依赖图的开始。入口的默认值是./src/index.js。通过在webpack configuration中手动配置属性entry可以指定一个或多个不同的入口。
●出口（Output）：出口终点（Output Point），指示webpack工具输出所创建的Bundle的位置，以及如何命名这些文件。出口的默认值是./dist/main.js，其他生成文件均默认放在./dist文件夹中。通过在webpack configuration中手动配置属性output可以配置自定义的处理过程。
●Loader：因为webpack工具只能理解JavaScript或JSON格式的文件，所以可以通过Loader让webpack工具能够处理其他类型的文件，并将这些文件转换为有效的模块以供应用程序使用，以及添加到依赖图中。
●插件（Plugin）：相比于Loader用于转换某些类型的模块，插件则可以用于执行范围更广的任务。这些任务具体包括打包优化、资源管理、环境变量注入等。想要使用一个插件，只需通过方法require（）加载该插件，并把该插件添加到webpack configuration中的参数数组plugins中。
●模式（Mode）：应用开发模式。通过选择development、production或none中的一个，设置webpack configuration中的参数mode。参数mode的默认值为production。
●浏览器兼容性（Browser Compatibility）：webpack工具支持所有符合ES5标准规范的浏览器（不支持IE8及以下版本的）。webpack工具的方法import（）和require.ensure（）必须通过Promise功能来实现。如果想要支持旧版本浏览器，则在使用这些表达式之前加载polyfill。
●环境（Environment）：webpack 5版本运行于Node.js v10.13.0之后的版本。
webpack工具官方网站如图2.31所示。
图2.31 webpack工具官方网站
本节将介绍应用webpack工具构建JavaScript项目的具体操作方法，这里使用的是webpack 5版本。
第1步：确认已经安装好Node.js开发环境和npm模块（此处不再赘述）。
第2步：通过命令行终端创建一个webpack项目目录webpack-ts，并在该目录下创建两个子目录src和dist。其中，目录src用于存放源码文件，目录dist用于存放通过webpack工具输出的Bundle文件。
第3步：通过在命令行终端中执行“npm init”命令，完成初始化项目并创建package.json配置文件。
第4步：通过命令行终端安装webpack工具所需的webpack-cli命令行工具（webpack工具自身的命令行工具）和webpack工具的核心模块，具体命令如下。
指定参数--save-dev的安装项，会记录在package.json配置文件的devDependencies字段中，具体如图2.32所示。
图2.32 更新后的package.json配置文件
如图2.32所示，devDependencies字段中记录了刚刚安装的webpack工具的核心模块和webpack-cli命令行工具。
第5步：在目录src中新建一个JavaScript代码文件，用于测试webpack工具的打包功能。
【例2.10】 测试webpack工具打包JavaScript代码文件功能的应用。
该应用先定义了一条文本信息，再将其动态添加到HTML页面的段落＜p＞元素中，并进行显示，其源代码如下。
上述代码说明如下。
在第2行代码中，定义了一个变量s，并初始化为一段文本信息。
在第8行代码中，将变量s的内容动态添加到段落＜p＞元素中。
第6步：在目录dist中新建一个HTML页面文件（index.html），具体如下。
【例2.11】 Web应用中的HTML页面文件。
该HTML页面文件中定义了一个段落＜p＞元素，其源代码如下。
在上述代码中，第11行代码定义了一个空的段落＜p＞元素，后续将通过JavaScript代码添加段落内容。
第7步：这是关键一步，在目录webpack-ts下新建webpack.config.js配置文件，并添加webpack工具的相关配置信息，具体如图2.33所示。
如图2.33所示，webpack.config.js配置文件通过module.exports导出一组配置信息，属性entry中定义了应用入口（'./src/index.js'），属性output中定义了应用出口（'bundle.js'）。
配置好webpack.config.js配置文件后，需要将webpack配置加入项目的package.json配置文件的scripts字段，具体如图2.34所示。
图2.33 新建webpack.config.js配置文件
图2.34 编辑package.json配置文件
如图2.34所示，在属性build中定义了使用webpack工具。这样，就可以通过“npm run build”命令执行打包Web应用的操作了，具体如图2.35所示。
图2.35 通过“npm run build”命令执行打包Web应用的操作（1）
如图2.35所示，命令行终端中给出的提示信息表明通过webpack工具打包Web应用的操作成功完成了。
第8步：查看目录dist中生成的HTML页面文件和JavaScript代码文件，具体如图2.36所示。
如图2.36所示，目录dist中显示了通过webpack工具打包生成的JavaScript代码文件bundle.js。
第9步：通过Firefox浏览器打开HTML页面文件index.html，具体如图2.37所示。
图2.36 查看目录dist中生成的文件（1）
图2.37 通过浏览器打开HTML页面文件（1）
如图2.37所示，页面中显示了通过JavaScript代码文件index.js动态生成的文本信息。
本节尝试通过TypeScript代码重构一下2.3.2节中的Web应用，并通过webpack工具构建项目。这里需要借助webpack工具官方提供的ts-loader插件，具体可以参考其官方网站的内容。
第1步：安装typescript模块和ts-loader插件，详细命令如下。
安装好typescript模块和ts-loader插件之后，需要先手动添加一个tsconfig.json配置文件（具体操作见前文），并在webpack.config.js配置文件中添加处理TypeScript代码的相关配置信息，具体如图2.38所示。
如图2.38所示，webpack工具先直接从./src/index.ts进入，再通过ts-loader加载所有的.ts格式文件，并且输出一个bundle-ts.js目标文件。
第2步：在目录src中新建一个TypeScript代码文件，用于替换原来的JavaScript代码文件的功能。
【例2.12】 测试webpack工具打包TypeScript代码文件功能的应用。
该应用先定义一条文本信息，再将其动态添加到HTML页面的段落＜p＞元素中进行显示，其源代码如下。
图2.38 修改webpack.config.js配置文件处理TypeScript功能
上述代码说明如下。
在第2行代码中，定义了一个字符串类型变量s，并初始化为一段文本信息。
在第8行代码中，将变量s的内容动态添加到段落＜p＞元素中。
第3步：通过“npm run build”命令执行打包Web应用的操作，具体如图2.39所示。
图2.39 通过“npm run build”命令执行打包Web应用的操作（2）
如图2.39所示，命令行终端中给出的提示信息表明通过webpack工具打包Web应用的操作成功完成了。
第4步：查看目录dist中生成的HTML页面文件和JavaScript代码文件，具体如图2.40所示。
如图2.40所示，目录dist中显示了通过webpack工具打包生成的JavaScript代码文件bundle-ts.js。
第5步：通过Firefox浏览器打开HTML页面文件index.html，具体如图2.41所示。
图2.40 查看目录dist中生成的文件（2）
图2.41 通过浏览器打开HTML页面文件（2）
如图2.41所示，页面中显示了通过TypeScript代码文件index.ts动态生成的文本信息。
本章主要介绍了TypeScript项目的开发与配置，包括通过Babel编译工具编译、Rollup工具打包和webpack工具构建TypeScript项目的实战应用。