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

·  阅读 5381
基于create-react-app快速搭建react项目

安装Create-React-App

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

npm install -g create-react-app 
//或者
yarn global add 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,
            })
        )
    })
)
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改