应用 typescript 与 webpack 搭建开发环境

我的项目初始化

$ yarn init -y

本文全副应用 yarn 命令，没有装置的能够执行上面应用 npm 装置

$ npm i -g yarn

装置依赖

将下面内容拷贝到我的项目中的 package.json 文件中，执行装置命令

$ yarn install 

我的项目配置

初始化 tsconfig.json

$ tsc --init

如果呈现 tsc 不是失常的命令谬误提醒 可在命令后面增加 npx 而后在执行
执行胜利之后批改 tsconfig, 写入以下内容

更多配置选项可参考官网文档

webpack.config.js

在我的项目根目录下减少webpack.config.js, 内容如下

更多配置选项可参考官网文档
到这里我的项目的配置项根本曾经全副实现了，上面开始写代码

减少第一个 ts 文件

在我的项目目录减少 src 文件夹，并创立第一个文件index.ts, 内容如下

实现之后运行一下我的项目，验证一下

我的项目启动

我的项目启动有两种形式，一种是间接在终端中输出 webpack serve 来启动或者应用 yarn 命令启动，咱们应用第二种形式。
首先配置 yarn 的启动脚本

在 package.json 中减少以下代码

  "scripts": {"start": "webpack serve"}

上面咱们就能够在终端中间接输出 yarn start 来启动我的项目了，执行之后会看到以下提醒

我的项目顺利启动，并在本地启动了一个端口为 8080 的服务, 咱们能够间接在浏览器中那个拜访

http://localhost:8080/

获取源码点击这里