全局安装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`
Webpack & Typescript
Webpack & Typescript
- 根目录新建
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
Signup for the latest tutorials
- 修改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
再见！