TypeScrip基本开发环境搭建

最新推荐文章于 2024-08-08 00:21:25 发布

复制粘贴的码农

最新推荐文章于 2024-08-08 00:21:25 发布

阅读量276

点赞数

文章标签： javascript webpack typescript

本文链接：https://blog.csdn.net/qq_50659735/article/details/125758954

版权

TypeScript基本开发环境搭建（Webpack）

TypeScript 前端开发环境于普通的开发环境无异，无非就是多了一个关于ts的编译和加载的依赖以及配置

创建初始化项目

新建项目文件夹
```
mkdir demo
```
使用依赖管理工具初始化项目(yarn、npm、cnpm等等)，这里使用yarn依赖管理工具
```
cd demo		// 进入文件夹中
yarn init -y	// 默认初始化项目
```
demo文件夹会产生一个名为package.json的文件，里面此时非常清爽，没有依赖和运行脚本
```
{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}
```

添加webpack依赖项

这里使用当前最新的版本，之前版本可能有些不同之处

项目中添加webpack依赖，最基础的有两个依赖: webpack和webpack-cli
```
yarn add webpack webpack-cli
```
添加完成后，项目中多了node_modules文件夹和yarn.lock文件，当项目不再是一个空项目的时候，就会出现，此时package.json中出现dependencies配置项
```
{
   ……
  // 多出的部分
  "dependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}
```
这里关于webpack.config.js文件的配置以后再配置，因为我们要配置typescript在webpack中的配置，主角还未登场，所以先清出我们的主角—TypeScript！

添加TypeScript支持

在项目中添加TypeScript依赖支持
```
yarn add typescript ts-loader
```
添加完成之后，项目的package.json中dependencies又变高了（增加了两个依赖性）

typescript提供typescript编译支持，ts-loader提供webpack加载typescript的依赖，为一个webpack加载插件

配置webpack配置和添加指令脚本

在项目中新建src目录，新建index.ts文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1mXLOpTI-1657679893796)(imgs\Snipaste_2022-07-12_19-43-08.png)]

在package.json中配置scripts指令

{
  ……
  "scripts": {
    "test": "echo \n这是一个webpack下的TypeScript配置模板类项目\n",
    "build": "webpack"
  },
  ……
}

test指令可有可无，是测试项目是否可以执行

配置webpack.config.js

// 引入node环境下的path,用里面的__dirname获取项目所在的绝对地址
const path = require('path');


// 导出配置类，供webpack模块使用
module.exports = {
   // 指定入口文件地址
   entry: "./src/index.ts",
   // 指定输出配置
   output: {
      // 指定打包文件的目录
      path: path.resolve(__dirname, 'dist'),
      // 指定打包后生成的js的文件,这里的文件名可以随意定义，并无要求（PS:但要是js文件）
      filename: "bundle.js",
   },
   // 指定webpack 打包时要使用模块
   module: {
      // 指定要加载的规则
      rules: [
         {
            // test 指定的是规则生效文件
            test: /\.ts$/,
            use: [
               // 配置使用的加载器
               "ts-loader",
            ],
            // 配置要排除的文件夹
            exclude: /node_modules/,

         }
      ]
   },
   // 配置webpack插件
   plugins:[],
   // 用来设置引用模块，解决ts无法引入其它ts的问题
   resolve: {
      extensions: ['.ts','.js']
   }
}

配置ts的配置项: tsconfig.json

新建tsconfig.json文件，并写入配置项

{
   "compilerOptions": {
      "module": "ES2015",
      "target": "ES2015",
      "strict": true
   }
}

简单测试

在/src/index.ts文件中添加测试语句
```
console.log('hello typeScript');
```
在shell窗口，执行yarn build，对项目进行打包
```
yarn build
```
结果

添加html运行环境

js已经生成，但我们大多数编写ts代码的目的是让代码在浏览器的环境下运行，所以，项目中还要加入html的支持

添加html-webpack-plugin插件
```
yarn add html-webpack-plugin
```
package.json在不断增高

在webpack.config.js配置文件中添加html-webpack-plugin插件支持

// 引入html-webpack-plugin 插件
const HTMLPlugin = require('html-webpack-plugin');
// 导出配置类，供webpack模块使用
module.exports = {
    ……
    // 配置webpack插件
   plugins:[
      // 使用html-webpack-plugin插件
      new HTMLPlugin(),
   ],
   ……
}

测试：插件是否能正常使用

yarn build构建的产物

有时候，我们需要自定义编译产物的诸如title、默认样式等，在使用html-webpack-plugin插件时，可以配置我们自定义的参数

自定义title

// 配置webpack插件
plugins:[
    // 使用html-webpack-plugin插件
    new HTMLPlugin({
        title:'自定义title'
    }),
],

