全局安裝typescript
$ npm install -g typescript
生成tsconfig.json文件
$ tsc
根目錄下會(huì)生成 tsconfig.json文件
修改tsconfig.json文件
"target": "es6",
"module": "es2015",
初始化項(xiàng)目
$ npm init
根目錄下會(huì)生成package.json文件
安裝依賴包
$ npm install ts-loader webpack webpack-cli typescript -D
根目錄下會(huì)生成node_modules文件夾
配置項(xiàng)目編譯ts文件
- 根目錄新建
src/index.ts
// src/index.ts
console.log()
- 根目錄新建
public/index.html
// `public/index.html`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack & Typescript</title>
</head>
<body>
<h1> Webpack & Typescript </h1>
</body>
</html>
- 根目錄新建
webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/index.ts', // webpack編譯的入口文件
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
include: [path.resolve(__dirname, 'src')]
}
]
},
output: {
filename: 'bundle.js', // 編譯之后輸出的文件名
path: path.resolve(__dirname, 'public'), //輸出文件的絕對(duì)路徑
}
}
- 修改
package.json
// 添加腳本
"build": "webpack",
執(zhí)行命令
$ npm run build
會(huì)按照webpack配置在public下生成bundle.js文件
安裝webpack-dev-server
$ npm install webpack-dev-server -D
- 修改
package.json
// 添加腳本
"serve": "webpack-dev-server",
- 修改
webpack.config.js
resolve: {
extensions: ['.ts', '.js'],
},
output: {
publicPath: 'public',
- 修改public/index.html
<h1>Signup for the latest tutorials</h1>
<form>
<label for="name">Your name</label>
<input type="text" id="name" required>
<label for="email">Your email</label>
<input type="email" id="email" required>
<label for="age">Your age</label>
<input type="number" id="age" required>
<button>submit</button>
</form>
<!-- add scripts here -->
<script src="bundle.js"></script>
- 修改src/index.ts
import { formData } from './forms';
const form = document.querySelector('form')!;
form.addEventListener('submit', (e) => {
e.preventDefault();
const data = formData(form);
console.log(data);
});
- 新建src/forms.ts
export const formData = (form: HTMLFormElement) => {
const inputs = form.querySelectorAll('input');
let values: {[prop: string]: string} = {};
inputs.forEach(input => {
values[input.id] = input.value;
});
return values;
};
- 執(zhí)行命令
$ npm run serve
之后在開(kāi)發(fā)環(huán)境修改相關(guān)的ts文件番川，會(huì)達(dá)到實(shí)時(shí)編譯的效果蕴侧。
配置sourceMap
通過(guò)瀏覽器直接訪問(wèn)index.html會(huì)發(fā)現(xiàn)控制臺(tái)顯示的console.log打出的內(nèi)容的資源地址是打包后的bundle.js
image.png
那么如何知道該代碼的源地址呢嗤攻？
- 修改
tsconfig.js文件
"sourceMap": true,
- 修改
webpack.config.js文件
devtool: 'eval-source-map',
重新執(zhí)行打包命令并通過(guò)瀏覽器訪問(wèn)index.html
image.png
再見(jiàn)泳赋！
