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

最新推荐文章于 2023-12-24 22:47:34 发布
最新推荐文章于 2023-12-24 22:47:34 发布
阅读量448 收藏
点赞数

今天要完成在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的搭建已经基本完成。

 

aa3214567
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-TypeScriptWebpackKoa搭建自定义的React服务端渲染
08-14
TypeScript Webpack Koa 搭建自定义的 React 服务端渲染
TypeScript+React+webpack简洁框架
weixin_33816821的博客
02-15 263
创建项目目录 TypeScript文件会放在src文件夹里，通过TypeScript编译器编译，然后经webpack处理，最后生成一个bundle.js文件放在dist目录下。 我们自定义的组件将会放在 src/components文件夹下 初始化工程 npm init 安装依赖包 首先，确保全局安装了webpack npm install -g webpack 安装react相关 npm...
react项目_React、TypeScript、Webpack项目搭建（一）
weixin_39667398的博客
12-07 180
使用 React + TypeScript + Webpack 搭建项目对于新手来说是一件比较困难的事情。当然你可以选择官方推荐 create-react-app-typescript 一步搭建方案，但如果你那么做，很可能会丢掉很多细节，遇到问题无从下手。今天我们就一起从0到1开始搭建，后续会逐步完善，达到实际项目配置要求。建议node 版本 V8.0+Github: react-typescri...
TypeScript、React、webpack 一起使用
溪
07-18 400
1.npm 项目初始化项目 npm init 项目中会生成package.json文件，这里可以使用默认值 2.全局安装webpack npm install -g webpack 项目中使用webpack管理前端的js、css、ts进行绑定 3.安装react reactDOM 及其声明文件到项目的package.json文件中 npm install --save react react-do...
前端环境搭建react18+typescript+webpack5
2301_78359537的博客
12-24 1189
到目前为止已经使用webpack5把react18+ts的开发环境配置完成，并且配置比较完善的保留组件状态的热更新，以及常见的优化构建速度和构建结果的配置，完整代码已上传到webpack5-react-ts。还有细节需要优化，比如把容易改变的配置单独写个config.js来配置，输出文件路径封装。这篇文章只是配置，如果想学好webpack，还需要学习webpack的构建原理以及loader和plugin的实现机制。
react-typescript-webpack-material-ui:最小的React + Webpack 4+ Typescript2.9 + material-ui
05-01
React + Webpack 4 + typescipt 2.9 +更少+ material-ui 这是一个简单的项目，具有一些甜美的附加功能，这些功能也可以用于cordova。已安装模块webpack 4.16.0 打字稿2.9 较少的material-ui @ next react-color...
爆肝整理万能SASS框架:react18+webpack5+typescript+ant Design，框架在手，交付无忧！！！
最新发布
03-07
来活了，要求一周时间内快速给xxx业务开发一个sass系统平台，要求有角色权限控制，推荐模块，各种业务内容模块，莫慌，直接上代码！！！ 1.系统框架配置如下： react18框架 webpack5打包 typescript4静态检查 ant...
react-webpack-typescript-template:react + typescript + webpack模板
05-18
react-webpack-typescript-template master分支是使用打字稿来编译tsx。 开发者 npm run dev 生产 将转换为es5并缩小 npm run build
React+TypeScript+webpack4多入口配置详解
10-16
在本文中，我们将深入探讨如何配置一个使用React、TypeScript和webpack 4的多入口项目。这个配置旨在提供良好的开发体验，高效的项目打包，并遵循团队规范。首先，我们需要确保已经安装了必要的工具和依赖。 ## ...
typescript+react+webpack+react-bootstrap搭建
06-29
npm i -S eslint eslint-plugin-react eslint-plugin-typescript typescript-eslint-parser npm i -S csstype npm i -S jquery bootstrap @types/jquery @types/bootstrap npm i -S react-bootstrap react react-...
react+webpack+typescript简单项目搭建
Cryday的小屋
11-01 928
1.创建项目名称，在这里创建文件，my-react; 初始化项目 npm init -y 2.安装依赖：webpack npm i webpack webpack-cli -D 创建webpack.config.js文件： const path = require('path'); module.exports = { entry: "./src/index.tsx", output: { path: path.join(__dirname, '/dist'), f
TypeScript+react+webpack
sytloveyxj的博客
07-14 269
1、层叠上下文z-index 2、居中布局 3、table
从0开始一个React/ES6项目-Webpack初探
xhydwufu的博客
08-15 804
最近想做一个网站，初步选型为react+koa+mangodb，想把自己从头到尾、从无到有的学习和解决问题的过程做个详细的、系统的记录，方便日后回顾。 由于开发和最终网站中可能有需要用到或者借鉴webpack的地方，本文先从介绍如何应用webpack开始一个项目，中间会有穿插自己尝试过程中的一些疑问和想法，最后简单介绍webpack原理。希望对其他人也能有些微薄的帮助。具体网站和功能会在后续系列文
关于react和webpack
qq_43592587的博客
04-01 102
打包之前的index.js： mport React from 'react' //创建组件，虚拟DOM，生命周期 import ReactDOM from 'react-dom' //把创建好的组件和DOM放在页面上 //创建虚拟DOM const myh1 = React.createElement('h1', null, 'hello react!') //将虚拟DOM渲染在页...
上百个前JS文档大全（Vue.js，Webpack，React，TypeScript，jQuery API，Node.js，NPM，Nginx................待完善中，需要哪个请评论）
麦 -_- 的博客
03-30 351
1.Webpack 是前端资源模块化管理和打包工具 https://www.webpackjs.com/ 2.React 用于构建用户界面的 JavaScript 框架 React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。 https://reactjs.bootcss.com/ 3.TypeScript 由微软开源的编程语言。它是 JavaScr...
使用Webpack搭建自己的React项目----1
qq_30483517的博客
04-09 550
使用Webpack搭建自己的React项目--持续更新创建项目基础代码配置webpack运行项目 React 和 Webpack在前端峡谷里可是两位扛耙子的基友了。他们相爱相杀。React官方已经为大伙提供了create-react-app开箱即用。如果是小项目或者是想自己折腾，就需要咱们(提供一块肥皂)提供基于react的webpack配置。废话不多说，下面的教程有眼睛就能学废会。 github...
react+webpack+typescript项目搭建
qq_35423431的博客
08-16 2179
使用react可以直接引入js文件，打开html文件就能看到效果，也可以使用create-react-app去快速的构建react开发环境。在这想自己使用webpack启动react项目，也算是练习下项目搭建。 先介绍一下前面两种使用方式，当然菜鸟教程上也有。 1、引入js文件方式 引入三个库： react：核心库，包含生成虚拟dom的react.createElement函数以及继承的Compo...
react+webpack4+typescript搭建项目
小蚁的博客
05-19 3796
react+webpack4+typescript搭建项目 公司项目打算从vue框架转成react,所以自学了下如何用webpack4搭建react+typescript的项目，虽说有脚本架create-react-app直接搭建，公司大佬也正在自己封装属于自己的脚本架，但是这里我想从0到1的自己搭建学习搭建一下(适合新手学习下): 一：首先安装最新的webpack npm instal...
一次解决React+TypeScript+Webpack 别名（alias）找不到问题的过程
weixin_33698043的博客
08-07 4227
引言 在组件开发中，业务功能和基础组件一般分开放，比如在我们的项目中，components为基础组件， container为业务组件，但是在container中调用components中的组件时，必须通过相对路径如../../components/XXXX才能找到要用的基础组件，这里 ../../在开发时其实时一种浪费。为了解决这个问题，我们引入了web...
如何从零搭建一个react + TS的完整项目
05-31
搭建 React + TypeScript 项目的步骤如下： 1. 创建一个新的项目文件夹 ``` mkdir my-react-ts-app cd my-react-ts-app ``` 2. 初始化项目 ``` npm init -y ``` 3. 安装必要的依赖 ``` npm install --save react react-dom npm install --save-dev typescript @types/react @types/react-dom webpack webpack-cli webpack-dev-server awesome-typescript-loader html-webpack-plugin ``` 4. 创建一个 TypeScript 配置文件 ``` touch tsconfig.json ``` 5. 将以下内容添加到 tsconfig.json 文件中 ``` { "compilerOptions": { "outDir": "./dist/", "module": "es6", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "jsx": "react", "moduleResolution": "node", "esModuleInterop": true }, "include": [ "./src/**/*" ] } ``` 6. 添加一个 index.html 文件到项目根目录 7. 添加以下内容到 index.html 文件中 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My React TypeScript App</title> </head> <body> <div id="root"></div> </body> </html> ``` 8. 创建一个 src 目录 ``` mkdir src ``` 9. 在 src 目录中创建一个 App.tsx 文件 ``` touch src/App.tsx ``` 10. 将以下内容添加到 App.tsx 文件中 ```tsx import React from 'react'; const App = () => { return ( <div> <h1>Hello, World!</h1> </div> ); }; export default App; ``` 11. 在 src 目录中创建一个 index.tsx 文件 ``` touch src/index.tsx ``` 12. 将以下内容添加到 index.tsx 文件中 ```tsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); ``` 13. 在项目根目录中创建一个 webpack.config.js 文件 ``` touch webpack.config.js ``` 14. 将以下内容添加到 webpack.config.js 文件中 ```js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.tsx', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, module: { rules: [ { test: /\.tsx?$/, loader: 'awesome-typescript-loader', }, ], }, plugins: [ new HtmlWebpackPlugin({ template: 'index.html', }), ], devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000, }, }; ``` 15. 运行 npm start 启动项目 ``` npm start ``` 以上就是从零搭建一个 React + TypeScript 的完整项目的步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值