HTML5遊戲開發(三)：使用webpack構建TypeScript應用

weixin_34377065發表於2018-10-16
HTML遊戲開發WebTypeScript

《HTML5遊戲開發》系列文章的目的有：一、以最小的成本去入門egret小專案開發，官方的教程一直都是面向中重型；二、egret可以非常輕量；三、egret相比PIXI.js和spritejs文件更成熟、友好；四、學習從0打造高效的開發工作流。

本節我們將會：

  • 使用webpack來構建基於TypeScript的應用。
  • 實現基於webpack的實時重新載入(live reloading)，以提升我們的效率。
  • 改造專案的結構，以適應邏輯更復雜的應用。

專案示例原始碼: github.com/wildfirecod…

線上演示地址：wildfirecode.com/egret-webpa…

改造專案結構和TypeScript配置

在根目錄建立src資料夾來存放使用者程式碼以及defs資料夾來存放TypeScript宣告檔案。

mkdir src && mkdir defs
複製程式碼

之後把main.ts檔案移入src，把defs.d.ts移入defs。

由於我們修改了專案結構，我們需要更改TypeScript配置。在tsconfig.json中新增與compilerOptions同級的屬性include。我們的配置檔案內容將會變成這樣：

{
    "compilerOptions": {
        "module": "es6",
        "target": "es5"
    },
    "include": [
        "src",
        "defs"
    ]
}
複製程式碼

現在除了src&defs，其他的程式碼都不會被編譯器編譯進去。

引入webpack並實現實時重新載入(live reloading)

讓我們來使用webpack來構建TypeScript專案。 我們先安裝webpack以及TypeScript相關依賴。

npm install --save-dev webpack  webpack-cli webpack-dev-server typescript ts-loader
複製程式碼

接著，新增webpack配置檔案webpack.config.js。

const path = require('path');
module.exports = {
    entry: './src/main.ts',
    devtool: 'eval',
    devServer: {
        contentBase: '.'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '.')
    }
};
複製程式碼

其中特別需要說明的是，我們增加了sourcemap支援，以便進行程式碼debug。

然後，讓我們把index.html的使用者程式碼入口檔案main.js修改一下:

<script src="bundle.js"></script>
複製程式碼

測試webpack

在package.json中新增script指令碼start：

{
    "scripts": {
        "start": "webpack-dev-server --open"
    }
}
複製程式碼

現在，我們可以在命令列中執行 ：

npm start
複製程式碼

之後就會看到瀏覽器自動載入頁面。如果現在修改和儲存任意原始檔，web伺服器就會自動重新載入編譯後的程式碼。試一下，執行結果和之前一樣！

相關文章