发布于 5年前
使用Webpack、TypeScript 和React搭建应用
这里简单介绍基于webpack + typescript + react搭建一个应用。
初始化项目
创建一个空文件夹demo，使用npm在空文件夹初始化项目。
npm init
npm install --save-dev webpack
npm install --save-dev typescript
npm install --save-dev awesome-typescript-loader
这里添加了webpack，typescript和awesome-typescript-loader作为开发依赖。
配置tsconfig.json
在项目下添加文件tsconfig.json，设置compiler options
"compilerOptions": {
"noImplicitAny": true,
"target": "es5"
}
}
其他tsconfig.json的compiler options参考：https://www.typescriptlang.org/docs/handbook/compiler-options.html
这里指定了typescript转译后输出的是es5，默认为es3。
配置webpack.config.js
在项目下添加文件webpack.config.js，内容如下：
const path = require('path');
module.exports = {
entry: "./src/index.ts",
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.ts$/,
loader: "awesome-typescript-loader"
},
]
},
};
这里指定了ts后缀的文件loader为awesome-typescript-loader。
html文件
创建目录public存放静态文件，在public下新建index.html，内容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>webpack TypeScript Patterns</title>
</head>
<body>
<script src="main.bundle.js"></script>
</body>
</html>
Typescript脚本
在项目下创建src文件夹，存放typescript脚本。在src下新建文件index.ts，内容如下：
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = `${firstName} ${middleInitial} ${lastName}`;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return `Hello, ${person.firstName} ${person.lastName}`;
}
const user = new Student('Jane', 'M.', 'User');
document.body.innerHTML = greeter(user);
示例来源于：TypeScript in 5 minutes
构建项目
在项目下执行：
./node_modules/.bin/webpack
拷贝public/index.html到dist
cp public/index.html dist
在dist用浏览器打开index.html。至此完成了一个简单的demo。
</body></html>
