关于typescript的安装使用，编译，webpack包装

【为什么需要编译？】

s不能直接运行，需要把ts转成js来运行，需要ts编译器 typescript 最新版本为4.x，需要全局安装一 typescript 编译器：npm i -g typescript。

检查一下，是否安装成功tsc --version，如果能看到版本号，则表示安装成功。

一.typescript的安装

使用npm全局安装typescript

输入：npm i -g typescript

二.typescript的编译

1.使用tsc对ts文件进行编译----对单个指定的文件进行编译（缺点：每一次修改需要进行一次编译）

• 进入命令行

• 进入ts文件所在目录

• 执行命令：tsc xxx.ts

• 案例1：编译前

• 

   

    输入指令： 

 

      编译后 ：

 

 

2.自动编译-----对单个指定的.ts文件进行编译（在修改时不需要再次进行运行命令 有监听作用）

• 进入命令行

• 进入ts文件所在目录

• 执行命令：tsc xxx.ts -w

案例2：编译前

 输入命令：

 

编译后： 

3. 自动编译整个项目------（推荐使用）项目中所有的.ts文件进行编译，在修改时也不需要再次运行命令

• 进入命令行

• 进入ts文件所在目录

• 执行命令：tsc  -w

• 使用tsc命令的前提时，要先在项目根目录下创建一个ts的配置文件 tsconfig.json（如果是空文件就表示将项目中所有的ts文件进行编译   如果在tsconfig.json添加 "include":["./src/**/*"],    表示把src目录下的所有ts进行编译）

• 

   

案例3： 编译前

 

输入命令 ：

 

编译后： 

 拓展（重点）：都是在配置文件 tsconfig.json内书写

1.如果想将编译后的js文件放在同一个文件夹 ----- "outDir": "./文件名",

 2.编译出来的js文件合并------"outFile": "./文件名/合并后的js文件名",

 

3.编译后默认都是ES3的书写方式，想转换成ES6方式，如下： 

三.webpack-----包装

步骤

1. 初始化项目

   • 进入项目根目录，执行命令 npm init -y

     • 主要作用：创建package.json文件

2. 下载构建工具到开发环境

   npm install -D xxx 安装到开发环境中，项目打包时不编译到文件中

   npm install -g xxx 安装到系统npm包管理器的全局环境中，当前电脑系统中所有项目都可以使用依赖包

   npm install xxx 安装到生产环境中，项目打包时会编译到文件中

 

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

注意：安装成功之后会在项目中出现 node_modules ，package.json

 3.根目录下创建webpack的配置文件 webpack.config.js

在 webpack.config.js配置代码

//导入nodeJS 路径path模块
const path = require("path");

module.exports = {
  // 指定入口文件 index.ts文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录---
    path: path.resolve(__dirname, "dist"),
    // 打包后文件的文件
    filename: "bundle.js",
    // 告诉webpack不使用箭头
    environment: {
      arrowFunction: false, // 关闭webpack的箭头函数，可选
    },
  },
  // 用来设置引用模块
  resolve: {
    extensions: [".ts", ".js"],
  },
  // 指定webpack打包时要使用模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件---以.ts结尾的文件
        test: /\.ts$/,
        // 要使用的loader加载器
        use: {
          loader: "ts-loader",
        },
        // 要排除的文件---不打包node_modules文件夹
        exclude: /node_modules/,
      },
    ],
  },

4.修改package.json添加如下配置

{
  "name": "demo3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack "
   
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

5. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

6.webpack打包模式

• development模式-----开发环境 不会对打包生成的文件进行代码压缩和性能优化。 打包速度快，适合在开发阶段使用。

• production模式-----生产环境 会对打包生成的文件进行代码压缩和性能优化。 打包速度慢，仅适合在项目发布阶段使用。

 注意：如果页面需要打包，需要在webpack.config.js配置一段代码

const path = require("path");

module.exports = {
  // 指定入口文件 index.ts文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    // 指定打包文件的目录---
    path: path.resolve(__dirname, "dist"),
    // 打包后文件的文件
    filename: "bundle.js",
    // 告诉webpack不使用箭头
    environment: {
      arrowFunction: false, // 关闭webpack的箭头函数，可选
    },
  },
  // 用来设置引用模块
  resolve: {
    extensions: [".ts", ".js"],
  },
  // 指定webpack打包时要使用模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定的是规则生效的文件---以.ts结尾的文件
        test: /\.ts$/,
        // 要使用的loader加载器
        use: {
          loader: "ts-loader",
        },
        // 要排除的文件---不打包node_modules文件夹
        exclude: /node_modules/,
      },
    ],
  },
  //页面html打包
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // title: 'TS测试',   /html页面标题
      template: "./src/index.html", //自定义html模板
    }),
  ],
  mode: "production", //webpack打包模式
};

7.webpack启动后自动打开浏览器——– page.json 添加

"scripts": {
    "start": "webpack-dev-server --host localhost --open"
    //"start": "webpack-dev-server --host 127.0.0.1 --open"
  },