今天要完成在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. 有关Android插件化思考

    最近几年移动开发业界兴起了「 插件化技术 」的旋风,各个大厂都推出了自己的插件化框架,各种开源框架都评价自身功能优越性,令人目不暇接.随着公司业务快速发展,项目增多,开发资源却有限,如何能在有限资源内 ...

  2. shell基本语法

    一.变量 1.变量的命名规则:以字母或下划线开头,后面跟数字,字母或下划线,最好不要随便命名,要做到看见变量名能猜出其含义 2.变量赋值: x=100 echo $x 删除变量:unset x 3.定 ...

  3. DL4NLP——词表示模型（二）基于神经网络的模型：NPLM；word2vec（CBOW/Skip-gram）

    本文简述了以下内容: 神经概率语言模型NPLM,训练语言模型并同时得到词表示 word2vec:CBOW / Skip-gram,直接以得到词表示为目标的模型 (一)原始CBOW(Continuous ...

  4. 【网络】dns_probe_finished_nxdomain 错误

    解决方案: 谷歌浏览器地址栏输入 chrome://net-internals/#dns 清除 dns 缓存即可

  5. OP查阅网站

    1)http://www.zhdba.com/mysqlops/ 2)

  6. git 安装 和 基本操作

    林纳斯的小故事 感兴趣的同学可以自己百度一下 版本控制常用svn git @@@svn 1 搭建环境 server:visualSVN Serverserver port: https 默认443ht ...

  7. WinFrom通过委托传递事件

    今天一个功能需要动态创建pictruebox然后根据时间来倒叙显示,一开始对于这个需求摸不着头脑,后来在公司的大神帮助下实现了,话不多说具体实现上代码了: 1.动态添加控件并倒叙 首先添加一个用户控件 ...

  8. Eclipse常用快捷键大全

    1.ctrl+shift+r:打开资源 这可能是所有快捷键组合中最省时间的了.这组快捷键可以让你打开你的工作区中任何一个文件,而你只需要按下文件名或mask名中的前几个字母

  9. Python爬虫初学（三）—— 模拟登录知乎

    模拟登录知乎 这几天在研究模拟登录, 以知乎 - 与世界分享你的知识.经验和见解为例.实现过程遇到不少疑问,借鉴了知乎xchaoinfo的代码,万分感激! 知乎登录分为邮箱登录和手机登录两种方式,通过 ...

  10. OC和JS的交互

    1.引入类拓展UIWebView+TS_JavaScriptContext, 这个类拓展是能在JSCotext出现的时候就可以拿到. 因为一般情况下JSCotext在webViewDidFinishL ...