学习typeScript-1-typescript基础学习,环境搭建

学习typeScript

一.typescript基础学习,环境搭建

使用工具:HbuilderX

1.初始化项目

1.1 创建项目目录

mkdir ts-one

1.2 初始化环境-创建默认工程

• 1.2.1 前置
• 1.2.1.1 安装npm
• 1.2.1.2 安装 typescript

npm i install typescript -g

• 1.2.2 初始化项目
• 1.2.2.1 初始化配置

npm init -y
tsc --init

得到

• package.json文件
• tsconfig.json文件
• 1.2.2.2 创建文件目录

mkdir src
mkdir config

• 1.2.2.3 创建初始的ts文件

cd src
touch index.ts

• 定义变量

let str:string="hello ts test 111"

document.querySelectorAll(".app")[0].innerHTML=str

• 编译ts文件

tsc ./src/index.ts

• 得到index.js文件

2.项目启动安装的基础插件:

npm i webpack webpack-cli webpack-dev-server -D
npm i ts-loader typescript -D
npm i html-webpack-plugin -D
npm i webpack-merge -D
npm i clean-webpack-plugin -D

3.创建项目不同环境的配置文件

1. 基础配置文件
2. 不同环境的配置文件
3. 主配置文件

3.1基础配置文件

webpack.base.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry: {
		'app': './src/index.ts'
	},
	output: {
		filename: './bundle.js',
		path: path.resolve('dist')
	},
	resolve: {
		extensions: ['.js', '.ts', 'tsx']
	},
	module: {
		rules: [{
			test: /\.tsx?$/i,
			use: [{
				loader: 'ts-loader'
			}],
			exclude: /node_modules/
		}]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/tpl/index.html'
		})
	]
}

这段配置的解释说明

---

这段代码是一个 Webpack 配置文件，用于设置一个基于 TypeScript 的前端项目构建过程。下面是对这段代码的逐行解读：

1. const path = require('path')：引入 Node.js 的 path 模块，用于处理文件路径。

2. const HtmlWebpackPlugin = require('html-webpack-plugin')：引入 html-webpack-plugin 插件，这个插件可以在构建过程中自动生成 HTML 文件，并且可以自动引入编译后的 JavaScript 文件。

3. module.exports = { ... }：导出一个对象，这个对象包含了 Webpack 的配置信息。

4. entry: { 'app': './src/index.ts' }：定义项目的入口文件，这里指定了名为 'app' 的入口点，指向 ./src/index.ts 文件。

5. output: { ... }：定义输出的配置。

   • filename: './bundle.js'：指定输出文件的名称为 bundle.js。
   • path: path.resolve('dist')：指定输出文件的目录为 dist 目录，使用 path.resolve 确保路径的正确性。

6. resolve: { ... }：定义解析模块时的配置。

   • extensions: ['.js', '.ts', 'tsx']：指定在导入模块时，可以省略文件扩展名，Webpack 会自动尝试添加这些扩展名。

7. module: { rules: [ ... ] }：定义模块的处理规则。

   • test: /\.tsx?$/i：一个正则表达式，用于匹配 .ts 或 .tsx 文件。
   • use: [{ loader: 'ts-loader' }]：指定使用 ts-loader 来处理匹配的文件。
   • exclude: /node_modules/：排除 node_modules 目录下的文件，不使用 ts-loader 处理。

8. plugins: [ ... ]：定义 Webpack 插件。

   • new HtmlWebpackPlugin({ ... })：创建一个 HtmlWebpackPlugin 实例。
     • template: './src/tpl/index.html'：指定 HTML 模板文件的位置。

这个配置文件告诉 Webpack 从 ./src/index.ts 文件开始构建，使用 ts-loader 处理 TypeScript 文件，输出到 dist 目录下的 bundle.js 文件。同时，HtmlWebpackPlugin 会使用 ./src/tpl/index.html 作为模板，生成最终的 HTML 文件，并将 bundle.js 引入其中。

请注意，这个配置文件中有几个问题：

