正常操作，正常分析，大家好， 我是D1n910。

我为什么要学TypeScript？

我是在职的前端开发工程师，我想要提升我的个人能力，提高代码质量。

目前我已经在使用eslint来检测我的代码规范。我知道TypeScript是能够有管控代码的能力，能够让我编写出质量高的代码。

……

理由可能很多，但是最核心的理由是这样的：我这个人爱【追新】。

我个人是比较喜欢追求流行的东西，因为在我看来，一件东西流行起来，应该有它的价值所在。而且学会TypeScript看起来很酷，虽然它好像也是2015的东西了，但是看起来确实很酷的样子。

我感觉到非常兴奋，对于一件对于我来说，是新的前端的东西，我感觉到我就是一只猫咪，一根逗猫棒（typescript）在我面前摇晃，我忍不了！

好的，开始吧。

TypeScript完全解读（1/26）搭建开发环境

核心内容

• 使用npm初始化项目

• 全局安装部分依赖

• 使用tsc初始化配置

• 配置webpack

• 添加开发和打包命令

1、使用npm初始化项目

注：我使用的系统是 mac，用的开发工具是 vscode

 1.1、新建一个空文件夹，名称自定义，我这边按照视频为 client-side

1.2、在命令行中输入`npm init`来初始化项目

1.3、它会有一个交互的内容，来辅助我们进行配置

* 左边文字配置名，括号是默认配置内容，如果你要使用默认内容，直接敲回车即可

如果你要的是非默认配置的内容，可以自行填写后敲回车

配置内容为：

        【工程名称】默认

        【版本号】默认

        【介绍】参考视频，叫做ts-learning的源代码

        【入口文件】参加视频，因为我们是ts工程，所以写为`./src/index.ts`

        【测试指令】没有，跳过

        【git仓库】如果你有git仓库，就可以填，这边没填

        【关键词】我写的 `typescript,source_code,d1n910`

        【作者】填你自己

        【协议】这边用的MIT协议

最后回车就可以看到确认选项，没问题回车就可，看到有问题输入` no `可以重写。 

 如此就可以新建好我们的package.json文件了

* 我们也可以直接用`npm init -y`这个命令直接生成默认的配置 文件

1.4、创建基础文件夹 

创建一个`src`文件夹，这个文件夹存放我们项目中的资源

在`src`文件夹下创建一些文件夹进行分类

     `utils`——存放和业务相关的代码方法

    `tools`——存放和业务无关的纯工具的函数

    `assets`——存放一些静态资源

        `assets/img`——图片

        `assets/font`——字体文件

    `api`——封装好的可以复用的请求文件可以放到api文件夹下

    `config`——放置配置文件

新建一个和`src`同级的文件夹`typings`，以后我们学习的内容涉及到ts声明的会放到`typings`文件夹下面

新建一个和`src`同级的文件夹`build`，放置我们项目中打包上线的一些配置，或者我们本地开发时启动本地文件的配置

2、全局安装部分依赖

2.1、在命令行输入下面的命令进行全局安装

`sudo npm install typescript tslint -g` （tslint使用来代码检查的）

2.2、提示安装成功后，可以输入`tsc -v`查看版本是否能使用typescript

能够成功，则可以使用`tsc --init`初始化我们的ts配置

成功后，会看到一个 `tsconfig.json`文件的生成

里面有很多配置，可能会奇怪的是，为什么这可以有注视，是因为ts v1.8版本里，支持了ts添加注释。

现在里面会有4个是打开的，具体每项配置的功能会在后面的课程中说明。

3、添加webpack 4

3.1、介绍

webpack4相比webpack2之类的最大的亮点是需要配置的内容少，几乎零配置

运行`npm install webpack webpack-cli webpack-dev-server -D `

安装webpack、和webpack-cli没毛病，安装webpack-dev-server是因为我们要本地开发，-D就是安装为开发依赖。

安装好webpack后，为了使用，我们需要在`build`文件写好webpack的配置文件。

3.2、webpack配置书写

新建一个文件`webpack.config.js `，我们待会会在一个指令中运行这个文件。

内容如下

`webpack.config.js`

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

 // V3.0.0版本的`clean-webpack-plugin`要用结构赋值的写法 

//  const CleanWebpackPlugin =  require('clean-webpack-plugin')

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

