從0搭建自己的webpack開發環境（四）

往期回顧：
從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"
    ]
}

2.配置ts+react環境

安裝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<typeof state>;
class Counter extends React.Component<object,State>{
    state:State = state
    handleClick =()=>{
        this.setState({number:this.state.number+1})
    }
    render(){
        const {number} = this.state;
        return (
            <div>
                <button onClick={this.handleClick}>點擊</button>
                {number}
            </div>
        )
    }
}
ReactDOM.render(<Counter></Counter>,document.getElementById('root'));

3.配置ts+vue環境

安裝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文件

<template>
    <div>
        <div v-for="(todo,index) in todos" :key="index">{{todo}}</div>
    </div>
</template>
<script lang="ts">
import {Component,Vue} from 'vue-property-decorator';
@Component
export default class Todo extends Vue{
    public todos = ['香蕉','蘋果','橘子']
}
</script>

4.配置代理

設置服務端接口

const express = require('express');
const app = express();
app.get('/api/list', (req, res) => {
  res.send(['香蕉', '蘋果', '橘子']);
});
app.listen(4000);

安裝axios獲取數據

npm install axios --save-dev

配置接口請求

<template>
    <div>
        <div v-for="(todo,index) in todos" :key="index">
            {{todo}}
        </div>
    </div>
</template>

<script lang="ts">
import axios from 'axios';
import {Component ,Vue} from 'vue-property-decorator';
@Component
export default class Todo extends Vue{
    public todos:string[] =[];
    async mounted(){
        let { data } =  await axios.get('/api/list');
        this.todos = data
    }
}
</script>

配置服務器代理路由

proxy: {
    '/api': {
    target: 'http://localhost:4000',
    },
}

---

有什麼你想知道的前端知識，歡迎添加微信留言：webyouxuan