往期回顾：
从0搭建自己的webpack开发环境（一）
从0搭建自己的webpack开发环境（二）
从0搭建自己的webpack开发环境（三）
经过三期的学习，本篇文章将介绍TS和React/Vue的结合使用，搭载Webpack，助力成长前端高级技术体系。下面继续一起学习：
1.配置TS环境 1.1 使用ts-loader使用typescript需要安装ts相关配置
npm install typescript ts-loader --save-dev
生成ts的配置文件
npx tsc --init
配置ts-loader
{
test:/.tsx?/,
use: ['ts-loader'],
exclude: /node_modules/
}
将入口文件更改成ts文件
let a:string = 'hello';
console.log(a);
执行npm run dev发现已经可以正常的解析ts文件啦！
1.2 使用 preset-typescript不需要借助typescript
npm install @babel/preset-typescript
{
"presets": [
["@babel/preset-env",{
"useBuiltIns":"usage",
"corejs":2
}],
"@babel/preset-react",
["@babel/preset-typescript",{
"allExtensions": true
}]
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties",{"loose":true}],
"@babel/plugin-transform-runtime"
]
}
安装react相关模块
npm i @babel/preset-react --save-dev # 解析jsx语法
npm i react @types/react @types/react-dom react react-dom typescript
import React from 'react';
import ReactDOM from 'react-dom';
const state = {number:0};
type State = Readonly;
class Counter extends React.Component{
state:State = state
handleClick =()=>{
this.setState({number:this.state.number+1})
}
render(){
const {number} = this.state;
return (
{number}
)
}
}
ReactDOM.render( 安装vue所需要的模块
npm install vue-loader vue-template-compiler --save-dev
npm install vue vue-property-decorator
配置ts-loader
{
test: /.tsx?/,
use: {
loader:'ts-loader',
options: {
appendTsSuffixTo: [/.vue$/],
},
},
exclude: /node_modules/
}
使用vue-loader插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin();
配置解析.vue文件
{
test:/.vue$/,
use:'vue-loader'
}
增加vue-shims.d.ts，可以识别.vue文件
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
index.tsx文件
import Vue from 'vue';
import App from './App.vue';
let vm = new Vue({
render:h=>h(App)
}).$mount('#root')
App.vue文件
{{todo}}
设置服务端接口
const express = require('express');
const app = express();
app.get('/api/list', (req, res) => {
res.send(['香蕉', '苹果', '橘子']);
});
app.listen(4000);
安装axios获取数据
npm install axios --save-dev
配置接口请求
{{todo}}
配置服务器代理路由
proxy: {
'/api': {
target: 'http://localhost:4000',
},
}
