Webpack 中文文档(v4.15.1) 目录

webpack TypeScript

T> 本指南继续沿用起步指南中的代码示例。

TypeScript 是 JavaScript 的超集,为其增加了类型系统,可以编译为普通的 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行集成。

基础安装

首先,执行以下命令,安装 TypeScript 编译器(compiler)和 loader:

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

现在,我们将修改目录结构和配置文件:

project

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

tsconfig.json

这里我们设置一个基本的配置,来支持 JSX,并将 TypeScript 编译到 ES5……

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

查看 TypeScript 官方文档了解更多关于 tsconfig.json 的配置选项。

想要了解 webpack 配置的更多信息,请查看配置相关概念。

现在让我们在 webpack 配置中处理 TypeScript:

webpack.config.js

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

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

这会直接将 webpack 的入口起点指定为 ./index.ts,然后通过 ts-loader 加载所有的 .ts.tsx 文件,并且在当前目录输出一个 bundle.js 文件。

Loader

ts-loader

在本指南中,我们使用 ts-loader,因为它能够很方便地启用额外的 webpack 功能,例如将其他 web 资源导入到项目中。

source map

想要了解 source map 的更多信息,请查看开发指南。

要启用 source map,我们必须配置 TypeScript,以将内联的 source map 输出到编译过的 JavaScript 文件。必须在 TypeScript 配置中添加下面这行:

tsconfig.json

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

现在,我们需要告诉 webpack 提取这些 source map,并内联到最终的 bundle 中。

webpack.config.js

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

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

查看 devtool 文档以了解更多信息。

使用第三方库

当从 npm 安装第三方库时,一定要牢记同时安装这个库的类型声明文件。你可以从 TypeSearch 中找到并安装这些第三方库的类型声明文件。

举个例子,如果想安装 lodash 这个库的类型声明文件,我们可以运行下面的命令:

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

想了解更多,可以查看这篇文章

导入其他资源

要在 TypeScript 里使用非代码资源,我们需要告诉 TypeScript 如何兼容这些导入类型。那么首先,我们需要在项目里创建 custom.d.ts 文件,这个文件用来编写自定义的类型声明。让我们将 .svg 文件进行声明设置:

custom.d.ts

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

这里,我们通过指定任何以 .svg 结尾的导入,并将模块的 content 定义为 any,将 SVG 声明一个新的模块。我们可以通过将类型定义为字符串,来更加显式地将它声明为一个 url。同样的理念适用于其他资源,包括 CSS, SCSS, JSON 等。

构建性能

W> 这可能会降低构建性能。

关于构建工具,请查看构建性能指南。


原文:https://webpack.js.org/guides/typescript/

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

上一篇:渐进式网络应用程序
下一篇:迁移到新版本