基於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,
            })
        )
    })
)
複製代碼