基于create-react-app快速搭建react项目

安装Create-React-App

​ 项目搭建是基于create-react-app脚手架的，之前开发过程当中，也曾本身搭建过一些脚手架，因为水平有限，对于webpack实在玩不熟，最后考虑到效率和普及性，决定仍是使用官方脚手架，再作一些适应性调整。好了，话多说，首先本地安装node以后(能够安装一下yarn)命令行运行

npm install -g create-react-app 
//或者
yarn install -g create-react-app
复制代码

​ 安装若是较慢的话，能够尝试切换为淘宝的镜像源，这样可能会稍微快一点。

npm config set registry https://registry.npm.taobao.org
//
yarn config set registry https://registry.npm.taobao.org
复制代码

建立项目

​ 安装完脚手架以后，就能够建立项目。找一个存放项目的文件夹，进入到命令行，运行命令

create-react-app my-app
复制代码

​ 建立项目的快慢，根据本身网速，一版都不会太慢。建立完成以后，项目目录以下：

├─.git
├─node_modules //项目依赖包。
├─public
│      favicon.ico
│      index.html
│      logo192.png
│      logo512.png
│      manifest.json
│      robots.txt
├─src
│       App.css
│       App.js
│       App.test.js
│       index.css
│       index.js
│       logo.svg
│       serviceWorker.js
│       setupTests.js 
│  .gitignore
│  package.json
│  README.md
│  yarn.lock
复制代码

进入项目目录，启动运行

cd my-app //进入到my-app的目录下
//启动运行
npm start
//或者
yarn start
复制代码

​ 项目启动成功以后，浏览器会自动打开http://localhost:3000端口。

安装antd-design

yarn add antd
//
npm install antd -D
复制代码

安装成功以后，修改App.js

import React from 'react';
import {Button } from 'antd';
import 'antd/dist/antd.css';
function App() {
  return (
    <div style={{textAlign:"center",marginTop:100}}> <Button type="primary">测试</Button> </div>
  );
}

export default App;
复制代码

再次启动运行项目，在浏览器访问http://localhost:3000，看到antd的按钮显示。

配置按需加载

​ 项目打包时，若是不配置按需加载，项目打包时，会将全部安装的依赖打包进来，形成项目体积大，影响加载速度，配置按需加载安装react-app-rewired和babel-plugin-import插件，命令以下。

npm install react-app-rewired babel-plugin-import 
//或者
yarn add react-app-rewired babel-plugin-import  -D
复制代码

​ 安装完成以后，调整package.json文件的项目运行命令scripts

"scripts": {
   	 /*"start": "react-scripts start",*/-
    "start": "react-app-rewired start",
    /*"build": "react-scripts build",*/-
    "build": "react-app-rewired build", 
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
复制代码

​ 作完以后，再次启动项目，咱们会发现项目启动失败，提示找不到config-overrides.js文件，由于配置按需加载须要对create-react-app的一些配置进行覆盖，因此咱们须要本身写一些配置。按照提示在项目的跟目录下建立config-overrides.js

├─.git
├─node_modules //项目依赖包。
├─public
│      favicon.ico
│      index.html
│      logo192.png
│      logo512.png
│      manifest.json
│      robots.txt
├─src
│       App.css
│       App.js
│       App.test.js
│       index.css
│       index.js
│       logo.svg
│       serviceWorker.js
│       setupTests.js 
│  .gitignore
│  package.json
│  config-overrides.js  +
│  README.md
│  yarn.lock
复制代码

​ 覆盖create-react-app的配置，咱们须要借助customize-cra工具，有兴趣的话，能够在github看一下customize-cra的文档，里面有对一些接口的说明。

yarn add customize-cra
//或者
npm install customize-cra -D
复制代码

​ 安装成功以后，修改config-overrides.js文件

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

再次启动项目以后，项目启动成功。可是还有一个问题存在，须要手动引入样式，咱们修改一下APP.js,再也不手动引入样式

import React from 'react';
import {Button } from 'antd';
//import 'antd/dist/antd.css';
function App() {
  return (
    <div style={{textAlign:"center",marginTop:100}}> <Button type="primary">测试</Button> </div>
  );
}

export default App;
复制代码

页面刷新以后，咱们会发现页面按钮的样式丢失。

配置less ，less-loader

​ 为了解决手动引用样式问题，方便全局配置antd不一样的样式，同时也方便咱们对antd的一些样式作一些调整，适应咱们本身的项目（写css覆盖antd样式会不生效，有兴趣能够尝试一下）须要安装less，less-loader，

yarn add less less-loader
//或者
npm install less less-loader -D
复制代码

​ 安装成功以后，再次修改config-overrides.js。

const {
    override,
    fixBabelImports,
    addLessLoader
} = require('customize-cra');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({//less-loader6.x配置
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'//配置主题颜色；antd提供了其它主题颜色，可根据须要进行切换
            },
        },
    })
)
//less-loader5.x配置
// addLessLoader({ //配置主题颜色
// javascriptEnabled: true,
// modifyVars: {
// '@primary-color': '#1890ff',
// '@font-size-base': '15px'
// },
//}),
复制代码

