这次的目标是 使用typeScript实现一个hello world
其中包括了 webpack配置项的详细讲解(在build目录下的各个js文件中都有注释) 主要搭建了webpack + typeScript的环境, 后期的代码都会基于此工程进行开发
一、准备环境
- 给电脑安装node环境 (nodejs.cn/),可直接通过官网下载安装
- 全局安装 typeScript,安装到全局在任何项目都可以访问到
- 安装编辑器 我这里用的vscode
二、构建项目
-
新建文件夹 命名： typeScriptDemo
-
进入文件件, 进行项目初始化
- 配置项默认都是yes,所以我选了 -y 运行命令 npm init -y
- 此时typeScriptDemo文件夹下就多了个package.json。这是项目的配置文件
- 进行typescript初始化
- 运行命令 tsc -h 看看他都支持哪些命令
- 运行命令 tsc -init
- 运行完成 可看到生成了 tsconfig.json, 这就是ts的配置文件
-
新建一个src目录
-
在src目录下新建index.ts
//index.ts
//这行声明了一个字符串类型的变量 hello 并将"hello TypeScript"赋值给它
let hello: string = "hello TypeScript";
-
运行编译命令 //进入相对应的目录 cd src
//运行编译命令 tsc index.ts -
可以看到index.ts的同级目录下多了个index.js
-
接下来配置我们的构建工具, 使用webpack, 不了解webpack也没关系,我们现在只是要将ts代码跑起来,webpack只是个工具.
-
安装三个工具包 执行命令 npm i webpack webpack-cli webpack-dev-server -D
-
配置webpack时,需要区分开发环境和生产环境, 因为两个环境的配置不一样,需要做不同的事情. 为了工程的可维护性, 我们需要把开发环境配置和生产环境配置和公共配置分开书写, 最后通过插件来合并
-
在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等插件,具体请看下方步骤
-
重要: 安装typescript和ts-loader 运行命令: npm i ts-loader typescript -D 我在这里安装时遇到个问题: 我的项目也叫typescript,导致typescript 包无法正常安装, 注意不要写错别字!
-
安装 html-webpack-plugin 和 clean-webpack-plugin npm i html-webpack-plugin -D npm i clean-webpack-plugin -D
-
编写html模板文件: 在src目录下新建tpl目录,新建index.html文件, 修改title为typeScript, 在body中新建一个div class命名为 app
-
安装webpack-merge 它的作用是把两个webpack文件合并,在webpack.config.js 所有配置文件的 入口会用到 npm i webpack-merge -D
-
修改npm的脚本
- 打开package.json文件,首先来更改他的入口 'main': './src/index.ts'
- 编写启动开发环境的命令
"scripts": {
"start": "webpack-dev-server --mode=development --config ./build/webpack.config.js"
},
- 打开浏览器 访问本地的8080端口(默认开在8080)
- 在index.ts中,加入一行
document.querySelectorAll('.app')[0].innerHTML = hello;
-
运行 npm run build,打包成功会生成dist文件
-
大功告成
