Webpack 是一款十分流行的前端打包工具,而 TypeScript 则是被越来越多前端工程师所重视并使用的 JavaScript 超集语言。本文将介绍如何在 Webpack 中使用 TypeScript。
安装
首先,我们需要安装一些必要的依赖:
使用 npm:
--- ------- ------- ----------- ---------- --------- ----------
使用 yarn:
---- --- ------- ----------- ---------- --------- -----
配置 Webpack
我们需要在 Webpack 的配置文件中,添加对 TypeScript 的支持。
----- ---- - ---------------- -------------- - - ------ ----------------- ------- - --------- ------------ ----- ----------------------- ------- -- ------- - ------ - - ----- ---------- ---- ------------ -------- -------------- - - -- -------- - ----------- -------- ------ ------ - --
其中,entry
和 output
分别是打包入口和打包输出路径。
在 module.rules
的数组中,我们添加一条针对 .tsx?
文件的规则,依赖于 ts-loader
,并将 node_modules
目录排除掉。
在 resolve.extensions
中,我们声明项目中的文件可以省略的后缀名,例如 ".ts" 和 ".tsx"。
配置 TypeScript
在根目录下,新建一个名为 tsconfig.json 的文件,这是我们的 TypeScript 配置文件。该文件的配置将告诉 TypeScript 如何编译我们的代码。下面是一个基础的 tsconfig.json 文件配置:
- ------------------ - --------- ---------- ---------------- ----- --------- ------ --------- ------ ------ ------- -- ---------- -------------- -
其中,compilerOptions
是编译选项配置。
outDir
: 编译后输出的目录。noImplicitAny
: 禁用隐式的 any 类型,确保类型安全性。module
: 编译的模块代码规范。target
: 要编译到的 JavaScript 版本。jsx
: 针对 React 应用项目的配置。
示例代码
假设我们有一个名为 index.ts 的文件:
-------- ------ ------- -- -------- ------ - ------ - - -- - ------------------------- - ------ --------------
在命令行中使用 Webpack 进行打包:
--- -------
或者执行我们在 package.json 文件中添加的 script 命令:
- ---------- - -------- --------- - -
然后,我们就可以执行 npm run build
进行打包了。
打包结束后,我们可以在 dist 目录下看到生成的 bundle.js 文件。在浏览器中打开 index.html,我们可以看到界面输出了 15。
结论
在 Webpack 中使用 TypeScript 并不难,在本文中,我们介绍了如何在 Webpack 中配置 TypeScript,并给出了一个基础的 tsconfig.json 示例。这对想要在已有开发环境的前端项目中添加 TypeScript 的同学,有一定程度的指导意义。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671b7c2c9babaf620fac096c