前面有講過一些TS的基礎的東西，但是我們在實際的項目中肯定不單單是只用TS的，現(xiàn)在基本上都是 React or Vue + webpack + TS,，所以我們這次實戰(zhàn)一個基本的demo。
步驟如下：
- 初始化項目
mkdir demo
cd demo && npm init -y
這樣我們就能發(fā)現(xiàn)創(chuàng)建了一個文件夾并且package.json都以及創(chuàng)建好了。
2.現(xiàn)在我們來創(chuàng)建一下項目的基本目錄
mkdir -p src/component
mkdir -p src/page
vim index.tsx
整個的目錄結(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
在這里解釋一下安裝這幾個的目的：
首先安裝webpack，webpack從4版本以后就要求裝webpack-cli了，因為這次用react+webpack+ts構(gòu)建，所以需要裝 ts和react，react-dom，最后@types這個在我前面的基礎里面也講到這個是類型文件，必須裝的，不裝的話會包ts的錯誤。最后還有個ts-loader，因為webpack本身不支持ts語法的，所以需要通過loader擴展達到目的。裝完之后package.json里面大致這樣（忽略我安裝的其他的node包，那個是我后續(xù)要用到的）：
- 編寫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
- 編寫模版文件
在根目錄下創(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，因為這些東西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同樣能實現(xiàn)，而且還能在express里面做代理，
具體的項目可以去我的github上看[github]https://github.com/swallow-liu/Th-demo