直接使用html模板，根据模板生成产物html

新建/src/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>这是一个模板</title>
   <style>
      *{
         padding: 0;
         margin: 0;
      }
   </style>
</head>
<body>
   <h1>这是一个默认的h1标签</h1>
   <div>这有一个项目默认带有的div</div>
</body>
</html>

在webpack.config,js中配置

// 配置webpack插件
plugins:[
    // 使用html-webpack-plugin插件
    new HTMLPlugin({
        // title:'自定义title'
        template: './src/inedx.html'
    }),
],

有时候，此时的项目，每次执行yarn bulid时，都会覆盖原来的dist目录，当生成的文件夹名字不重复的时候（后面Vue项目每次编译，都会产生不一样的文件夹），会生成多个文件夹，让我们无法辨别哪个是最新编译的项目，因此我们需要每次执行编译打包之前，将dist中的文件全部清空，生成唯一的编译产物。

引入`clean-webpack-plugin`插件

引入依赖
```
 yarn add clean-webpack-plugin
```

在webpack.config,js文件中配置依赖

// 引入clean-webpack-plugin插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// 导出配置类，供webpack模块使用
module.exports = {
    ……
    
    // 配置webpack插件
    plugins:[
        // 使用html-webpack-plugin插件
        new HTMLPlugin({
            // title:'自定义title'
            template: './src/index.html'
        }),
        // 引入clean-webpalck-plugin
        new CleanWebpackPlugin()
    ],
        
    ……
}

这个时候，当我们再去测试项目打包的时候，会报错:

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.
Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior.

意思让我们在执行 webpack指令的时候，指定模式为development或production

在webpack后面添加 --mode development，再次执行yarn build 项目就不会报错了

还没完，虽然此时我们可以将编写的typescript代码编译并连接到html中，但是在开发的时候，每次测试都要执行build去打包，然后再去使用浏览器打开生成的html（生成的js文件通过script引入到了html文件中了）吗？

答案是否定的，这就需要使用webpack-dev-server依赖项，来便利我们开发了

引入webpack-dev-server依赖

webpack-dev-server无需在webpack.config.js中做额外的配置，但需要我们改变运行的指令，因为一个（前端）项目都会经历测试和打包，所以之前的那个build我们保留着，需要额外配置一个指令脚本

添加依赖
```
yarn add webpack-dev-server
```

编写测试脚本指令

"scripts": {
    "test": "echo \n这是一个webpack下的TypeScript配置模板类项目\n",
    "build": "webpack  --mode production",
    "dev": "webpack server --open --mode development"
},

运行添加的脚本指令
```
yarn dev
```
因为 --open后面并未指定浏览器，webpack会打开默认的浏览器，--mode development 指定打包环境为development。

现在剩下最后一项配置— babel，因为我们想将自己编写的TypeScript编译为JavaScript，然后运行在浏览器中，但是有一点：浏览器是有兼容性问题的，这就需要babel为我们做适配了。

引入babel相关的依赖

添加依赖
```
yarn add @babel/core @babel/preset-env babel-loader core-js
```
- @babel/core：Babel/core babel的核心依赖
- @babel/preset-env: Babel的环境依赖
- babel-loader：webpack加载babel所需的加载
- core-js：实现了ECSA标准对于低版本JavaScript的适配方案，用于编译出更多浏览器支持的JavaScript代码

添加配置

{
    ……
	// 指定webpack 打包时要使用模块
   module: {
      // 指定要加载的规则
      rules: [
         {
            // test 指定的是规则生效文件
            test: /\.ts$/,
            use: [
               // 配置 babel
               {
                  // 指定加载器
                  loader: "babel-loader",
                  // 设置babel
                  options:{
                     // 设置预定义的环境
                     presets: [
                        [
                           // 指定环境的插件
                           "@babel/preset-env",
                           // 配置信息
                           {
                              // 添加适配的目标，会以配置项中支持度最低的浏览器为编译目标，但也不是任意版本的浏览器都支持
                              targets:{
                                 "chrome": "80",
                                 "ie": "11",
                              },
                              // 指定corejs的版本  , 因为这里下载的core-js为^3.23.4，所以配置为3
                              "corejs": "3",
                              // 使用corejs的方式 "usage"表示按需加载
                              "useBuiltIns": "usage",
                           }
                        ]
                     ]
                  }
               },
               // 配置使用的加载器
               "ts-loader",
            ],
            // 配置要排除的文件夹
            exclude: /node_modules/,
         }
      ]
   },
   ……
}

