上一节:
下一节:

  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

    配置tslint来约束代码

    为了让大家按照严格的TypeScript风格学习代码，这里我希望大家可以加入tslint：
    >npm install tslint -g //全局安装
    在项目中初始化tslint的配置文件：tslint.json
    >tslint -i
    生成如下的目录结构如下：
    img

    配置 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
上一节:
下一节: