TypeScript + Webpack 環境搭建

TypeScript + Webpack 環境搭建步驟

1. 安裝Node.js
2. 安裝npm
3. 創建一個npm項目
4. 安裝typescript，配置ts
5. 安裝webpack，配置webpack

初始化一個npm項目

npm init

將在項目根目錄下創建package.json文件。文件目錄結構如下

ts3-demo
|- src
  |- index.ts
|- package.json

全局安裝typescript命令：

npm install -g typescript

可以使用以下命令來查看你的機器中是否安裝了Node.js\ npm \ typescript，以及安裝的版本。

node -v
npm -v
tsc -v

typescript compiler

typescript的編譯器叫做 tsc。

假設有個src/index.ts 文件，將它編譯成index.js，可以使用命令：

tsc src/index.ts --target es5 
或者
tsc src/index.ts --target es3

啟動觀察模式，當ts文件更改之后，自動進行編譯。

tsc src/index.ts --watch --target es5

// index.ts
export default class Index {
    title = 'Hello';
    name = 'Lori';    
}

編譯后結果

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Index = /** @class */ (function () {
    function Index() {
        this.title = 'Hello';
        this.name = 'Lori';
    }
    return Index;
}());
exports.default = Index;

通常不會在terminal中敲命令來編譯，而是在項目的根路徑下，建一個json配置文件 tsconfig.json，來配置這些編譯選項。

初始化tsconfig.json的命令：

tsc --init

然后在terminal中使用tsc命令，會發現項目中所有ts文件都被編譯成了js文件。

tsc

配置tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

安裝Webpack

npm install webpack webpack-cli --save-dev

安裝ts-loader

npm install ts-loader --save-dev

安裝Webpack插件 html-webpack-plugin

用於自動生成index.html文件。

npm install html-webpack-plugin --save-dev

配置webpack.config.ts

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    devtool: "inline-source-map", 
    entry: "./src/index.ts",
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'index'
        })
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },

    devServer: {
        contentBase: path.join(__dirname, 'dist'), 
        compress: true, 
        historyApiFallback: true, 
        hot: true,
    }
}

想要在debug時生成相應的map文件，注意兩點：

1. tsconfig.json 中 sourceMap 設置為 true
2. webpack.config.ts中 devtool: "inline-source-map"

配置package.json 添加命令

"scripts": {
    "start": "./node_modules/.bin/webpack-dev-server",
    "build": "./node_modules/.bin/webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

運行npm run build 進行編譯。

文件目錄結構如下

ts3-demo
|-dist
  |- index.html
  |- main.bundle.js
|- src
  |- index.ts
|- package.json
|- tsconfig.json
|- webpack.config.js

運行npm start 啟動本地服務器。