React全家桶环境搭建过程
环境搭建
1.从零开始搭建webpack+react开发环境
2.引入Typescript
- 安装依赖
npm i -S @types/react @types/react-dom
npm i -D typescript awesome-typescript-loader source-map-loader
- 新建tsconfig.json
{"compilerOptions": {"outDir": "./dist/","sourceMap": true,"noImplicitAny": true,"module": "commonjs","target": "es5","jsx": "react"},"include": ["./src/**/*"]
}
- 修改webpack.config.js
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');module.exports = {entry: {index:'./src/index.js',},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},devtool: "source-map",// Add '.ts' and '.tsx' as resolvable extensions.resolve: {extensions: ['.ts', '.tsx', '.js', '.jsx']},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},{test: /\.(png|svg|jpg|gif)$/,use: ['url-loader']},{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['url-loader']},{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader'}},// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.{test: /\.tsx?$/,loader: "awesome-typescript-loader"},]},plugins: [new HtmlWebpackPlugin({title: 'production',template: './index.html'}),new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()],devServer: {contentBase: './dist',hot: true},
};
3.引入less并支持import less modules
- 安装依赖
npm i -D less less-loader
npm i -D typings-for-css-modules-loader
tips: typings-for-css-modules-loader
打包时将样式模块化,我们可以通过import或require引入样式,并且相互不冲突。
//demo.less -> demo.less.d.ts
//.demo{color:red;} -> export const demo: string;
import * as styles from 'demo.less'
<DemoComponent className={styles.demo} />
- 修改webpack.config.js
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');module.exports = {entry: {index:'./src/index.js',},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},devtool: "source-map",//add .lessresolve: {extensions: ['.ts', '.tsx', '.js', '.jsx', '.less', '.css']},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},//import less modules,name:demo__demo___hash{test: /\.less/,use: ['style-loader','typings-for-css-modules-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]&namedExport&camelCase&less!less-loader']},{test: /\.(png|svg|jpg|gif)$/,use: ['url-loader']},{test: /\.(woff|woff2|eot|ttf|otf)$/,use: ['url-loader']},{test: /\.(js|jsx)$/,exclude: /node_modules/,use: {loader: 'babel-loader'}},{test: /\.tsx?$/,loader: "awesome-typescript-loader"},]},plugins: [new HtmlWebpackPlugin({title: 'production',template: './index.html'}),new webpack.NamedModulesPlugin(),new webpack.HotModuleReplacementPlugin()],devServer: {contentBase: './dist',hot: true},
};
4.引入react-routerv4
npm i -S react-router-dom
- 创建history
import { createHashHistory } from 'history';
export default createHashHistory();
- 使用
import React from 'react';
import ReactDom from 'react-dom';
import * as styles from "./index.less";
import history from './helpers/history';
import {Router, Route, Switch, Redirect, Link} from 'react-router-dom';
import Hello from "./router/Hello";
import TodoList from "./router/TodoList";const PrivateRoute = ({ component: Component , ...rest}) => {return (<Route {...rest} render={props => (<Component {...props}/>)}/>);
}ReactDom.render(<Router history={history} ><div className={styles.wrap}><ul><li><Link to="/">Homes</Link></li><li><Link to="/todo">TodoList</Link></li></ul><Switch><Route exact path="/" component={Hello}/>{/*<Route path="/demo" component={Demo}/>*/}<PrivateRoute path="/todo" component={TodoList} /></Switch></div></Router>,document.getElementById('root')
);
...
ES7语法报错
npm i -S babel-preset-stage-2
修改.babelrc
{"presets": ["es2015", "react", "stage-2"],
}
5.引入mobx状态管理
npm i -S mobx mobx-react
- 使用装饰器语法
修改tsconfig.json
"compilerOptions": {"target":"es2017", //fix mobx.d.ts error"experimentalDecorators": true,"allowJs": true
}
npm i -D babel-plugin-transform-decorators-legacy
修改.babelrc
{"presets": ["es2015", "react", "stage-2"],"plugins": ["transform-decorators-legacy"]
}
源码
Github
React全家桶环境搭建过程相关推荐
- React全家桶项目搭建
资源:create-react-app.react.react-dom.redux.react-redux.redux-thunk.react-router-dom.antd-mobile/antd. ...
- 从零搭建React全家桶框架教程
从零搭建React全家桶框架教程 源码地址:https://github.com/brickspert/react-family 欢迎star 提问反馈:blog 原文地址:https://githu ...
- react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
- react全家桶从0到1(react-router4、redux、redux-saga)
本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redux-saga的核心配置会加以讲解, ...
- React 全家桶入门教程 01
React 全家桶入门教程 01 前面是基础课程(难度小,略过),后面是案例 目的 巩固react基础知识,查漏补缺(熟悉的部分快进) 学习相关的库的使用 https://study.163.com/ ...
- 技术胖的2019新版React全家桶免费视频(84集)
技术胖 2019年09月18日 阅读 29883 关注 技术胖的2019新版React全家桶免费视频(84集) 一共84集,从5月4日开始录制,到9月18日完成,5个月时间.如果是一个专业讲师,这进度 ...
- 小邵教你玩转Typescript、ts版React全家桶脚手架
前言:大家好,我叫邵威儒,大家都喜欢喊我小邵,学的金融专业却凭借兴趣爱好入了程序猿的坑,从大学买的第一本vb和自学vb,我就与编程结下不解之缘,随后自学易语言写游戏辅助.交易软件,至今进入了前端领域, ...
- 初学者的React全家桶完整实例
概述 该项目还有些功能在开发过程中,如果您有什么需求,欢迎您与我联系.我希望能够通过这个项目对React初学者,或者Babel/webpack初学者都有一定的帮助.我在此再强调一下,在我写的这些文章末 ...
- 使用react全家桶制作博客后台管理系统
前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...
最新文章
- [Windows编程] 如何捕捉程序异常/crash 并生成 dump 文件
- python编程实例视屏-python 下载抖音视频示例源码
- java 队列的数组_JAVA-循环数组实现简单的队列
- VTK:可视化之MoveActor
- 当不能用for等循环时,可以考虑递归
- 双重for_测试双重图案
- CVE漏洞—PHPCMS2008 /type.php代码注入高危漏洞预警
- Hanoi Tower 模拟
- [转]MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
- 浅谈C#实现Web代理服务器的几大步骤
- 利用flashback database实现部分对象回滚
- 计算机 运行新ie 命令,怎样修复ie浏览器-运行什么命令可以修复IE浏览器,请说的详细 – 手机爱问...
- Unity粒子特效系列-闪星星的宝箱
- 电工知识:3种方法测电容的好坏,万用表三个档位的巧妙应用
- github 下载慢问题 - 代理 - 汇总
- C语言,利用二维数组及条件语句计算闰年和平年每月所对应的天数
- 互联网平台埋点方案对比 Mixpanel vs Heap vs GrowingIO vs MTA
- 神经网络滤镜是啥功能,神经网络滤镜不能用
- GNSS/INS组合导航(2)-加速度计选型参数解析
- [李宏毅 机器学习笔记] Gradient Descent
热门文章
- php protected 的继承,14 PHP 类的继承 [public protected private] parent 构造方法 析构方法 重写 最终类和方法 设计模式...
- springboot 做表白墙_华农表白墙144期 | 等什么时候,她从我开的花店前经过,我把整个花店送个她可好。...
- Ran out of input
- char-embedding是如何输入到模型的
- 高基数特征的预处理方式
- fmt打印不显示 go_程序猿学Go: 日志系统
- python降序排列说true不存在_Python数据类型串讲(中)
- tcp协议缓冲区溢出_【Socket 网络通信】TCP/IP 简介1
- python中循环遍历字典
- 前缀和与差分的使用(新手快速入门)