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)$/,{
                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',//add .less
    resolve: {
        extensions: ['.ts','.jsx','.less','.css']
    },//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: /\.tsx?$/,};

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","plugins": ["transform-decorators-legacy"]
}

源码

Github