有時候我們需要創建一個單單使用typescript的項目，如：我們想使用typescript開發一個網頁游戲，如果使用ts文件，每次寫完都要tsc的方式輸出相應的js文件，我們想能不能通過使用webpack的方式自動編譯自動輸出。具體實現方式如下：
- 首先創建一個項目文件，如果沒有安裝typescript： cnpm install -g typescript
- 創建tsconfig.json文件，也可以使用tsc --init 的方式生成，並修改成如下：（這個主要是用來單獨配置ts的輸出的，如果你使用vs的終端選項的Task，可以自動監控這個json文件，從而達到自動輸出js文件的效果，這個配置文件本質來說和webpack的打包沒有關系。
{ "compileOnSave": false, "compilerOptions": { "outDir": "./dist/js",// 打包到的目錄 "sourceMap": true,// 是否生成sourceMap（用於瀏覽器調試） "noImplicitAny": false, "noUnusedLocals": true, "noUnusedParameters": true, "declaration": true,// 是否生成聲明文件 //"declarationDir": "./dist/types/",// 聲明文件打包的位置 "declarationMap": false,// 是否生成聲明文件map文件（便於調試） "moduleResolution": "node", "module": "esnext", "target": "es5",// 轉化成的目標語言 "baseUrl": "./", }, "include": [ // 通過終端的task，會自動監視ts代碼變化輸出結果到dist中 "src/**/*.ts" ],// 要打包的文件 "exclude": [ // 排除那些文件不打包 "node_modules", "*.test.ts" ] } // 使用了tsconfig.json后可以簡單地使用tsc命令就能自動編譯 - 創建文件目錄：（需要創建的是dist/js、src/app.ts、index.html、webpack.dev.config.js)
- 使用命令：cnpm init 自動生成package.json文件
- 執行如下命令，安裝webpack相關的組件：cnpm install webpack webpack-cli typescript ts-loader --save-dev
- 編輯之前創建的webpack.dev.config.js文件：
const path = require('path') module.exports={ entry:'./src/app.ts', output:{ path:path.resolve(__dirname,"dist/js"), filename:'bundle.js' }, module: { rules: [ // 添加解析規則 { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, }, ] }, resolve: { // 需要打包的文件后綴 extensions: [".tsx", ".ts", ".js"] } } -
修改package.json文件（其中涉及到的是webpack需要的包，以及啟動命令）
{ "name": "ts_game_web", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --config ./webpack.dev.config.js --mode development" }, "author": "", "license": "ISC", "devDependencies": { "html-webpack-plugin": "^4.3.0", "ts-loader": "^7.0.5", "typescript": "^3.9.3", "webpack": "^4.43.0", "webpack-cli": "^3.3.11", "webpack-dev-server": "^3.11.0" } } - 此時的app.ts文件如下：
namespace TSE { export class Engine { private _count:number = 0; public constructor() { } public start(): void { this.loop(); } private loop():void { // 告訴瀏覽器下一次渲染之前需要調用的函數，而通常顯示器的刷新頻率是 60Hz， // 即每秒重繪 60次，所以只要在回調函數中繼續調用 requestAnimationFrame(callback) // 執行自己，就能達到約每秒執行 60 次回調函數。 this._count ++ ; document.title = this._count.toString(); requestAnimationFrame(this.loop.bind(this)) } } } window.onload = function() { let e = new TSE.Engine(); e.start(); document.body.innerHTML += "Foo"; } -
index.html文件<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, initial-scale=1'> </head> <body> <script src="./dist/bundle.js"></script> </body> </html> -
如果想在本地有一個服務，每次修改代碼都會觸發一次生成編譯，這時候我們需要有以下操作：- 安裝 webpack-dev-server插件：cnpm install webpack-dev-server html-webpack-plugin --save-dev
- 修改webpack.dev.js：
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports={ entry:'./src/app.ts', output:{ path:path.resolve(__dirname,"dist/js"), filename:'bundle.js' }, module: { rules: [ // 添加解析規則 { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, }, ] }, resolve: { // 需要打包的文件后綴 extensions: [".tsx", ".ts", ".js"] }, plugins:[ new HtmlWebpackPlugin({ template:'index.html' }) ], devServer:{ contentBase:path.join(__dirname,'.'), open:true, port:9000 } } -
package.json文件修改："scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development" },