Webpack4 配置TS Loader

2024-08-23 22:08
文章标签 配置 ts loader webpack4

本文主要是介绍Webpack4 配置TS Loader,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

TypeScript 是 JavaScript 的一个超集,主要提供了类型检查系统和对 ES6 语法的支持,但不支持新的 API。 目前没有任何环境支持运行原生的 TypeScript 代码,必须通过构建把它转换成 JavaScript 代码后才能运行。

TypeScript 官方提供了能把 TypeScript 转换成 JavaScript 的编译器:typescript 。 你需要在当前项目根目录下新建一个用于配置编译选项的 tsconfig.json 文件( 不是必须的 ),编译器typescript `默认会读取和使用这个文件,配置文件内容大致如下:

tsconfig.js更多的配置

{"compilerOptions": {"module": "commonjs", // 编译出的代码采用的模块规范"target": "es5", // 编译出的代码采用 ES 的哪个版本"sourceMap": true, // 输出 Source Map 方便调试"importHelpers": true // 减少代码的冗余,类似:@babel/plugin-transform-runtime},"exclude": [ // 不编译这些目录里的文件"node_modules"]
}

通过 npm install typescript -save-dev 安装编译器到本地项目

新建一个项目

|-- package.json
|-- tsconfig.js
|-- src
|   |       `-- common.ts
|   |       `-- index.html
|           `-- main.ts
`-- webpack.config.js

tsconfig.js 编译器的配置文件

// 1.typescript 编译器的配置文件:
{// 2.编译的参数"compilerOptions": {"module": "commonjs", // 编译出的代码采用的模块规范"target": "es5", // 编译出的代码采用 ES 的哪个版本"sourceMap": true, // 输出 Source Map 方便调试"importHelpers": true // 减少代码的冗余,类似:@babel/plugin-transform-runtime},// 3.排除项 "exclude": [ // 不编译这些目录里的文件"node_modules"]
}

package.json

{"name": "testtsloader","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development","build": "webpack --mode production"},"author": "liujun","license": "ISC","devDependencies": {"awesome-typescript-loader": "^5.2.1","typescript": "^3.5.3","webpack": "^4.35.3","webpack-cli": "^3.3.6"},"dependencies": {}
}

1.scripts 属性里编写了3个脚本:其中 dev 对应的脚本是 构建测试版;其中 build对应的脚本是 构建发布版

2.使用的开发依赖有:awesome-typescript-loader typescript webpack webpack-cli

webpack.config.js

const path = require('path');
module.exports = {entry: './src/main.ts',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'), },resolve: {// 执行import { showHelloWorld } from './common'; // 先尝试 ts 后缀的 TypeScript 源码文件,在尝试 js 后缀 JavaScript 源码文件extensions: ['.ts', '.js'] },module: {rules: [{test: /\.ts$/,// use:['awesome-typescript-loader']// 1.该 Loader 是把 TypeScript 转换成 JavaScript, 只负责新语法的转换,新增的API不会自动添加polyfillloader: 'awesome-typescript-loader'}]},devtool: 'source-map',// 输出 Source Map 方便在浏览器里调试 TypeScript 代码
};

use接收一个数组数组中可存放字符串和对象,并且use的别名是 loaders;如果不用use也可直写loader

main.ts

// 1.通过 CommonJS 规范导入 showHelloWorld 函数
import { showHelloWorld } from './common';
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');

common.ts

export const showHelloWorld = (content:string) => {alert('hello world')
}// 2.class 定义类也是es6新的语法。目的是要把es6新的语法转成es5语法
class Person {// 定义一个变量private name: stringconstructor(name: string){this.name = 'person'}testSet() {}
}

index.html

<html>
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和 用到的loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-devnpm install awesome-typescript-loader@5.2.1  --save-dev // 负责 将 TS 转换成 ES5语法
npm install typescript@3.5.3  --save-dev  // 负责编译 TS 文件为 JS 文件

在项目的根目录,执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|   |-- bundle.js.map
|-- node_modules
|-- package-lock.json
|-- package.json
|-- tsconfig.js
|-- src
|   |-- common.ts
|   |-- index.html
|   `-- main.ts
`-- webpack.config.js

打包之后的 bundle.js 文件的部分内容:

/***/ "./src/common.ts":
/*!***********************!*\!*** ./src/common.ts ***!\***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {"use strict";Object.defineProperty(exports, "__esModule", { value: true });
exports.showHelloWorld = function (content) {alert('hello world');
};
// 2.class 定义类也是es6新的语法。目的是要把es6新的语法转成es5语法
var Person = /** @class */ (function () {function Person(name) {this.name = 'person';}Person.prototype.testSet = function () {};return Person;
}());/***/ }),/***/ "./src/main.ts":
/*!*********************!*\!*** ./src/main.ts ***!\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {"use strict";Object.defineProperty(exports, "__esModule", { value: true });
// 1.通过 CommonJS 规范导入 showHelloWorld 函数
var common_1 = __webpack_require__(/*! ./common */ "./src/common.ts");
// 2.执行 showHelloWorld 函数
common_1.showHelloWorld('Webpack的安装和使用');/***/ })/******/ });

总结:

上面webpack.config.js配置中的use通过正则 /.ts$/ 匹配所有以 .ts为后缀的 TS文件,再使用awesome-typescript-loade 去处理。具体处理流程如下:

1.通过awesome-typescript-loade 把 TypeScript 转换成 JavaScript( 新增的语法会转换为ES5,新增API不会 )
2.typescript 是一个编译器,把 TypeScript 转换成 JavaScript 的编译器。

项目源码

这篇关于Webpack4 配置TS Loader的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1100621

相关文章

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH(SecureShell)服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

Nginx 重写与重定向配置方法

《Nginx重写与重定向配置方法》Nginx重写与重定向区别:重写修改路径(客户端无感知),重定向跳转新URL(客户端感知),try_files检查文件/目录存在性,return301直接返回永久重... 目录一.try_files指令二.return指令三.rewrite指令区分重写与重定向重写: 请求

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

gitlab安装及邮箱配置和常用使用方式

《gitlab安装及邮箱配置和常用使用方式》:本文主要介绍gitlab安装及邮箱配置和常用使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装GitLab2.配置GitLab邮件服务3.GitLab的账号注册邮箱验证及其分组4.gitlab分支和标签的

MySQL MCP 服务器安装配置最佳实践

《MySQLMCP服务器安装配置最佳实践》本文介绍MySQLMCP服务器的安装配置方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下... 目录mysql MCP 服务器安装配置指南简介功能特点安装方法数据库配置使用MCP Inspector进行调试开发指

Redis Cluster模式配置

《RedisCluster模式配置》:本文主要介绍RedisCluster模式配置,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录分片 一、分片的本质与核心价值二、分片实现方案对比 ‌三、分片算法详解1. ‌范围分片(顺序分片)‌2. ‌哈希分片3. ‌虚

SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志

《SpringBoot项目配置logback-spring.xml屏蔽特定路径的日志》在SpringBoot项目中,使用logback-spring.xml配置屏蔽特定路径的日志有两种常用方式,文中的... 目录方案一:基础配置(直接关闭目标路径日志)方案二:结合 Spring Profile 按环境屏蔽关