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

首先，新建一个文件夹，然后在该文件夹下使用命令npm init 初始化一个node项目。

然后安装所需依赖，

 npm i react react-dom mobx @types/react @types/react-dom 　--save

 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+webpack+typescript的应用的更多相关文章

  1. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

  2. 从零构建一个简单的 Python Web框架

    为什么你想要自己构建一个 web 框架呢?我想,原因有以下几点: 你有一个新奇的想法,觉得将会取代其他的框架 你想要获得一些名气 你遇到的问题很独特,以至于现有的框架不太合适 你对 web 框架是如何 ...

  3. 如何使用npm构建一个react demo项目

    方法一: 1) 安装node.js环境  点我进入nodejs官网 1.1) 下载LTS(Long term support)版本,安装 1.2) 在cmd中使用以下命令查看node是否安装成功 no ...

  4. 从零实现一个React:Luster(一):JSX解析器

    前言 这是之前在掘金发的两条沸点,懒得写了,直接复制过来作为前言了.然后这个项目可能之后还会继续写,增加一些路由或者模板引擎的指令什么的,但是再过没多久寒假就有大块时间了就可能不摸这个鱼去开其它坑了, ...

  5. react，react-router，redux+react-redux 构建一个React Demo

    创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...

  6. 从零配置webpack(react+less+typescript+mobx)

    本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...

  7. typescript+webpack构建一个js库

    依赖说明 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 ...

  8. 使用parcel打造一个零配置的react工作流

    parcel是一个前端打包工具.因其推崇的零配置理念,和webpack形成了鲜明对比.对于我这样一个被后端IDE智能提示宠坏的猿,自然是对webpack提不起爱.平时也都是使用CLI默认配置好webp ...

  9. 真刀实战地搭建React+Webpack+Express搭建一个简易聊天室

    一.前面bb两句 因为自惭(自残)webpack配置还不够熟悉,想折腾着做一个小实例熟悉.想着七夕快到了,做一个聊天室自己和自己聊天吧哈哈.好了,可以停止bb了,说一下干货. 二. 这个项目能学到啥? ...

随机推荐

  1. jfinal框架新手使用之路及开发心得

    从接触jfinal这个框架到现在差不多也有一个的时间了,因为之前接触的都是像spring ,springMVC,mybatis,struts2,hibernate这种传统,大多数公司都在用的这种框架. ...

  2. MVC MVC+EF快速搭建

    MVC+EF快速搭建 一.准备: vs2017(个人用的) 二.开始MVC+EF之旅吧: 1.创建mvc项目: Web-ASP.NET Web Application(.NET Framework)  ...

  3. VUE 分页组件

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. 机器学习 —— 基础整理（四）特征提取之线性方法：主成分分析PCA、独立成分分析ICA、线性判别分析LDA

    本文简单整理了以下内容: (一)维数灾难 (二)特征提取--线性方法 1. 主成分分析PCA 2. 独立成分分析ICA 3. 线性判别分析LDA (一)维数灾难(Curse of dimensiona ...

  5. css实现鼠标悬浮字体流光背景模糊效果

    原文地址:→看过来 写在前面 有的时候感觉写点小玩意儿挺开心的,还能实践很多的小知识点,所以这次学着写了个有趣的鼠标悬浮模糊效果,只使用了css额. 效果图 源码地址→传送门 预览地址→传送门 小知识 ...

  6. Android Binder机制详解：手写IPC通信

    想要掌握一样东西,最好的方式就是阅读理解它的源码.想要掌握Android Binder,最好的方式就是写一个AIDL文件,然后查看其生成的代码.本文的思路也是来自于此. 简介 Binder是Andro ...

  7. c3p0数据库连接池+mysql数据库基本使用方法

           一般我们在项目中操作数据库时,都是每次需要操作数据库就建立一个连接,操作完成后释放连接.因为jdbc没有保持连接的能力,一旦超过一定时间没有使用(大约几百毫秒), 连接就会被自动释放掉. ...

  8. LoadRunner性能测试-loadrunner事务

    事务(Transaction): 简单来说就是用来模拟用户的一个相对完整的业务过程.添加事务,是用来衡量响应时间的重要方法.我们可以通过事务计时来对不同压力负载下的性能指标进行对比. 插入事务的方法: ...

  9. C# 将数据表导出到Excel通用方法

    DataGrid dg = new DataGrid(); dg.DataSource = dt; dg.DataBind(); Response.Clear(); Response.Buffer = ...

  10. Scala关于软件的安装（《Programming in Scala》这本书）

    这篇文章主要介绍怎么在终端来写Scala语言.在Scala创始人出的Coursera课程中是让我们在IDE中sbt写Scala语言,而在这本书貌似让我们在终端上直接用Scala写.官网有介绍不过不详细 ...