react环境搭建（三） - 执候

公告

开始react相关安装了
npm install
react "^17.0.2"
react-dom "^17.0.2"
react-router "5.3.3"

react-router-dom "5.3.3"
redux "4.1.2"
react-redux "7.2.6"

@reduxjs/toolkit
react-router-cache-route "^1.12.11" //用于缓存页面的，相当于vue的keep-alive
--save
首先index.html
添加id为root的dom节点

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

安装antd 按需加载

npm install antd --save-dev

npm install babel-plugin-import --save-dev
在第二篇babel.config.js ->plugins加入以下配置

[
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
      },
    ],

安装基本的loader

npm install

css-loader
style-loader
sass
sass-loader
less
less-loader
--save-dev
目录结构，先简单的配置让页面可以跑起来

先把redux那一套加上去，如果用不到不用，不影响

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import App from './router';

ReactDOM.render(
  <Provider store={store}>
    <ConfigProvider locale={zhCN}>
      <App/>
    </ConfigProvider>
  </Provider>,
  document.getElementById('root')
);

简单的router->index.js配置

import {
    HashRouter as Router,
    Redirect,
    Route,
} from 'react-router-dom';

import Home from "@/views/home/Home";

export default function App() {
    return (
        <Router>
            <Router path=''>
                <Redirect to='home'></Redirect>
            </Router>
            <Route path='/home' component={Home} />
        </Router>
    )
}

简单的store配置

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './counterReducer/index'

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
})

export {
    store
}

你会发现代码报错，然后是loader配置

在webpack.config.js module->rules 下配置

{
                oneOf: [
                    {
                        test: /\.(module\.)?css$/,
                        use: [
                            'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 1,
                                }
                            }
                        ]
                    },
                    {
                        test: /\.(module\.)?scss$/,
                        use: [
                            'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 2,
                                },
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    implementation: require('sass'), // Prefer `dart-sass`
                                },
                            },
                        ],
                    },
                    {
                        test: /\.(module\.)?less$/,
                        use: [
                            'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 2,
                                }
                            },
                            {
                                loader: 'less-loader',
                                options: {
                                    lessOptions: {
                                        javascriptEnabled: true
                                    },
                                }
                            }
                        ],
                    },
                ]
            }

//引入图片
{
                test: /\.(png|jpe?g|gif|webp|bmp|woff2?|eot|ttf|otf)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024 // 默认配置是8kB
                    }
                },
                generator: {
                    filename: './resources/imgs/[name].[hash:8][ext]', // [ext]前面自带"."
                },
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                type: 'asset',
                generator: {
                    filename: './resources/media/[name].[hash:8][ext]',
                },
            },
            // do not base64-inline SVGs.
            // https://github.com/facebookincubator/create-react-app/pull/1180
            {
                test: /\.(svg)(\?.*)?$/,
                type: 'asset/resource',
                generator: {
                    filename: './resources/media/[name].[hash:8][ext]',
                },
            },

sass和less都配置一下，现在启动基本正常了

posted on 2022-02-24 17:41 执候阅读(42) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部