今天要完成在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. 第三篇：RESTful介绍

    在介绍restful之前先放一张从之前文章评论里看到的图,我觉得它把soap和rest之间的一些区别形容地非常形象. 在第一篇和第二篇中我们也介绍过,soap协议传递的报文要基于xml格式的soap消 ...

  2. Hybris安装和各个Extention简单介绍

    前言:突然想好好梳理一下这几个月所学的内容了,顺便让自己的知识有一个系统的框架. 一.  安装JDK 请安装最新的Oracle JDK 8.0版(从Oracle官网下载). 二.开发工具建议使用 In ...

  3. Linux下Tomcat8.0.44安装使用Apr

    听说Apr可以提高tomcat很多的性能,配置具体如下1.安装apr 1.5.2 [root@ecs-3c46 ]# cd /usr/local/src [root@ecs-3c46 src]# wg ...

  4. nginx响应高并发参数配置

    一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1.  worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu ...

  5. java笔录---反射机制(1)

    引言   为了方便记忆java的反射机制,在这里仔细的总结了一下.主要是怕以后忘记了,这样也方便回忆.因为最近利用空余时间深入的了解spring和Mybatis框架,   像spring中核心模块IO ...

  6. springMVC两种方式实现多文件上传及效率比较

    springMVC实现 多文件上传的方式有两种,一种是我们经常使用的以字节流的方式进行文件上传,另外一种是使用springMVC包装好的解析器进行上传.这两种方式对于实 现多文件上传效率上却有着很大的 ...

  7. python3--网络爬虫--爬取图片

    网上大多爬虫仍旧是python2的urllib2写的,不过,坚持用python3(3.5以上版本可以使用异步I/O) 相信有不少人爬虫第一次爬的是Mm图,网上很多爬虫的视频教程也是爬mm图,看了某人的 ...

  8. Java中容器的两种初始化方式比较

    List,Set,Map的两种初始化赋值方式  List List<Integer> list2 = new ArrayList<Integer>(); for (int i= ...

  9. 浅谈JS中的高级函数

    在JavaScript中,函数的功能十分强大.它们是第一类对象,也可以作为另一个对象的方法,还可以作为参数传入另一个函数,不仅如此,还能被一个函数返回!可以说,在JS中,函数无处不在,无所不能,堪比孙 ...

  10. 数据结构-->栈

    首先,栈是什么? 在代码当中,栈主要是一种实现特殊功能的一种数据结构,而不是像数组.集合之类的数据存储工具.它最大的特点就是后进先出. 那么后进先出是什么? 假设有一个数组,我们向里面添加一个数据,再 ...