TypeScript彻底解读(26课时)_1.TypeScript彻底解读-开发环境搭建

1.TypeScript彻底解读-开发环境搭建

 

初始化项目

 

手动建立文件夹

D:\MyDemos\tsDemo\client-demo

用VSCode打开

npm init:初始化项目

 

 

 

 

而后咱们的项目根目录就多了个package.json的文件

 

 

 

建立相关目录文件夹

untils:业务相关的，可服用的方法

assets：主要放静态资源

　　img：图片

　　font：字体文件

tools:业务无关的纯工具的函数

api：把一些能够复用的接口请求的方法，放在api文件夹下

config：通常放配置文件，把一些可能会修改的配置，抽离出来放在这里

 

src同比别的文件夹typings：存放ts的声明文件

build:项目打包上线的一些配置，或者咱们本地开发时，本地服务的一些配置，通常就放咱们的webpack配置

 

文件夹建好之后，安装咱们ts的依赖

把typescript和tslint安装在全局

tslint和eslint都是对代码风格监测的工具。tslint是专一于ts的

 

咱们把它们安装在全局，因此后要交一个 -g

npm install typescript tsint -g

 

安装完成后，使用：tsc --init来初始化咱们ts的配置

咱们客户看到 里面有不少的注释文件

这是ts在1.8的版本之后，支持能够在config内写注释

 

添加webpack

这里是用webpack4，4最大的亮点就是尽量少的让咱们去配置

首先须要在项目中安装webpack

npm install webpack

安装为开发依赖 -D

少安装了依赖，根据视频中的再操做一遍

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

 

安装完成后，咱们须要写一个webpack的配置文件，在build文件夹下建立webpack.config.js文件

 

package.json内的scripts节点 ，均可以用npm run去调用。例如这里如今配置的是test

 

咱们添加一个运行的执行 start,其余的指令必须前面应npm run 去调用，例如这个test的指令，调用就是:npm run test

可是这个start指令呢，咱们直接使用：npm start就能够了。start的配置，咱们待会再看。

 

webpack的配置

webpack是运行在node环境下的。只在你编译的时候运行。

咱们使用node的module导出一个模块

entry是入口文件，指定了src目录下的index.ts文件

把这个文件作为入口文件，那么咱们在本地开发和打包的时候，他都会从这个文件开始，逐渐的往里面添加依赖什么的

而后咱们在src下建立index.ts文件，里面的内容呢，咱们先不用管

output:项目变异完的输出文件

filename：咱们变异完后的文件叫作什么,ts编译完后都是js文件

resolve:

　　 extensions是一个数组

例如上面咱们配置了extensions里面有个.js的文件，在src的目录下有一个index.js的文件，咱们在index.ts内要引入这个同级别的index.js的文件的话，通常就是这么写的

import XX from './index.js'

可是咱们配置了extensions里面的.js这么个配置，那么这里咱们在import的时候，就能够把后缀.js省略掉

import XX from './index'

它会自动的去找同级别下的index开头的这么个文件

 

那么咱们这里是开发ts，因此天然也要个添加对ts的支持

这里配置了.ts和.tsx这两种，

tsx里面就是写一些jsx的语法

 

module配置项

rules:配置依稀对于制定文件的处理的loader之类的东西

这个正则表达式匹配的后缀为ts或者tsx的文件

use：就是表示使用ts-loader来处理ts和tsx格式的文件

那么既然咱们配置上了ts-loader。咱们就须要使用npm进行安装

npm install ts-loader -D

-D表示 开发依赖

还要制定exculde来排除node_modules文件夹下的文件，这样在编译的时候就不会去编译node_modules文件夹下的文件了。

source-map

开发的时候为了方便调试代码，是须要source-map

调试的时候方便定位你代码的一个东西。这里咱们使用inline-source-map

开发的时候咱们是须要source-map。可是实际打包上线是不须要的，不须要source-map会增长的编译速度和打包速度，减小一些资源的空间浪费

因此咱们这里须要判断下当前是在本地开发环境仍是上线打包

这个NODE_ENV须要在哪里传进来呢?在咱们的命令里面。咱们这先留空，待会须要用到一个工具，待会再来介绍

经过：process.env.NODE_ENV === 'production'来判断是不是生产环境

NODE_ENV参数的传入

在启动的指令这里，咱们须要用到webpack-dev-server,就是一个咱们用于本地开发的一个服务器

 

如何启动而且应用这些配置呢？

webpack-dev-server：这是启动命令

--config：经过config参数来指定咱们webpack的配置文件

那么咱们就制定build文件夹下的webpack.config.js文件。

这样咱们就指定了，webpack-dev-server去build文件夹去读取咱们webpack的配置文件。

传入参数。借助工具：cross-env 后面指定了 NODE_ENV的值是开发环境development

这样在webpack的配置文件中就能够经过process.env.NODE_ENV获取到咱们传入的值了。

用了cross-env天然咱们也须要安装它

npm install cross-env -D

-D:表示做为开发依赖进行安装：

 

这样咱们的本地开发指令就写好了，本地开发利用webpack-dev-server它有一些参数也能够配置

 

webpack-dev-server的参数配置

 

contentBase:基于哪一个文件夹做为根目录运行的，这里咱们配置为根目录的dist文件夹

 

 

stats:

webpack启动后在控制台打印出哪些信息，咱们只关注错误信息，这里只写个简单的errores-only

compress：false不启动压缩

 

host：'localhost'

port:端口制定8089

这样本地开发服务器的配置就配置完成了

配置插件：

plugins这里用到两个插件

 

npm install clean-webpack-plugin:能够清理制定的文件夹或者文件

第二个插件：

html-webpacl-plugin:指定一个编译的html文件，后面的编译呢会基于此html做为模板来编译

连个插件一块儿安装：

npm install clean-webpack-plugin html-webpack-plugin -D

使用者两个插件须要先引入：

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

 

首先咱们要使用的就是CleanWebpackPlugin给传入一个对象，设置一些配置

程序build以前先清理dist打包生成的文件夹

编译的时候制定哪一个html做为模板进行编译

src下建立template文件夹，并再建立index.html文件夹

这样，这就是咱们的模板文件了。

 

webpack会打包项目会生成一个dist文件。会把这个模板文件index.html和咱们定义的main.js文件放到一块儿，并会自动在index.html模板里面引入main.js和这个文件

项目中安装ts的依赖

刚才咱们是全局中安装的ts，咱们在咱们的项目中也要添加依赖

npm install typescript

 

纠正错误：

配置文件写错了多个地方

 

运行start指令

 

 

http://localhost:8089/

 

有热更新，修改后会自动刷新页面

 

 

在src/index.ts内简单的定义一个number类型的变量

配置打包环境：

添加新的指令build

经过cross-env传入参数 NODE_ENV=production表示生产环境，咱们调用命令webpack ，而后经过--config 指定配置文件路路径

由于build传入的production生产环境，因此打包的时候就不会产生source-map

npm run build 进行打包

 main.js文件是通过压缩的

 

 在index.ts编写代码修改页面的title

 

 

 

 

 开发环境配置好了

本地运行和打包也配合好了