Быстро создайте проект реагирования на основе приложения create-реагировать

React.js
Быстро создайте проект реагирования на основе приложения create-реагировать

Установите приложение Create-React

​ Конструкция проекта основана на скаффолдинге create-react-app. В предыдущем процессе разработки я сам строил скаффолдинг. Из-за ограниченного уровня я действительно не знаком с webpack. Наконец, учитывая эффективность и популярность, я Решил использовать официальные леса., и сделать некоторые доработки. Ну и говори подробнее, сначала установи нод локально (можно пряжу установить) и запусти командную строку

npm install -g create-react-app 
//或者
yarn global add create-react-app

Если установка идет медленнее, можно попробовать переключиться на зеркальный источник Taobao, что может быть немного маловато.

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 порт.

Монтаж и дизайн

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": {
   	 /*"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-реагировать -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, нам нужно использовать инструмент custom-cra.Если вам интересно, вы можете взглянуть на документацию по настройке-cra на github, которая содержит описания некоторых интерфейсов.

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;

После обновления страницы мы обнаружим, что стили кнопок страницы потеряны.

Настроить меньше, меньше загрузчик

Чтобы решить проблему ручных ссылок стилей, удобно настроить разные стили antd глобально, а также нам удобно внести некоторые коррективы в некоторые стили antd для адаптации к нашим собственным проектам (написание css для переопределения антд стили не вступят в силу, можете попробовать если интересно) Нужно ставить меньше, меньше загрузчика,

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 в основном завершен. Ниже мы можем сделать некоторые соответствующие оптимизации.

заменить момент.js

Нижний слой antd использует момент.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 будет запакован, помимо файла js в папке сборки мы также увидим файл с суффиксом .map, который используется для отладки в браузере во время разработки, но при деплое проекта online В настоящее время это содержимое бесполезно, и в случае его развертывания возникнет риск утечки исходного кода. Так что при упаковке нужно отключить режим 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()
    ),
)

Настройка путей (псевдоним) псевдоним

​ В реальной разработке проекта мы часто сталкиваемся со следующими ситуациями при обращении к компонентам или функциям инструмента:

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: проект упаковывается для создания файла .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,
            })
        )
    })
)
Категории