今天要完成在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. .net ElasticSearch-Sql 扩展类

    官方提供的是java sdk,并支持jdbc方式的查询结果输出;但是却没有.net sdk的支持. 开发 ElasticSearch-Sql 第三方开源项目的.net sdk,未来集成入bsf框架.( ...

  2. MongoDB的Windows安装

    一.下载MongoDB安装文件 下载地址:http://pan.baidu.com/s/1nvEuDD3 二.双击下载的文件,根据向导一直到finish.比如安装目录为 d:\mongodb 1.创建 ...

  3. 基于腾讯Centos7云服务器搭建SVN版本控制库

    基于腾讯Centos7云服务器搭建SVN版本控制库 最近在和小伙伴组队参加一个关于人工智能的比赛,无奈不知道怎么处理好每个人的代码托管问题,于是找到了晚上免费svn托管服务器的服务,但是所给的免费空间 ...

  4. WEB安全：文件上传漏洞

    文件上传漏洞过程 用户上传了一个可执行的脚本文件,并通过此脚本文件获得了执行服务器端命令的能力. 一般的情况有: 上传文件WEB脚本语言,服务器的WEB容器解释并执行了用户上传的脚本,导致代码执行: ...

  5. Sql for Oracle基本操作关键字

    Sql for Oracle基本操作关键字 +SQL TOP子句 TOP 子句用于规定要返回的记录的数目 SELECT column_name(s) FROM table_name WHERE ROW ...

  6. 【JAVASCRIPT】React学习-如何构建一个组件

    摘要 react 学习包括几个部分: 文本渲染 JSX 语法 组件化思想 数据流 组件化思想 组件就是 UI + UI 交互逻辑,组件有三个常规map , 分别为state 状态 . props 数据 ...

  7. 带你快速进入.net core的世界

    [申明]:本人.NET Core小白.Linux小白.MySql小白.nginx小白.而今天要说是让你精通Linux ... 的开机与关机.nginx安装与部署.Core的Hello World .. ...

  8. Java中的char究竟能存中文吗？

    今天面试被问到"Java中的char能存中文吗?",我回答有的字能有的字不能,结果被嘲笑了,不过我也忘了字符编码的相关知识所以也没能解释.晚上查了下资料,记录一下. 网上搜索这个问 ...

  9. 【FlashPlayer】-Debug版本-开发人员推荐

    Adobe的Flash-Player的版本分为“普通版本”和“Debug版本”,后者可以协助开发者测试和调试程序. 那么,先给出Debug版本的下载地址:http://www.adobe.com/su ...

  10. CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能

    一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...