module.exports = {

    // 入口文件，咱们也要新建一个这个文件

    entry: "./src/index.ts", 

    // 输出文件

    output: {

        // 编译完之后的文件名称 *ts文件编译后会生成js文件

        filename: "main.js"

    },

    resolve: {

        // extensions能够自动解析文件的拓展，是数组。如果我们在项目中想要引入别的项目文件，比如我们想在index.ts中引入一个同级下的index.js文件，那么我们原本的 `import xx form './index.js'`的`.js`可以不用书写，它会自动在同级下找。可以直接写为`import xx form './index'`。我们要开发ts项目，所以要加`.tsx`、'.ts'

        extensions: ['.js', '.tsx', '.ts']

     },

    module: {

        //  这边主要引用一些loader的东西

        rules: [{

                // test是用以匹配文件名称的正则表达式，这个表达式匹配的就是后缀是ts或者tsx的文件

                test: /\.tsx?$/,

                // 针对不同的资源，会有不同的资源加载器，这边用的就是ts-loader，我们要使用ts-loader，就需要安装ts-loader，在命令行中输入`npm install ts-loader -D`

                use: 'ts-loader',

                // 我们还需要一个exclude，即设定不包含不用处理的文件，这也是正则表达式，这我们设定不对/node_modules/下的ts文件做处理

                exclude: /node_modules/

        }]

    },

    // 配置source-map，用来方便调试的时候定义到自己的代码，这个是我们开发的时候为了方便用的，source-map有很多选项，这里我们用的是inline-source-map，但是我们实际生产环境打包上线的时候，是不需要的，如果你添加了会降低打包速度添加不必要的资源浪费。我们可以通过一个参数进行判断 `process.env.NODE_ENV`，这个参数我们是在package.json进行获得的【详细请看3.4】。

    //我们判断是不是生产环境，如果不是生产环境才启动source-map配置，请提前看3.4！！！

    devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',

    devServer: {

        // 这个决定了我们的文件夹是基于哪个开发目录运行的

        contentBase: './dist',

        // 控制我们在启动后的控制台会打印出什么信息，这边我们暂时只关心错误的情况，所以可以用`errors-only`

        stats: 'errors-only',

        //  是否启动压缩

        compress: false,

        // 域名

        host: 'localhost',

        // 端口，写一个指定打开的端口

        port: 8089

    },

    // 用一些插件配置项，可以安装这些

    //  ` clean-webpack-plugin` 清理一些指定的文件夹或者文件 `html-webpack-plugin` 指定一个html作为编译的模版

    plugins: [

        new CleanWebpackPlugin({

            打包之前，先清理掉原来dist文件夹的内容

            cleanOnceBeforeBuildPatterns: ['./dist']

        }),

       //  来指定编译的时候要用什么html文件作为模版

       // 新建个初始的html文件即可。webpack会把我们编译后的main.js文件和模版文件放在一起，并且会帮我们自动地把main.js文件引入到html文件中

        new HtmlWebpackPlugin({

            template: './src/template/index.html'

        })

    ]

}

* 注意我们之前全局安装了typescript，还需要在项目里安装`npm install typescript`，因为我们项目中还会用到typescript的依赖

3.4、package.json的书写

我们在3.3说了要写NODE_ENV，主要`package.json`的`scripts`字段下添加运行指令

* 这边添加的命令用在命令行中用 npm run拼命令名称即可跑

* 现在test的提示有问题，主要是因为我们没有对应内容，可以暂时不管

我们在dev开发，需要用wbepack-dev-server启动webpack服务器，那么我们写一个start指令（这边start指令有个特别的地方，平时的指令需要 `npm run xxx` 才能执行，这边直接用`npm start`）

指令如下

"start": "webpack-dev-server --config ./build/webpack.config.js"

刚刚说的设置NODE_ENV，通过使用 cross-env 来传入，因为我们是开发环境，所以写成NODE_ENV=development，注意，需要安装开发依赖`npm install cross-env -D`

"start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js"

这样我们的本地开发的配置就写好了。

4 跑起来！！！

在跑起来之前，我建议再检查一遍配置和我是否相同，下面，是核心文件的截图，这些截图上的内容，是能够让我跑起来的！——当然，可能因为时效性的缘故，请注意是否因为【包版本】不同而导致不能跑起来，类似的问题，我以后也不会再进行赘述

`build/webpack.config.js`

`package.json`

模版html不是很重要，不过这里顺便截图下

好了，到了激动人心的时刻，在命令行中运行

`npm start`

就可以看到我们的项目成功跑起来了

访问对应的域名端口地址，可以看到我们起的内容～

顺便说一句，在此之前，我自己跑不起来，跑一下npm start就会遇到很多报错，检查了很久发现都是因为我自己写配置目录打了很多错别字，所以跑不起来，如果同学你也像下面这样有各种问题，那么请放心，一定能解决，先遍历一遍，看看是不是有错别字。一定能解决问题的！跑起来项目的那一刻，真的特别开心！！！

* 这个webpack配置好了的，本地开发支持热更新，你更新了内容一保存，就会浏览器会自动地刷新。

5 把玩下index.ts

index.ts是我们的入口文件

这里我们先简单地写一个内容

很“俗套”，但是很有“情怀”

* 现在你可能稍微有点猜到:string是用来定义类型。不过这是后面的内容，就算你不知道，也不着急。

一起说：“Hello world”

6 配置打包命令

进入package.json文件下，新增一条指令

`"build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"`

在命令行执行 `npm run build`命令

打包成功后，我们可以看到dist文件夹下新增了index.html和main.js

index.html有自动引入main.js

main.js也是打包好的丑化压缩后的代码

然后我们可以直接在浏览器中大家我们打包好后的html文件

到这里，咱们系统地走了一遍如何配置webpack来打包我们的工程文件，就是我们本节内容了。

这部分的代码内容其实算是简单的，上面有详细的截图。

等我有空的时候，会专门整理好发到一个仓库里，现在的话，我需要洗澡睡觉啦。

在评论里评论，可以参与我的一个督促我学习的活动。

声明

本系列内容是D1n910通过学习Lison老师的TypeScript完全解读(26课时)整理的文字笔记，如果看完后觉得有收获，抑或想要直接支持，抑或想要直接视频原版内容，请直接到https://segmentfault.com/ls/1650000018455856?r=bPXT7X。

虽然本系列是笔记，但是也有D1n910的心血所在，请勿在未告知D1n910及获得D1n910允许的情况下直接转载本笔记——如果您是基于笔记又生成您自己的笔记，这是一点问题都没有的～