如何搭建React全家桶環境

npm i -S @types/react @types/react-dom
npm i -D typescript awesome-typescript-loader source-map-loader

{
 "compilerOptions": {
 "outDir": "./dist/",
 "sourceMap": true,
 "noImplicitAny": true,
 "module": "commonjs",
 "target": "es5",
 "jsx": "react"
 },
 "include": [
 "./src/**/*"
 ]
}

// 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
 },
};

npm i -D less less-loader
npm i -D typings-for-css-modules-loader

//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
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 .less
 resolve: {
 extensions: ['.ts', '.tsx', '.js', '.jsx', '.less', '.css']
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: ['style-loader', 'css-loader']
 },
 //import less modules，name：demodemo_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
 },
};

npm i -S react-router-dom

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} >
 <p 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>
 </p>
 </Router>,
 document.getElementById('root')
);

npm i -S babel-preset-stage-2

{
 "presets": ["es2015", "react", "stage-2"],
}

npm i -S mobx mobx-react

"compilerOptions": {
 "target":"es2017", //fix mobx.d.ts error
 "experimentalDecorators": true,
 "allowJs": true
}

npm i -D babel-plugin-transform-decorators-legacy

{
 "presets": ["es2015", "react", "stage-2"],
 "plugins": ["transform-decorators-legacy"]
}