Webpack5 系列(九):TS 打包配置

简介: Webpack5 系列(九):TS 打包配置

一、前言

上一篇讲到库的打包,本篇将介绍 TypeScript 的打包配置。


二、TS

TypeScript 是 JavaScript 类型的超集,它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts,就需要安装特定的 loader 来“翻译” ts 语法。

2.1 依赖安装

npm install --save-dev typescript ts-loader

2.2 tsconfig.json

在根目录下新建 tsconfig.js,它是 ts 的配置文件。

{
  "compilerOptions": {
    "outDir": "./dist/", // 这个可以不写,因为在webpack配置中已经写了
    "noImplicitAny": true, // 不允许隐式any类型
    "module": "es6", // 模块引入方式
    "target": "es5", // 打包后编译成什么形式
    "jsx": "react", // 引入react
    "allowJs": true, // 在ts文件中允许引入js文件
    "moduleResolution": "node" // 引入模块的方式
  }
}

接下来打开 webpack.config.js 。

2.3 webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.ts', // 注意这里原来是 './src/index.js',需要改成 ts 结尾!
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这样一来,将会引导 webpack 进入 "./src/index.ts" ,然后利用 ts-loader 加载所有的 .ts 以及 .tsx 结尾的文件,最后在当前目录下生成一个 bundle.js 文件。

注意:

  • 入口文件需要改后缀,我们现在用 ts 了,不用 js ;
  • 配置规则中的 tsx 指的是: ts + jsx ;
  • resolve 可以配置模块的解析方式,一般常用来设置 alias 别名以及 extensions 后缀名解析顺序。


三、js 改写为 ts 的示例

3.1 js 示例

greeter.js

import _ from 'lodash';
class Greeter {
  constructor (message) {
    this.greeting = message;
  }
  greet () {
    return _.join(['Hello ', this.greeting], '');
  }
}
export default Greeter;

index.ts

import Greeter from "./ts/greeter";
let greeter = new Greeter("JavaScript!");
let button = document.createElement("button");
button.textContent = "Say Hello";
button.onclick = function () {
  alert(greeter.greet());
};
document.body.appendChild(button);

3.2 ts 示例

现在将 3.1 中的 js 示例改用 ts 编写:

greeter.ts

import * as _ from "lodash"; // 注意这里!
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return _.join(["Hello, ", this.greeting], "");
  }
}
export default Greeter;

注意:

  • 由于 lodash.js 没有默认导出,所以需要改为上面的写法。
  • 如果想要按照原来的 import _ from 'lodash'; ,则需要在 tsconfig.js 中添加参数allowSyntheticDefaultImports,将它设置为 true 即可。


{
  "compilerOptions": {
    // ...
    "allowSyntheticDefaultImports": true
  }
}

之后,和 3.1 一样,将它引入到 index.ts 文件中。

结果发现:我们的代码居然是运行不起来的。lodash 下面有一条红线:


10.jpg


四、声明文件

在 TS 中,有一类文件是以 .d.ts 结尾的,这一类文件属于类型声明文件。TS 比 JS 多了类型检查,而这个声明文件就是类型检查的关键,所以为了让 TS 能够识别第三方库的 JS,就需要安装特定的声明文件。按照错误提示,我们需要按照以下依赖:@types/lodash

npm i --save-dev @types/lodash

在我们安装完成以后,重新运行项目,即可正常运行。


小结

  • 要想在项目中添加 TS 相关的配置,则先要安装 typescript 和 ts-loader;
  • 依赖安装完成后,需要添加 tsconfig.js 和相关配置参数,以及在 webpack.config.js 中添加 ts-loader 的规则;
  • 在使用第三方库的时候,注意需要安装对应的类型声明文件,避免引用错误。


目录
相关文章
|
4天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
18 5
|
6天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
26 7
|
7天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
5天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
16 2
|
7天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。
|
20天前
|
前端开发 UED
Webpack 中处理 CSS 和图片资源的多 Loader 配置
【10月更文挑战第12天】 处理 CSS 和图片资源是 Webpack 配置中的重要部分。通过合理选择和配置多个 Loader,可以实现对这些资源的精细处理和优化,提升项目的性能和用户体验。在实际应用中,需要不断探索和实践,根据项目的具体情况进行灵活调整和优化,以达到最佳的处理效果。通过对 Webpack 中多 Loader 处理 CSS 和图片资源的深入了解和掌握,你将能够更好地应对各种复杂的资源处理需求,为项目的成功构建和运行提供坚实的基础。
43 1
|
20天前
|
前端开发 JavaScript
Webpack 中多个 Loader 的配置
【10月更文挑战第12天】使用多个 Loader 进行配置是 Webpack 中常见的操作,可以实现对各种资源的精细处理和优化。在配置时,需要根据具体需求合理选择和排列 Loader,并注意它们之间的顺序和交互关系。同时,不断了解和掌握新的 Loader 以及它们的特性,有助于更好地发挥 Webpack 的强大功能,提升项目的开发效率和质量。通过深入理解和熟练运用多个 Loader 的配置方法,你将能够更加灵活地处理各种资源,满足项目的多样化需求。
36 2
|
21天前
|
缓存 前端开发 JavaScript
深入了解Webpack:模块打包的革命
【10月更文挑战第11天】深入了解Webpack:模块打包的革命
|
19天前
|
缓存 前端开发 JavaScript
Webpack技术深度解析:模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析:模块打包与性能优化
|
21天前
|
前端开发 JavaScript 开发者
深入了解Webpack:现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack:现代JavaScript应用的打包利器