從零構建一個react+webpack+typescript的應用

時間 2019-11-13

標籤構建一個 react+webpack+typescript react webpack typescript 應用欄目 React 简体版

原文原文鏈接

今天要完成在windows下從零開始構建一個react應用的任務css

首先，新建一個文件夾，而後在該文件夾下使用命令npm init 初始化一個node項目。html

而後安裝所需依賴，node

1 npm i react react-dom mobx @types/react @types/react-dom 　--save
2 npm i webpack webpack-dev-server typescript  ts-loader source-map-loader --save-dev

而後在根目錄下新建文件夾src,config，新建文件index.html，tsconfig.jsonreact

在config目錄下新建文件webpack.config.dev.jswebpack

添加tsconfig.json配置文件內容：web

{
    "compilerOptions": {
        "allowJs": true,
        "allowUnreachableCode": true,
        "outDir": "./public/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true
    },
    "include": [
        "./src/**/*"
    ]
}

添加webpack.config.dev.js內容：typescript

const config = {
    entry: './src/index.tsx',
    output: { filename: 'bundle.js', path: '/public', publicPath: '/public' },
    devtool: 'eval',
    resolve: { extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'] },
    module: {
        loaders: [{ test: /\.tsx?$/, loader: 'ts-loader' }]
    },
    devServer: {
        contentBase: "./",//本地服務器所加載的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true,//實時刷新

    }
}


module.exports = config

而後添加index.html內容：npm

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div id="app">

    </div>
</body>
<script src="./public/bundle.js"></script>
</html>

在inedx.html中引入的./public/bundle.js即webpack配置文件中output項最終生成的文件。json

關於webpack的配置，能夠參閱webpack文檔： http://www.css88.com/doc/webpack2/concepts/output/windows

關於tsconfig.json的配置，能夠參閱文檔：http://www.typescriptlang.org/docs/handbook/tsconfig-json.html，或者直接查看它的中文翻譯版：https://www.w3cschool.cn/typescript/typescript-tsconfig-json.html

在進行完以上步驟以後其實整個webpack和typescript的搭建已經完成了。如今，在package.json中的scripts中添加

"start": "webpack-dev-server --config config/webpack.config.dev.js"

而後在命令行內運行 npm start 命令，已經能夠運行，可是仍是會報錯入口文件不存在。

在webpack中，咱們設置了入口文件爲./src/index.tsx，那麼咱們就去該目錄下建立該文件，而後在裏面添加內容：

import * as React from 'react'
import { render } from 'react-dom'
import {observer, Provider,inject } from 'mobx-react'

class Text extends React.Component {
    constructor(props: any) {
        super(props)
    }
    render() {
        return (
            <div>
                123333
            </div>
        )
    }
}

render(<Provider ><Text /></Provider>, document.getElementById('app'))

而後再從新npm start開啓node服務，訪問localhost:8080端口，能夠看到頁面上成功輸出了123333，證實咱們的typescript+webpack+react的搭建已經基本完成。