欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-28 08:09:23
本文介绍了react全家桶环境搭建过程详解,分享给大家,具体如下: 环境搭建 1. 2.引入typescript 安装依赖 npm i -s...

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

环境搭建

1.

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

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