React全家桶环境搭建过程详解

本文介绍了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 .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}/>
        {/*<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

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