• output.filename 应该是 bundle.js 而不是 './bundle.js'，因为后者会将文件输出到当前工作目录，而不是 dist 目录。
• output.path 应该是 path.resolve(__dirname, 'dist') 以确保路径是相对于当前文件的。
• HtmlWebpackPlugin 应该在 output 配置中指定 filename，以便知道将生成的 HTML 文件放在哪里。例如：new HtmlWebpackPlugin({ template: './src/tpl/index.html', filename: 'index.html' })。

---

3.2不同环境的配置

3.2.1开发环境配置

webpack.dev.config.js

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        port: 3000
    }
}

---

这段代码是 Webpack 的配置片段，它设置了两个主要的选项：devtool 和 devServer。这些配置通常用于开发环境，以提供更好的开发体验和调试支持。

1. devtool: 'cheap-module-eval-source-map'：

   • devtool 是 Webpack 的一个选项，用于控制是否生成以及如何生成 source map 文件。source map 是一种映射文件，它允许浏览器将转换后的代码映射回原始的源代码，这对于调试非常有帮助。
   • 'cheap-module-eval-source-map' 是一种 source map 的类型，它提供了相对较快的构建速度和较慢的重新加载速度。这种类型的 source map 包括了模块级别的错误定位，这意味着你可以在浏览器的开发者工具中看到原始的源代码，但是它不会映射转换后的代码的每一行到源代码的每一行。
   • 这种 source map 类型适用于开发环境，因为它提供了较好的调试体验，同时不会显著影响构建性能。

2. devServer: { port: 3000 }：

   • devServer 是 Webpack 的一个配置选项，用于设置开发服务器的行为。Webpack 提供了一个内置的开发服务器，它允许你在开发过程中实时预览你的应用。
   • port: 3000 指定了开发服务器监听的端口号。在这个例子中，服务器将在端口 3000 上监听请求。
   • 除了端口号，devServer 还可以配置许多其他选项，例如：
     • contentBase：指定服务器提供内容的目录。
     • hot：启用热模块替换（HMR），允许在不刷新页面的情况下更新模块。
     • historyApiFallback：提供对 HTML5 History API 的支持，用于单页应用（SPA）。
     • proxy：设置代理，用于将特定的请求转发到其他服务器。

这段代码的配置意味着在开发过程中，Webpack 将使用 cheap-module-eval-source-map 来生成 source map，以便开发者可以更轻松地调试代码。同时，它将启动一个开发服务器，该服务器在端口 3000 上监听，以便开发者可以实时查看应用的变化。

---

3.2.2生产环境配置

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

---

1. const { CleanWebpackPlugin } = require('clean-webpack-plugin')：

   • 这行代码引入了 clean-webpack-plugin 插件。clean-webpack-plugin 是一个 Webpack 插件，用于在每次构建之前清理输出目录，确保没有旧的文件残留。

2. module.exports = { ... }：

   • 这行代码导出了一个对象，该对象包含了 Webpack 的配置信息。

3. plugins: [ ... ]：

   • plugins 是 Webpack 配置对象的一个属性，用于定义项目中使用的 Webpack 插件。

4. new CleanWebpackPlugin()：

   • 这里创建了一个新的 CleanWebpackPlugin 实例。当你在 Webpack 配置中添加这个插件时，它会在每次构建之前执行清理操作。

5. 没有指定配置选项：

   • 在这个例子中，CleanWebpackPlugin 没有接收任何特定的配置选项。这意味着它将默认清理 output.path 指定的目录。如果你想要自定义清理的行为，比如指定不同的路径或者忽略某些文件，你可以传递一个配置对象给 CleanWebpackPlugin，例如：

     new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns: ['**/*', '!some-file-to-keep'],
       cleanAfterEveryBuildPatterns: ['path/to/directory/*.js']
     })
     

使用 CleanWebpackPlugin 的好处是可以避免构建过程中旧文件的累积，这可能会导致构建输出中存在不再需要的文件，或者在某些情况下，旧文件可能会干扰新构建的运行。通过清理输出目录，你可以确保每次构建都是从干净的状态开始的。

---

3.3主配置

webpack.config.js

