前面有講過(guò)一些TS的基礎(chǔ)的東西，但是我們?cè)趯?shí)際的項(xiàng)目中肯定不單單是只用TS的，現(xiàn)在基本上都是 React or Vue + webpack + TS,，所以我們這次實(shí)戰(zhàn)一個(gè)基本的demo。
步驟如下：
- 初始化項(xiàng)目
mkdir demo
cd demo && npm init -y
這樣我們就能發(fā)現(xiàn)創(chuàng)建了一個(gè)文件夾并且package.json都以及創(chuàng)建好了。
2.現(xiàn)在我們來(lái)創(chuàng)建一下項(xiàng)目的基本目錄
mkdir -p src/component
mkdir -p src/page
vim index.tsx
整個(gè)的目錄結(jié)構(gòu)就是：
- 安裝一下必要的包
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
在這里解釋一下安裝這幾個(gè)的目的：
首先安裝webpack，webpack從4版本以后就要求裝webpack-cli了，因?yàn)檫@次用react+webpack+ts構(gòu)建，所以需要裝 ts和react，react-dom，最后@types這個(gè)在我前面的基礎(chǔ)里面也講到這個(gè)是類型文件，必須裝的，不裝的話會(huì)包ts的錯(cuò)誤。最后還有個(gè)ts-loader，因?yàn)閣ebpack本身不支持ts語(yǔ)法的，所以需要通過(guò)loader擴(kuò)展達(dá)到目的。裝完之后package.json里面大致這樣（忽略我安裝的其他的node包，那個(gè)是我后續(xù)要用到的）：
- 編寫demo組件
在component里面建立一個(gè)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')
)
這只是個(gè)簡(jiǎn)單的demo，真正的項(xiàng)目里面建議劃分的路徑為
components（公共組件）
page
單個(gè)頁(yè)面
單個(gè)頁(yè)面私有的組件
index.tsx
- 編寫模版文件
在根目錄下創(chuàng)建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這些開發(fā)js，因?yàn)檫@些東西webpack打包的時(shí)候沒(méi)有必要打進(jìn)去。。怪占體積的。。。
不過(guò)在這里引用之后，相應(yīng)的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測(cè)試',
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，用于實(shí)時(shí)刷新頁(yè)面的，但是并沒(méi)有配熱模塊，懶得配了。通過(guò)這個(gè)配置可以看出來(lái)，最后會(huì)在dist目錄下生成html文件，也就是這個(gè)文件會(huì)實(shí)時(shí)的引入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。
其實(shí) 是為了圖方便用webpack-dev-server。。，用webpack-dev-middleware+express同樣能實(shí)現(xiàn)，而且還能在express里面做代理，
具體的項(xiàng)目可以去我的github上看[github]https://github.com/swallow-liu/Th-demo
