TypeScript 环境搭建

起床了
107 阅读3分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第34天，点击查看活动详情

TypeScript 环境搭建

开发环境搭建

为了我们之后的学习和使用方便，我们来配置一个 webpack 的环境：在环境中我们编写对应的 TypeScript 代码，让 webpack 自动帮助我们编译，并且在浏览器中查看结果。

创建一个简单的项目Demo目录结构如下：

│ index.html
├─build
│      webpack.config.js
└─src
        index.ts

目录和文件夹结构分析:

  • index.html是跑在浏览器上的模块文件
  • build文件夹中用于存放webpack的配置信息
  • src用于存放我们之后编写的所有TypeScript代码

注意：在构建webpack之前，你必须先在本地安装下载node.js环境

使用npm管理

我们要使用npm来初始化package.json文件，用VScode编辑器打开Demo文件夹，按下Ctrl+` 输入以下命令：

>npm init -y

生成package.json文件如下：

{
  "name": "demo",  //包的名称  
  "version": "1.0.0",    //版本号  
  "description": "",    //包的描述  
  "main": "index.ts",  //文件入口，默认是index.js，可修改 
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"  //测试命令，可以不填直接回车  
  },
  "keywords": [],   //项目关键词，供搜索 
  "author": "",  //作者名称 
  "license": "ISC"  //包遵循的开源协议，默认是ISC  
}

本地依赖 TypeScript

因为 webpack 会在本地去查找 TypeScript 的依赖，所以我们是需要本地依赖 TypeScript 的；

>npm install typescript

在进行 TypeScript 开发时，我们会针对 TypeScript 进行相关的配置，而这些配置信息是存放在一个 tsconfig.json 文件中的

我们并不需要手动去创建它，可以通过命令行直接来生成这样的一个tsconfig.json文件

>tsc --init

![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e3cc6fe274324c31b803e1c5c9754ce2~tplv-k3u1fbpfcp-zoom-1.image)

配置tslint来约束代码

为了让大家按照严格的TypeScript风格学习代码，这里我希望大家可以加入tslint：

>npm install tslint -g //全局安装

在项目中初始化tslint的配置文件：tslint.json

>tslint -i

生成如下的目录结构如下：

![img](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c4cf17a055d84cc98c2d362809328276~tplv-k3u1fbpfcp-zoom-1.image)

配置 Webpack 环境

使用webpack开发和打包，需要依赖webpack、webpack-cli、webpack-dev-server

>npm install webpack webpack-cli webpack-dev-server -D

为了方便启动webpack，我们在package.json文件中添加如下启动命令serve：


"scripts": {
  "test": "echo "Error: no test specified" && exit 1" 
  "serve": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config build/webpack.config.js" 
}

添加webpack的相关依赖

cross-env

这里我们用到一个插件 “cross-env” ，这个插件的作用是可以在 webpack.config.js 中通过 process.env.NODE_ENV 来获取当前是开发还是生产环境，我们需要这个插件：

>npm install cross-env -D

ts-loader

因为我们需要解析 .ts 文件，所以需要依赖对应的loader：ts-loader

>npm install ts-loader -D

html-webpack-plugin

编译后的代码需要对应的html模块作为它的运行环境，所以我们需要使用html-webpack-plugin来将它插入到对应的模板中：

>npm install html-webpack-plugin -D

配置webpack.config.js文件

安装好以上的依懒后，将如下配置到webpack.config.js文件中:

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.ts", //编译时的入口文件
  output: {
    filename: "build.js"  //指定项目编译完时的输出文件
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]  //自动补齐文件后缀
  },
  module: {  //配置loader
    rules: [
      {
        test: /.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  // 配置本地开发指令
  devtool: process.env.NODE_ENV === "production" ? false : "inline-source-map",
  devServer: {
    contentBase: "./dist", //基于哪个文件夹做为根目录运行
    stats: "errors-only", //启动本地服务后在控制台打印那些信息
    compress: false, //是否启动压缩
    host: "localhost",
    port: 8080  //端口
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html"  //编译时使用那个html文件为模板来编译
    })
  ]
};

终端中启动服务

下面我们就可以的在index.ts中编写代码，之后只需要启动服务即可：

//index.ts
let num:number = 123
console.log(num)

启动服务命名：

>npm run serve

img

启动成功后；在浏览器中打开：http://localhost:8080/ 如下

img

注意： 修改index.ts代码保存后，在浏览器直接可以看到修改后的效果：不需要手动进行任何刷新。

最后的文件目录，以及package.json文件对于的版本如下： img

avatar
文章
阅读
粉丝