一個可以WebPack打包的TS學習環境（前端）

一個沒有營養的文章，如果需要一個前端的TS項目方案倒是可以看看

所用到的

• yarn：需要提前配置源，替代 npm 管理依賴；
• nvm：管理nodejs版本；
• typescript、tslint：需要 npm 安裝全局；

搭建過程

初始化

1

$ yarn init

過程結束生成 package.json 項目的基本配置

1
2
3
4
5
6

{
  "name": "ts-basic-env",
  "version": "1.0.0",
  "main": "src/index.js",
  "license": "MIT"
}

組織目錄

• build：打包相關配置，例如 WebPack 配置
• src ：項目目錄
  • api：接口可複用方法
  • assets：靜態文件
    • img
    • font
  • config：配置文件（抽離出來）
  • tools：業務無關的工具函數
  • utils：業務相關的可複用方法
• typings：TS模塊聲明文件

安裝依賴

全局安裝TS

1

$ sudo npm install typescript tslint -g

安裝後可用命令

1

$ tsc

項目目錄初始化TS

1

$ tsc --init

可見目錄中產生 tsconfig.json 文件，ts在1.8版本后json文件中可以有注釋

安裝WebPack 及所需依賴

webpack4 不需要大量的配置了

項目目錄中執行:

1

$ yarn add webpack webpack-cli webpack-dev-server ts-loader cross-env clean-webpack-plugin html-webpack-plugin typescript -D

• webpack
• Webpack-cli
• Webpack-dev-server
• ts-loader：ts加載器
• cross-env：環境變量配置
• clean-webpack-plugin：webpack清理插件
• html-webpack-plugin：html模板插件
• typescript

即可安裝開發環境的 webpack，然後需要用在build文件夾下創建webpack配置文件

webpack.config.js ，因為webpack是node環境下的，是在編譯時運行的，所以需要加載一套配置文件來可以自定義編譯過程。

以下是 webpack的相關配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
//↑引入插件

module.exports = {
    entry: "./src/index.ts",  //webpack編譯入口
    output: {
        filename: "main.js",  //輸出的文件名稱
    },
    resolve: {
        extensions: ['.ts', '.js', '.tsx'] //支持後綴(import / require默認加載)
    },
    module: {
        rules: [{
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        }]
    },
    devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
    devServer: { //webpack開發調試服務器配置
        contentBase: './dist',
        stats: 'errors-only',
        compress: false,
        host: 'localhost',
        port: 9019,
    },
    plugins: [  //設置插件
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist']
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html'
        })
    ]
}

然後 package.json 更新：添加開發啟動和編譯命令

詳見：scripts 部分的 start和build

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  "name": "ts-basic-env",
  "version": "1.0.0",
  "main": "./src/index.js",
  "license": "MIT",
  "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"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^2.0.1",
    "cross-env": "^5.2.0",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.4.4",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  }
}

這裡使用cross-env來配置NODE_ENV，在webpack.config.js告知 devtool 當前環境是生產環節還是開發環境

devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map'

另外配置完之後別忘了在 .src/ 目錄中創建配置文件設置的 entry也就是 index.ts文件

最後嘗試啟動一下，一個初級的ts前端環境就搭建好了~

1
2
3
4
5
6
7
8
9

$ yarn start
yarn run v1.6.0
(node:27524) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
$ cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js
ℹ ｢wds｣: Project is running at http://localhost:9019/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./dist
ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.

Comments: