回顾TypeScript 使用Webpack搭建编程环境

前言：今天一时兴起想复习下typescript 于是采用了webpack来搭建环境 顺便记录一下这个过程给大家分享下。

前置条件如下

安装命令

npm install typescript -g

查看版本

tsc --version

通常做法有两种方式：

①：使用ts-node

1. npm install ts-node -g
2. npm install tslib @types/node -g
3. ts-node xxx.ts

②：基于webpack来构建环境实现热更新操作

下面重点介绍第二种方式

1. 创建一个简单的项目目录结构

新建一个新的目录：LearnTypeScript，并且创建如下的目录结构

│  index.html
├─build
│      webpack.config.js
└─src
        main.ts

目录和文件夹结构分析:

• index.html是跑在浏览器上的模块文件
• build文件夹中用于存放webpack的配置信息
• src用于存放我们之后编写的所有TypeScript代码

2. 使用npm管理项目的依赖

webpack本身需要有很多的依赖，并且之后我们也需要启动node服务来快速浏览index.html模板以及编译后的JavaScript代码。

我们要使用npm来初始化package.json文件：

npm init -y

初始化package.json

3. 本地依赖TypeScript

为什么需要本地依赖TypeScript：

• 因为我们之后是通过webpack进行编译我们的TypeScript代码的，并不是通过tsc来完成的。（tsc使用的是全局安装的TypeScript依赖）
• 那么webpack会在本地去查找TypeScript的依赖，所以我们是需要本地依赖TypeScript的；

安装本地TypeScript依赖

npm install typescript

本地安装TypeScript

4. 初始化tsconfig.json文件

在进行TypeScript开发时，我们会针对TypeScript进行相关的配置，而这些配置信息是存放在一个tsconfig.json文件中的

我们并不需要手动去创建它，可以通过命令行直接来生成这样的一个文件：

tsc --init

初始化tsconfig.json

此处遇到了点小问题

tsc : 无法加载文件 C:\nodejs\tsc.ps1，因为在此系统上禁止运行脚本。

大概是这个亚子：

项目场景：通过tsc 文件名（将ts代码编译成js文件）时，报此系统禁止运行脚本

解决方案： 1.管理员身份运行vs code 2.在终端执行：get-ExecutionPolicy，显示Restricted

3.在终端执行：set-ExecutionPolicy RemoteSigned

4.在终端执行：get-ExecutionPolicy，显示RemoteSigned

最后，在通过tsc 文件名对代码进行编译，编译成功后会生成对应的js文件，在对应的html文件中引入js即可查看运行结果。

5. 配置tslint来约束代码

为了让大家按照严格的TypeScript风格学习代码，这里我希望大家可以加入tslint

全局安装tslint：

npm install tslint -g

在项目中初始化tslint的配置文件：tslint.json

tslint -i

初始化tslint.json

2.2. 项目环境的Webpack

下面我们开始配置webpack相关的内容

1. 安装webpack相关的依赖

使用webpack开发和打开，需要依赖webpack、webpack-cli、webpack-dev-server

npm install webpack webpack-cli webpack-dev-server -D

安装webpack依赖

2. 在package.json中添加启动命令

为了方便启动webpack，我们在package.json中添加如下启动命令

"scripts": {
  "test": "echo "Error: no test specified" && exit 1",
  "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js"
},

自定义启动脚本

3. 添加webpack的其他相关依赖

依赖一：cross-env

这里我们用到一个插件 "cross-env" ，这个插件的作用是可以在webpack.config.js中通过 process.env.NODE_ENV 来获取当前是开发还是生产环境，我们需要这个插件：

npm install cross-env -D

依赖二：ts-loader

因为我们需要解析.ts文件，所以需要依赖对应的loader：ts-loader

npm install ts-loader -D

依赖三：html-webpack-plugin

编译后的代码需要对应的html模块作为它的运行环境，所以我们需要使用html-webpack-plugin来将它插入到对应的模板中：

npm install html-webpack-plugin -D

4. 配置webpack.config.js文件

将如下配置到webpack.config.js文件中：

• 这里不再给出详细的说明信息，webpack后面我可能会再开一个专栏来讲解

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.ts",
  output: {
    filename: "build.js"
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
  devServer: {
    // old webpack-dev-server version
        // contentBase: "./dist",
        static: "./dist",
        // stats: "errors-only",
        devMiddleware: {
            stats: 'errors-only',
        },
        compress: false,
        host: "localhost",
        port: 8080
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"
    })
  ]
};

2.3. 项目环境下代码测试

下面我们就可以愉快的在main.ts中编写代码，之后只需要启动服务即可：

测试代码

在终端中启动服务：

npm run serve

程序运行

在浏览器中打开：http://localhost:8080/

查看结果

修改代码，直接可以看到修改后的效果：不需要手动进行任何刷新

此处借鉴了coderwhy老师的搭建流程（因webpack-dev-server版本不同了 加以修正）

tip：安装很慢的同学配一下淘宝镜像

-> npm config set registry registry.npm.taobao.org