webpack 打包 TS

相信很多前端的朋友都知道 webpack 是什么，webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用。

webpack 概念

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

打包起因

在编写 ts 文件的过程当中，可能会使用到 export 来避免命名冲突。

在一个新的 TypeScript 文件中写下代码时，它处于全局命名空间中，使用全局变量空间是危险的，因为它会与文件内的代码命名冲突

所以可以使用import或者export，在当前文件中创建一个本地作用域

// 使用export 在当前文件中创建一个本地作用域, 防止变量冲突export {  } 

但是当我使用命令tsc tsc05.ts -w运行生成一个 js 文件时，使用<script>标签导入进 html 中时，就会出现报错。

我之前运行生成 js 时使用的都是tsc命令直接生成的，但是在有些情况下，生成的 js 文件直接引入浏览器中是不支持的，所以平时的练习可以使用，如果到正式项目中最好还是使用 webpack 等打包工具进行打包生成

生成的 tsc05.js 文件

"use strict";exports.__esModule = true;exports.addNum = void 0;// 函数声明function abc() { }// 函数表达式var def = function () { };// 函数存在输入输出，在TS中要是约束，需要使用类型定义function addNum(a, b) {    if (b)        return a + b;    else        return a;}exports.addNum = addNum;console.log(addNum(1));

在 html 中报错：Uncaught SyntaxError: Unexpected token 'export'

因为浏览器不支持exports，所以在这里我使用webpack去对 ts 文件进行打包

安装 webpack

为了 ts 编译运行安装 webpack，webpack 也有很多版本，如果是默认安装的话，一般是取最新的版本来的

我使用的安装方式是 yarn 安装，当然大家也可以直接用 npm 或者 cnpm 进行安装，都是较为简单

命令： yarn add webpack webpack-cli

在基础的配置中，webpack 只对 js 有效，因此我们需要把 ts 转化为 js，需要用到ts-loader包

命令：yarn add ts-loader

安装typescript，这是肯定需要的

命令： yarn add typescript

注意： 这里的typescript可以全局安装，也可以局部安装。 使用全局安装的typescript时可以会出现错误“ Could not load TypeScript. Try installing with 'yarn add typescript' or 'npm install typescript'. If TypeScript is installed globally, try using 'yarn link typescript' or 'npm link typescript'. ” 。 此错误翻译为：无法加载类型脚本。尝试使用“添加类型脚本”或“npm 安装类型脚本”安装。如果 TypeScript 是全局安装的，请尝试使用“link 链接 TypeScript”或“npm 链接 TypeScript”

当前的 package.json 中的配置：

{  "devDependencies": {    "babel-preset-es2015": "^6.24.1",    "babel-register": "^6.26.0"  },  "dependencies": {    "@types/node": "^16.4.12",    "body-parser": "^1.19.0",    "express": "^4.17.1",    "inquirer": "^8.1.2",    "ts-loader": "^9.2.5",    "typescript": "^4.3.5",    "webpack": "^5.48.0",    "webpack-cli": "^4.7.2",    "webpack-dev-server": "^3.11.2"  }}

编写 webpack 配置

webpack.config.js

安装好这些包之后，就需要配置 webpack.config.js 文件了

在与package.json同级目录下创建webpack.config.js文件，这是 webpack 的配置文件，非常重要

const path = require('path');   const webpack = require('webpack');module.exports = {  entry:'./TypeScript/tsc05.ts',   // 打包对入口文件，期望打包对文件入口。 这里配置tsc05.ts的位置  output:{    filename:'tsc05.js',   // 输出文件名称    path:path.resolve(__dirname,'./TypeScript/')  //获取输出路径  },  mode: 'development',   // 整个mode 可以不要，模式是生产坏境就是压缩好对，这里配置开发坏境方便看生成对代码  module:{  rules: [{      test: /\.tsx?$/,      use: 'ts-loader',      exclude: /node_modules/    }]  },  resolve: {    extensions: ['.ts']      // 解析对文件格式  },}

script 脚本

在package.json中配置script脚本去运行 webpack

"scripts": {    "dev": "webpack --mode development",  // npm run dev 打包一次}

使用npm run dev打包一次，成功。

这里的需要在对应的webpack.config.js文件中配置的 entry 入库文件 tsc05.ts 已存在

将tsc05.ts文件打包后生成的出口文件tsc05.js

最后结果

将webpack打包出的tsc05.js文件导入html中

发现已经可以成功运行了

这里的配置过程其实较为简单，但是如果将 webpack 打包的热更新添加上去就可能会配置出错