從零一步一步搭建TypeScript+webpack4開發環境

前言

相信你們都知道TypeScript的好處，TypeScript編譯工具能夠運行在任何服務器和任何系統上，TypeScript增長了代碼的可讀性和可維護性，很值得咱們學習！

下邊我將帶你們一步步實現TypeScript開發環境搭建~

安裝Node.js

相信你們電腦通常都安裝了node.js

若是不肯定是否安裝了的話，能夠在cmd裏面輸入如下命令：

node -v

若是看到了版本號，則說明已經安裝好了~

建立一個文件夾

文件夾名字：xiaoming

mkdir xiaoming

切換到新建文件夾目錄

cd xiaoming

初始化項目

npm init

回答問題

接着出來了這麼一系列的問題，你們能夠直接回車，使用默認值

package name: (xiaoming)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to C:\Users\明\Desktop\xiaoming\package.json:

{
  "name": "xiaoming",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

接着項目就會出現一個package.json的配置文件

出現的package.json配置文件內容

內容以下：

{
  "name": "xiaoming",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

全局安裝typescript

mac電腦須要在npm 前面加sudo,表明以管理員身份運行

npm install webpack webpack-cli typescript ts-loader --save-dev

安裝成功後進入項目根目錄

用tsc命令進行初始化

tsc --init

此時項目根目錄多了一個tsconfig.json文件

此時tsconfig.json代碼以下：

添加webpack

再添加webpack，這裏咱們使用webpack4

npm install webpack-cli webpack dev-server -D

在這裏我提一下webpack4的亮點：

webpack4最大的亮點就是儘量少的須要咱們去配置

咱們知道原來在使用webpack二、3的時候，咱們須要寫大量的wepack配置，不少資源都要添加node,webpack4不少東西是零配置的

這裏安裝完了咱們須要寫一個webpack的配置文件~

寫webpck的配置文件

建立一個build文件夾，裏面建立webpack.config.js文件, 代碼以下：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin }  = require('clean-webpack-plugin')
//使用node的模塊
module.exports = {
    //這就是咱們項目編譯的入口文件
    entry: "./src/index.ts",
    output: {
        filename: "main.js"
    },
    resolve: {
        extensions: ['.ts','tsx','.js']
    },
    //這裏能夠配置一些對指定文件的處理
    //這裏匹配後綴爲ts或者tsx的文件
    //使用exclude來排除一些文件
    module:{
        rules:[
            {
                test:/\.tsx?$/,
                use:'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    //這個參數就能夠在webpack中獲取到了
    devtool: process.env.NODE_ENV === 'production'? false : 'inline-source-map',
    devServer:{
        //這個本地開發環境運行時是基於哪一個文件夾做爲根目錄
        contentBase:'./dist',
        //當你有錯誤的時候在控制檯打出
        stats: 'errors-only',
        //不啓動壓縮
        compress: false,
        host: 'localhost',
        port: 8081
    },
    //這裏就是一些插件
    plugins:[
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist']
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html'
        })
    ]
}

繼續建立文件

• 在src的目錄下，建立./src/index.ts
• 在src的目錄下，建立template文件夾
• 在template文件夾下邊建立index.html

目錄結構以下：

安裝ts-loader

解析ts文件轉換成瀏覽器能夠識別的文件

npm install ts-loader -D

安裝cross-env

用於設置環境變量的,方便設置開發環境和生產環境

npm install cross-env -D

安裝一些插件

clean-webpack-plugin 能清理一些指定的文件夾

html-webpack-plugin 指定一個編譯的模型

npm install clean-webpack-plugin html-webpack-plugin -D

項目中安裝typescript依賴

以前是全局安裝

npm install typescript

在package.json文件寫指定命令

上邊weapack的命令已經寫好了，下邊咱們就在package.json文件中寫指定的命令：

"scripts": {
    "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"
  },

在index.ts寫代碼測試一下

let num: number = 888

document.title = 'ming'

啓動本地服務器執行

安裝完畢後

npm start

運行效果：

打包執行

npm run build

這裏就多了個dist目錄

最後

但願看到文章的同窗都有收穫！

文章要是有不對的地方還望指正！

最後祝你們都愈來愈優秀！

歡迎你們加入，一塊兒學習前端，共同進步！