说明：module.rules.use数组配置了webpack所使用的编译插件，且使用顺序为从后往前使用插件，依次对项目进行编译。targets属性中配置的适配对象，并不是写上支持什么版本就会编译出支持目标的JavaScript代码的，也要看babel的支持不支持的。光靠babel是无法实现全浏览器、全版本的支持的

全项目的具体配置

项目总览

cmd指令

# 创建文件夹并进入
mkdir demo
cd demo

# 初始化 yarn 项目
yarn init -y
# webpack 依赖极其相关依赖
# webpack 环境
yarn add webpack webpack-cli
# typescript环境
yarn add typescript ts-loader
# webpack 开发时常用的插件和测试服务器
yarn html-webpack-plugin clean-webpack-plugin webpack-dev-server
# babel编译
yarn add @babel/core @babel/preset-env babel-loader core-js

package.json内容

{
  "name": "demo",
  "version": "1.0.0",
  "main": "index.ts",
  "license": "MIT",
  "scripts": {
    "test": "echo \n这是一个webpack下的TypeScript配置模板类项目\n",
    "build": "webpack  --mode production",
    "dev": "webpack server --open --mode development"
  },
  "dependencies": {
    "@babel/core": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.23.4",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

tsconfig.json内容

{
   "compilerOptions": {
      // 模块编写规范ES6
      "module": "ES2015",
       // 编译js目标ES6
      "target": "ES2015",
       // 开启类型检测
      "strict": true
   }
}

webpack.config.js内容

// 引入node环境下的path,用里面的__dirname获取项目所在的绝对地址
const path = require('path');

// 引入html-webpack-plugin 插件
const HTMLPlugin = require('html-webpack-plugin');
// 引入clean-webpack-plugin插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


// 导出配置类，供webpack模块使用
module.exports = {
   // 指定入口文件地址
   entry: "./src/index.ts",
   // 指定输出配置
   output: {
      // 指定打包文件的目录
      path: path.resolve(__dirname, 'dist'),
      // 指定打包后生成的js的文件,这里的文件名可以随意定义，并无要求（PS:但要是js文件）
      filename: "bundle.js",

      // 告诉webpack 不适用箭头函数：为了适配IE11浏览器
      environment:{
         arrowFunction: false,
      }
   },
   // 指定webpack 打包时要使用模块
   module: {
      // 指定要加载的规则
      rules: [
         {
            // test 指定的是规则生效文件
            test: /\.ts$/,
            use: [
               // 配置 babel
               {
                  // 指定加载器
                  loader: "babel-loader",
                  // 设置babel
                  options:{
                     // 设置预定义的环境
                     presets: [
                        [
                           // 指定环境的插件
                           "@babel/preset-env",
                           // 配置信息
                           {
                              // 添加适配的目标，会以配置项中支持度最低的浏览器为编译目标，但也不是任意版本的浏览器都支持
                              targets:{
                                 "chrome": "80",
                                 "ie": "11",
                              },
                              // 指定corejs的版本  , 因为这里下载的core-js为^3.23.4，所以配置为3
                              "corejs": "3",
                              // 使用corejs的方式 "usage"表示按需加载
                              "useBuiltIns": "usage",
                           }
                        ]
                     ]
                  }
               },
               // 配置使用的加载器
               "ts-loader",
            ],
            // 配置要排除的文件夹
            exclude: /node_modules/,
         }
      ]
   },
   // 配置webpack插件
   plugins:[
      // 使用html-webpack-plugin插件
      new HTMLPlugin({
         // title:'自定义title'
         template: './src/index.html'
      }),
      // 引入clean-webpalck-plugin
      new CleanWebpackPlugin(),
   ],
   // 用来设置引用模块，解决ts无法引入其它ts的问题
   resolve: {
      extensions: ['.ts','.js']
   }
}

index.html模板内容–自己根据需求定义

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>模板</title>
</head>
<body>
   <div>模板内容</div>
</body>
</html>

项目编译入口index.ts

import sum from './lib/utils'
console.log('hello typeScript');
console.log(sum(10,60));

src/lib/utils.ts

function sum(a: number, b: number): number {
   return a + b;
}

export default sum;

总结

大多数使用TypeScript语言的场景，都是配合着Vue、React等前端框架，cli工具为我们自动给搭建好了webpack相关的环境，最新的Vite可以直接选择js或是ts的开发环境，为我们提供了很大的方便，但了解webpack的配置，能够很好的帮助我们去理解前端项目的执行流程。

在上面的配置中，把typescript相关的配置去除，就是JavaScript的开发环境，最近刚好学习TypeScript，在课程中老师讲到了TypeScript在webpack中的配置，再次复习和理解了前端工程化的构建工具webpack，以上作为模板，供之后配置做参考。

视频连接：尚硅谷TypeScript教程（李立超老师TS新课）_哔哩哔哩_bilibili