TypeScript-0.TS環境搭建

筆記。補一下搭環境的過程。

1. 安裝node

附上官網http://nodejs.cn/download/

2. npm init

package name: ts
version (默認)
description: source code of ts-learning
entry point: (入口文件) ./src/index.ts
test commend: (過)
git respository: (過)
keywords: typescript
author: dan<000000.163.com>
license: MIT
yes
// 目錄下面多了個package.json文件

也可以 npm init -y 然後對應修改。

3.創建src文件夾

並分類，包含

utils文件夾，整個項目可複用的一些方法
tools文件夾，跟業務無關純工具函數
assets文件夾，靜態資源(圖片，字體文件)
template文件夾，包含index.html
api文件夾，接口請求封裝
config文件夾，配置文件，以後可能會修改的配置抽離出來放在裏面統一管理

與src文件夾同級，創建
typings文件夾，一些ts聲明文件
build文件夾，上線的配置和本地起服務的一些配置

     

4.安裝ts依賴

全局安裝 typescript tslint 
// npm install typescript tslint -g
初始化ts 配置
// tsc --init
生成tsconfig.json文件

5.添加webpack

安裝 webpack webpack-cli webpack-dev-server
// npm install webpack webpack-cli webpack-dev-server -D (開發依賴)
在build文件夾下寫一個webpack.config.js 配置文件如下，需要安裝一些插件
// npm install ts-loader -D
// npm install cross-env -D
// npm install clean-webpack-plugin html-webpack-plugin -D

// webpack.config.js

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

module.exports = {
    entry: "./src/index.ts", // 入口文件，在src目錄下創建
    output: { // 指定項目編譯完的輸出文件
        filename: "main.js"
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader', // 安裝一下ts-loader
            exclude: /node_modules/
        }]
    },
    devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map', // 去package.json裏傳入NODE_ENV
    devServer: {
        contentBase: './dist',
        stats: 'errors-only',
        compress: false,
        host: 'localhost',
        port: 8087
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist']
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html' // 對應創建文件
        })
    ]
}

6.又裝了一遍typescript 之前裝的是全局的
// npm install typescript

7.npm start

雞凍... npm start了，這是第三次寫，一次啓動。
本地開發是支持熱更新的。

8.package.json 中打包配置 build命令

// "build": "cross-env NODE_ENV=production webpack --config ./build/webpack.config.js"
npm run build 打包試一下，生成了一個dist文件，包含index.html、main.js

// package.json
{
  "name": "ts",
  "version": "1.0.0",
  "description": "source code of ts-learnign",
  "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": [
    "ts"
  ],
  "author": "dan",
  "license": "MIT",
  "dependencies": {
    "tslint": "^6.1.2",
    "typescript": "^3.9.5"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.2",
    "html-webpack-plugin": "^4.3.0",
    "ts-loader": "^7.0.5",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}