react 後臺（一） react + redux + react-route + webpack+ axios + antd + less

create-react-app 項目名稱（項目失敗，ant 的樣式出不來）

項目技術棧

react + redux + react-route + webpack+ axios + less + antd

 

使用create-react-app 建立的項目默認不支持less，如下增長less配置的步驟

暴露配置文件
create-react-app生成的項目文，看不到webpack相關的配置文件，須要先暴露出來，使用以下命令便可：

npm run eject

安裝less-loader 和 less

npm install less-loader less --save-dev

yarn less-loader less//這個執行不行

此時沒有webpack.config.js文件，而後執行npm run eject暴露webpack.config.js文件，在config文件夾裏（此操做不可逆）

運行後若是沒法啓動，執行 npm install

老版修改方式  
修改webpack配置
修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

改動1：

/\.css$/ 改成 /\.(css|less)$/,, 修改後以下：

exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.(css|less)$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
改動2：

test: /\.css$/ 改成 /\.(css|less)$/

 新版修改方式

config文件此目錄 webpack.config.js

1

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

改成

// style files regexes
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

2

  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {

增長代碼

  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      isEnvProduction && {
        loader: MiniCssExtractPlugin.loader,
        options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      ,
 { loader: require.resolve('less-loader'),
        options: cssOptions,
      },

 先驗證less是否能夠

import './app.less';

 

否則刷新不行，就重啓

若是antd引入的組件仍是不展現樣式

在引入的頁面添加

import 'antd/dist/antd.css';

 刷新就能看到樣式了

 若是想實現按需加載antd，須要引入

yarn add babel-plugin-import

修改 package.json，添加下面代碼就能夠去掉 import 'antd/dist/antd.css'; 了

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] ]
  }

 在或者接着添加 customize-cra

yarn add customize-cra

 

建立文件 config-overrides.js

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
);

而後重啓運行

 

yarn add antd

yarn add axios

yarn add react-redux

yarn add react-router

yarn add react-router-dom

yarn add redux-immutable

yarn add react-router-redux

yarn add redux

yarn add redux-actions

yarn add redux-mock-store

yarn add redux-thunk

yarn add immutable

yarn add echarts

yarn add md5

yarn add rc-queue-anim

yarn add rc-tween-one

yarn add prop-types

若是會用的日期要再引入一個模塊，用來格式化日期的

yarn add moment

若是有跨域請求

yarn add  fetch-jsonp

 

import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';

const { Option } = Select;

let timeout;
let currentValue;

function fetch(value, callback) {
  if (timeout) {
    clearTimeout(timeout);
    timeout = null;
  }
  currentValue = value;

  function fake() {
    const str = querystring.encode({
      code: 'utf-8',
      q: value,
    });
//這裏
    jsonp(`https://suggest.taobao.com/sug?${str}`)
      .then(response => response.json())
      .then(d => {
        if (currentValue === value) {
          const { result } = d;
          const data = [];
          result.forEach(r => {
            data.push({
              value: r[0],
              text: r[0],
            });
          });
          callback(data);
        }
      });
  }

  timeout = setTimeout(fake, 300);
}

class SearchInput extends React.Component {
  state = {
    data: [],
    value: undefined,
  };

  handleSearch = value => {
    fetch(value, data => this.setState({ data }));
  };

  handleChange = value => {
    this.setState({ value });
  };

  render() {
    const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
    return (
      <Select
        showSearch
        value={this.state.value}
        placeholder={this.props.placeholder}
        style={this.props.style}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={this.handleSearch}
        onChange={this.handleChange}
        notFoundContent={null}
      >
        {options}
      </Select>
    );
  }
}

ReactDOM.render(<SearchInput placeholder="input search text" style={{ width: 200 }} />, mountNode);