关于typescript:使用typescript与webpack搭建开发环境

应用 typescript 与 webpack 搭建开发环境

$ yarn init -y

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

$ npm i -g yarn

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

$ yarn install

$ tsc --init

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

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

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

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

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

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

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

在 package.json 中减少以下代码

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

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

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

http://localhost:8080/

获取源码点击这里

我的项目初始化