typescript 基本环境 搭建

Posted 2021-02-13

typescript 基本环境 搭建

工具

vs code

步骤

扩展-- 主题

One Dark Pro

npm  init
package.json
{
  "name": "client-side",
  "version": "1.0.0",
  "description": "source code of ts-learning",
  "main": "./src/index.ts",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "typescript",
    "source_code",
    "hequan"
  ],
  "author": "hequan <[email protected]>",
  "license": "MIT"
}

目录

build
    webpack.config.js
package.json
src
    api  
    assets
            font
            img
    config  
    tools  
    utils
typings

安装

npm install -g typescript  tslint  ts-loader   cross-env 
tsc --init

npm install  webpack  webpack-cli webpack-dev-server  clean-webpack-plugin    html-webpack-plugin  -D
npm install  typescript  -S

package.json

{
  "name": "client-side",
  "version": "1.0.0",
  "description": "source code of ts-learning",
  "main": "./src/index.ts",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js",
    "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
  },
  "keywords": [
    "typescript"
  ],
  "author": "hequan<[email protected]>",
  "license": "MIT",
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.0",
    "cross-env": "^5.2.0",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^5.3.3",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "typescript": "^3.3.3333"
  }
}

webpack.config.js

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

module.exports = {
    entry: "./src/index.ts",
    output: {
        filename: "main.js"
    },
    resolve: {
        extensions: [‘.ts‘, ‘.tsx‘, ‘.js‘]
    },
    module: {
        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: 8089
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [‘./dist‘]
        }),
        new HtmlWebpackPlugin({
            template: ‘./src/template/index.html‘
        })
    ]
}