全局安装typescript
$ npm install -g typescript
生成tsconfig.json文件
$ tsc
根目录下会生成 tsconfig.json文件
修改tsconfig.json文件
"target": "es6",
"module": "es2015",
初始化项目
$ npm init
根目录下会生成package.json文件
安装依赖包
$ npm install ts-loader webpack webpack-cli typescript -D
根目录下会生成node_modules文件夹
配置项目编译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'), //输出文件的绝对路径
}
}
- 修改
package.json
// 添加脚本
"build": "webpack",
执行命令
$ npm run build
会按照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;
};
- 执行命令
$ npm run serve
之后在开发环境修改相关的ts文件，会达到实时编译的效果。
配置sourceMap
通过浏览器直接访问index.html会发现控制台显示的console.log打出的内容的资源地址是打包后的bundle.js
image.png
那么如何知道该代码的源地址呢？
- 修改
tsconfig.js文件
"sourceMap": true,
- 修改
webpack.config.js文件
devtool: 'eval-source-map',
重新执行打包命令并通过浏览器访问index.html
image.png
再见！
网友评论