手牵手系列之TypeScript开发环境搭建

新建项目

初始化

npm init

安装全局依赖

npm install typescript tslint -g

• 执行命令初始化，项目根目录生成tsconfig.json文件

tsc --init

• 引入webpack(版本4.0)

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

• 根目录新建build文件夹，以及文件下webpack.config.js文件 ，用于webpack相关配置。

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

module.exports = {
  entry: './src/index.ts', // 入口文件
  output: {
    filename: 'main.js' // 编译完出口文件
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx'] // 文件后缀，自动解析文件拓展 示例：import xxx from './index.js 可以省略.js后缀 import xxx from './index'
  },
  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', // webpack启动服务后，需要在控制台打印那些信息 例如：错误信息
    compress: false, // 是否启动压缩
    host: 'localhost',
    port: 8089
  },
  plugins: [
    // 插件
    new CleanWepackPlugin({
      // 清空指定文件
      cleanOnceBeforeBuildPatterns: ['./dist']
    }),
    new HtmlWebpackPlugin({
      template: './src/tamplate/index.html'
    })
  ]
}

• 下载ts-loader,用于解析ts

npm install ts-loader -D

• 下载cross-env,获取当前环境（development OR production）

npm install cross-env -D

• package.json中配置项目启动

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

安装插件 

• clean-webpack-plugin 清理指定的文件

npm install clean-webpack-plugin -D

•  html-webpack-plugin 指定编译的文件HTML模板

npm install html-webpack-plugin -D

•  webpack.config.js引入

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

• 插件使用 

  plugins: [
    // 插件
    new CleanWepackPlugin({
      // 清空指定文件
      cleanOnceBeforeBuildPatterns: ['./dist']
    }),
    new HtmlWebpackPlugin({
      template: './src/tamplate/index.html'
    })
  ]

安装tslint

• 初始化

tslint --init

•  tslint.json

{
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {
        "quotemark":[false],
        "no-console":[false]
    },
    "rulesDirectory": []
}

vscode setting

• 保存后，自动修复一部分规范

"tslint.autoFixOnSave": true,