前面有讲过一些TS的基础的东西，但是我们在实际的项目中肯定不单单是只用TS的，现在基本上都是 React or Vue + webpack + TS,，所以我们这次实战一个基本的demo。
步骤如下：
- 初始化项目
mkdir demo
cd demo && npm init -y
这样我们就能发现创建了一个文件夹并且package.json都以及创建好了。
2.现在我们来创建一下项目的基本目录
mkdir -p src/component
mkdir -p src/page
vim index.tsx
整个的目录结构就是：
image.png
- 安装一下必要的包
npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom
npm install --save-dev webpack webpack-cli
npm install --save typescript ts-loader
在这里解释一下安装这几个的目的：
首先安装webpack，webpack从4版本以后就要求装webpack-cli了，因为这次用react+webpack+ts构建，所以需要装 ts和react，react-dom，最后@types这个在我前面的基础里面也讲到这个是类型文件，必须装的，不装的话会包ts的错误。最后还有个ts-loader，因为webpack本身不支持ts语法的，所以需要通过loader扩展达到目的。装完之后package.json里面大致这样（忽略我安装的其他的node包，那个是我后续要用到的）：
image.png
- 编写demo组件
在component里面建立一个hello.tsx文件
代码如下：
import * as React from "react";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Helloee呃呃呃呃呃嗯e from {props.compiler} and {props.framework}!</h1>;
在src目录下的index.tsx编写代码：
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Hello } from './component/hello';
ReactDom.render(
<Hello compiler="ts" framework="compile" />,
document.getElementById('example')
)
这只是个简单的demo，真正的项目里面建议划分的路径为
components（公共组件）
page
单个页面
单个页面私有的组件
index.tsx
- 编写模版文件
在根目录下创建template文件夹
mkdir template
cd template && vim index.html
里面具体的index.html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>噗</title>
</head>
<body>
<div id="example"></div>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
</body>
</html>
这里很奇怪我为什么要引用react这些开发js，因为这些东西webpack打包的时候没有必要打进去。。怪占体积的。。。
不过在这里引用之后，相应的webpack里面也要配置externals
- 编写webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const html = new HtmlWebpackPlugin({
title: 'ts测试',
template: './template/test.html',
inject: true,
})
module.exports = {
mode: "development",
devtool: "source-map",
entry: "./src/index.tsx",
output: {
filename: "[name].[hash].js",
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader"
}
]
}
]
},
devServer: {
contentBase: './'
},
plugins: [
new CleanWebpackPlugin(),
html
],
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
}
我这里面是还配置了webpack-dev-server，用于实时刷新页面的，但是并没有配热模块，懒得配了。通过这个配置可以看出来，最后会在dist目录下生成html文件，也就是这个文件会实时的引入main.哈希值.js
<script src="./main.dedef48754.js"></script>
- 配置package.json命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --open"
},
我一般是用npm run dev。
其实 是为了图方便用webpack-dev-server。。，用webpack-dev-middleware+express同样能实现，而且还能在express里面做代理，
具体的项目可以去我的github上看[github]https://github.com/swallow-liu/Th-demo
网友评论