​ 注意最新安装的less-loader都是最新的6.x版本，若是是5.x版本，请按照5.x版本的配置。再次启动项目，咱们会发现按钮样式出现。

到此为止，一个react+antd项目基本上就算搭建完成了。下面咱们能够作一些相应的优化。

替换moment.js

​ antd的底层用了一些moment.js,打包进去的话，会形成项目体积过大。咱们可使用day.js这个更小巧的插件。

yarn add antd-dayjs-webpack-plugin
//或者
npm install antd-dayjs-webpack-plugin -D
复制代码

​ 安装成功以后，再次修改config-overrides.js

const {
    override,
    fixBabelImports,
    addLessLoader,
    addWebpackPlugin
} = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'
            },
        },
    }),
    addWebpackPlugin( //使用day.js替换moment,减少打包时的体积
        new AntdDayjsWebpackPlugin()
    ),
)
复制代码

关闭sourceMap

​ create-react-app在打包以后，在build文件夹下除了js文件，咱们还会看到后缀为.map的文件，这是为了方便开发时在浏览器调试使用的，可是当项目部署上线的时候，这些内容就没有做用了，若是部署上去，会形成源码泄漏的风险。因此在打包时，须要关闭sourceMap模式。再次修改config-overrides.js。

const {
    override,
    fixBabelImports,
    addLessLoader,
    addWebpackPlugin
} = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
if (process.env.NODE_ENV === 'development') {//开发模式开启sourceMap
    process.env.GENERATE_SOURCEMAP = "true";
} else if (process.env.NODE_ENV === 'production') {//打包模式关闭sourceMap
    process.env.GENERATE_SOURCEMAP = "false";
}
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'
            },
        },
    }),
    addWebpackPlugin( //使用day.js替换moment,减少打包时的体积
        new AntdDayjsWebpackPlugin()
    ),
)
复制代码

配置路径（alias）别名

​ 在实际的项目开发中，咱们常常会遇到引用组件或者工具函数出现下面的状况,

import Header from '../../../../components/Header';
复制代码

这样看起来，不方便引用，也不美观，配置路径别名，能够更方便咱们的引用。再次修改config-overrides.js

const {
    override,
    fixBabelImports,
    addLessLoader,
    addWebpackPlugin,
    addWebpackAlias
} = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const path = require("path");
if (process.env.NODE_ENV === 'development') {
    process.env.GENERATE_SOURCEMAP = "true";
} else if (process.env.NODE_ENV === 'production') {
    process.env.GENERATE_SOURCEMAP = "false";
}
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'
            },
        },
    }),
    addWebpackPlugin( //使用day.js替换moment,减少打包时的体积
        new AntdDayjsWebpackPlugin()
    ),
    addWebpackAlias({//配置路径别名
        ["@"]: path.resolve(__dirname, "src")
    }),
)
复制代码

开启Gzip

​ 首屏的加载速度会直接影响到用户的体验，因此为了提升加载速度，咱们都是尽量的压缩项目体积，或者采起动态加载，分包方式，外部引用等方式，优化体验。下面说的是开启Gzip的方式，项目打包生成.gz文件，再配合ngnix部署，提高加载速度。借助插件compression-webpack-plugin，能够完成此项配置。

yarn add compression-webpack-plugin
//或者
npm install compression-webpack-plugin -D
复制代码

​ 安装成功以后，修改config-override.js文件。

const {
    override,
    fixBabelImports,
    addLessLoader,
    addWebpackPlugin,
    addWebpackAlias,
} = require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const path = require("path");
if (process.env.NODE_ENV === 'development') {
    process.env.GENERATE_SOURCEMAP = "true";
} else if (process.env.NODE_ENV === 'production') {
    process.env.GENERATE_SOURCEMAP = "false";
}
module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true,
    }),
    addLessLoader({
        lessOptions: {
            javascriptEnabled: true,
            modifyVars: {
                '@primary-color': '#1DA57A'
            },
        },
    }),
    addWebpackAlias({ //配置路径别名
        ["@"]: path.resolve(__dirname, "src")
    }),
    addWebpackPlugin((config) => {
        config.options.plugins.push(new AntdDayjsWebpackPlugin()); //替换moment包
        config.options.plugins.push( //打包开启gzip的压缩
            new CompressionWebpackPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.js$|\.css$|\.html$/,
                threshold: 10240,
                minRatio: 0.8,
            })
        )
    })
)
复制代码