手把手教你typescript系列 第一篇 之配置开发环境

这次的目标是 使用typeScript实现一个hello world

其中包括了 webpack配置项的详细讲解(在build目录下的各个js文件中都有注释)
主要搭建了webpack + typeScript的环境, 后期的代码都会基于此工程进行开发

gitee项目地址

一、准备环境

1. 给电脑安装node环境 (http://nodejs.cn/),可直接通过...
2. 全局安装 typeScript,安装到全局在任何项目都可以访问到
3. 安装编辑器 我这里用的vscode

---

二、构建项目

1. 新建文件夹 命名： typeScriptDemo
2. 进入文件件, 进行项目初始化

• 配置项默认都是yes,所以我选了 -y
  运行命令 npm init -y
• 此时typeScriptDemo文件夹下就多了个package.json。这是项目的配置文件

1. 进行typescript初始化

• 运行命令 tsc -h 看看他都支持哪些命令
• 运行命令 tsc -init
• 运行完成 可看到生成了 tsconfig.json, 这就是ts的配置文件

1. 新建一个src目录
2. 在src目录下新建index.ts

//index.ts 
//这行声明了一个字符串类型的变量 hello 并将"hello TypeScript"赋值给它
let hello: string = "hello TypeScript";

1. 运行编译命令

//进入相对应的目录
cd src
//运行编译命令
tsc index.ts

1. 可以看到index.ts的同级目录下多了个index.js
2. 接下来配置我们的构建工具, 使用webpack, 不了解webpack也没关系,我们现在只是要将ts代码跑起来,webpack只是个工具.
3. 安装三个工具包
   执行命令 npm i webpack webpack-cli webpack-dev-server -D
4. 配置webpack时,需要区分开发环境和生产环境, 因为两个环境的配置不一样,需要做不同的事情. 为了工程的可维护性, 我们需要把开发环境配置和生产环境配置和公共配置分开书写, 最后通过插件来合并
5. 在src同级目录下新建 build目录,用来存放所有的配置文件
   webpack.base.config.js 是公共环境的配置
   webpack.config.js 所有配置文件的 入口
   webpack.dev.config.js 开发环境的配置
   webpack.pro.config.js 生产环境的配置

完啦 这里太复杂 我直接放源码了,注释写在源码中
大概意思就是说: 在 webpack.base.config.js 引入typescript了,所以接下来要安装typescript和ts-loader和
html-webpack-plugin等插件,具体请看下方步骤

1. 重要: 安装typescript和ts-loader

运行命令: npm i ts-loader typescript -D
我在这里安装时遇到个问题: 我的项目也叫typescript,导致typescript 包无法正常安装, 注意不要写错别字!

1. 安装 html-webpack-plugin 和 clean-webpack-plugin

npm i html-webpack-plugin -D
npm i clean-webpack-plugin -D

1. 编写html模板文件: 在src目录下新建tpl目录,新建index.html文件, 修改title为typeScript, 在body中新建一个div class命名为 app

1. 安装webpack-merge 它的作用是把两个webpack文件合并,在webpack.config.js 所有配置文件的 入口会用到

npm i webpack-merge -D

1. 修改npm的脚本

   • 打开package.json文件,首先来更改他的入口
     'main': './src/index.ts'

• 编写启动开发环境的命令
  "scripts": {
  "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js"
  },

1. 打开浏览器 访问本地的8080端口(默认开在8080)

1. 在index.ts中,加入一行

document.querySelectorAll('.app')[0].innerHTML = hello;

1. 编写 构建生产环境的脚本

指定参数
设置当前的环境变量 --mode=production
指定配置文件 --config ./build/webpack.config.js
"scripts": {

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

},

1. 运行 npm run build,打包成功会生成dist文件

1. 大功告成