如何在 Webpack 中使用 TypeScript

Webpack 是一款十分流行的前端打包工具,而 TypeScript 则是被越来越多前端工程师所重视并使用的 JavaScript 超集语言。本文将介绍如何在 Webpack 中使用 TypeScript。

安装

首先,我们需要安装一些必要的依赖:

使用 npm:

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

使用 yarn:

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

配置 Webpack

我们需要在 Webpack 的配置文件中,添加对 TypeScript 的支持。

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

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

其中,entryoutput 分别是打包入口和打包输出路径。

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