本文介绍了React全家桶环境搭建过程详解，分享给大家，具体如下：

环境搭建

1.从零开始搭建webpack+react开发环境

2.引入Typescript

安装依赖

npm i -S @types/react @types/react-domnpm 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.jsconst 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-loadernpm 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.jsconst 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 .less resolve: { 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}/> {} <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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。