const {merge} = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
let config = process.NODE_ENV === 'development' ? devConfig : proConfig;
module.exports = merge(baseConfig, config);

---

这段代码展示了如何使用 webpack-merge 库来合并多个 Webpack 配置文件，以便根据不同的环境（开发或生产）生成最终的 Webpack 配置。

1. const {merge} = require('webpack-merge')：

   • 这行代码引入了 webpack-merge 库中的 merge 函数。webpack-merge 是一个用于合并 Webpack 配置对象的实用工具，它允许你创建多个配置文件，然后合并它们以生成最终的配置。

2. const baseConfig = require('./webpack.base.config')：

   • 引入名为 webpack.base.config 的基础配置文件。这个文件通常包含所有环境共享的配置，如入口点、输出目录、模块规则（loader rules）等。

3. const devConfig = require('./webpack.dev.config')：

   • 引入名为 webpack.dev.config 的开发环境配置文件。这个文件包含开发环境特有的配置，如开发服务器设置、source map 类型等。

4. const proConfig = require('./webpack.pro.config')：

   • 引入名为 webpack.pro.config 的生产环境配置文件。这个文件包含生产环境特有的配置，如压缩代码、优化性能等。

5. let config = process.NODE_ENV === 'development' ? devConfig : proConfig;：

   • 这行代码根据 process.NODE_ENV 环境变量的值来决定使用哪个环境的配置。如果 NODE_ENV 设置为 'development'，则使用 devConfig；否则，使用 proConfig。这是 Webpack 配置中常见的模式，用于区分开发和生产环境。

6. module.exports = merge(baseConfig, config);：

   • 使用 webpack-merge 的 merge 函数合并 baseConfig 和 config（根据环境变量选择的 devConfig 或 proConfig）。合并后的配置对象将包含所有必要的配置，然后导出这个对象作为模块的默认导出。

这种配置方式的好处是提高了配置的可维护性和可读性。你可以将不同环境的特定配置分离到不同的文件中，同时保持共享配置的集中管理。通过 webpack-merge，你可以确保基础配置和环境特定配置能够无缝合并，而不会覆盖或丢失任何重要的设置。

---

4.创建html模板

html配置

	plugins: [
		new HtmlWebpackPlugin({
			template: './src/tpl/index.html'
		})
	]

创建html模板存储目录

cd ./src
mkdir tpl
touch index.html

维护index.html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ts one1</title>
	</head>
	<body>
		<div class='app'></div>
	</body>
</html>

5. 进行配置文件进行调整

package.json

{
  "name": "ts-one",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --mode=development --config ./config/webpack.config.js",
	  "build": "webpack --mode=production --config ./config/webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "html-webpack-plugin": "^5.6.3",
    "ts-loader": "^9.5.1",
    "typescript": "^5.7.2",
    "webpack": "^5.97.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  },
  "dependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "webpack-merge": "^6.0.1"
  }
}

自定义命令

  "start": "webpack serve --mode=development --config ./config/webpack.config.js",
	"build": "webpack --mode=production --config ./config/webpack.config.js"

---

• "start": "webpack serve --mode=development --config ./config/webpack.config.js"：

这个脚本定义了一个名为 start 的命令，用于启动开发服务器。
webpack serve 是 Webpack 的开发服务器，它提供了一个本地服务器，可以实时重新加载你的应用。
--mode=development 指定了 Webpack 应该以开发模式运行，这会影响 Webpack 的配置，例如不进行代码压缩等。
--config ./config/webpack.config.js 指定了 Webpack 配置文件的位置，Webpack 将使用这个文件中的配置来构建项目。

• "build": "webpack --mode=production --config ./config/webpack.config.js"：

 这个脚本定义了一个名为 build 的命令，用于构建生产环境的版本。
 webpack 命令用于启动 Webpack 打包过程。
 --mode=production 指定了 Webpack 应该以生产模式运行，这会影响 Webpack 的配置，例如进行代码压缩、优化等。
 --config ./config/webpack.config.js 同样指定了 Webpack 配置文件的位置。

---

6.启动服务

npm run start