搭建开发环境

使用npm初始化项目

• npm init或者npm init -y
• npm i -g typescript tslint
• 在项目目录中tsc --init 初始化TypeScript项目
• 作为开发依赖，安装webpack：cnpm i webpack webpack-cli webpack-dev-server -D
• 作为开发依赖，安装typescript：cnpm i typescript -D
• 作为开发依赖，安装ts-loader：cnpm i ts-loader -D
• 作为开发依赖，安装webpack plugins：cnpm i clean-webpack-plugin html-webpack-plugin -D
• 作为开发依赖，安装cross-env：

TypeScript 项目基础目录结构

• build （项目打包配置 -- webpack配置）
  • webpack.config.js （webpack配置文件）
• src （项目源代码）
  • api （接口目录）
  • assets （静态文件目录）
  • config （配置目录）
  • tools （和业务无关的工具目录）
  • template (模板文件)
  • utils （工具目录）
  • index.ts （入口文件）
• typings (为TypeScript模块书写的声明文件)
• tsconfig.json TypeScript项目的配置文件

webpack配置

• 在/build/webpack.config.js文件下，对webpack进行配置

const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'main.js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']  // 需要webpack自动识别和忽略的扩展名
  },
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  devtool: process.env.NODE_ENV='prod' ? false : 'inline-source-map',
  devServer: {
    contentBase: './dist', // 指定本地服务运行时的根路径
    stats: 'errors-only', // 本地服务启动后，在控制台打印的信息
    compress: false,  // 不启用压缩
    host: 'localhost',
    port: 8089
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: ['./dist']  // 在编译之前，清理编译路径
    }),
    new HtmlWebpackPlugin({
      template: './src/template/index.html' // 配置模板文件
    })
  ]
}

编辑package.json文件

• 编辑scripts字段，加入打包脚本（build）和运行本地服务的脚本（start）：

...
{ 
  "scripts": {
    "start": "cross-env NODE_ENV=dev webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=prod webpack --config ./build/webpack.config.js"
  }
}
...