从零构建一个react+webpack+typescript的应用

前端之家收集整理的这篇文章主要介绍了从零构建一个react+webpack+typescript的应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天要完成在windows下从零开始构建一个react应用的任务

首先,新建一个文件夹,然后在该文件夹下使用命令npm init 初始化一个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.json

在config目录下新建文件webpack.config.dev.js

添加tsconfig.json配置文件内容

{
    "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内容

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内容

<!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项最终生成文件

关于webpack的配置,可以参阅webpack文档: http://www.css88.com/doc/webpack2/concepts/output/

关于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的搭建已经基本完成。

猜你在找的React相关文章