create-react-app项目配置全解析

create-react-app 项目配置全解析

create-react-app 是基于 React 的官方脚手架工具,使用 create-react-app 可以快速构建一个 React 应用,并且默认已经配置了一些开发所需的基础配置,可以省去我们自己手动配置的过程。

安装

使用 create-react-app 前需要先全局安装该工具,使用以下命令进行安装:

npm install -g create-react-app

创建项目

使用 create-react-app 创建一个项目非常简单,只需在命令行中执行以下命令:

create-react-app <项目名>

例如,创建一个名为 my-app 的项目:

create-react-app my-app

项目目录结构

执行上述命令后,create-react-app 会自动创建一个基于 React 的项目,该项目的目录结构如下:

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

其中,public/ 目录存储项目入口文件和其他静态文件,src/ 目录存储项目的源代码。

配置文件

create-react-app 为我们封装了 webpack 配置,如果我们需要修改一些 webpack 的配置项,那么需要使用 eject 命令将配置文件暴露出来,并且此操作是不可逆的,执行后将不能回滚,因此在 eject 前需要确认操作。

使用以下命令执行 eject 操作:

npm run eject

执行上述命令后,create-react-app 会将隐藏的配置文件暴露出来,暴露后会多出一个名为 config 的目录,该目录中存储了 webpack 配置相关的文件。

示例说明

以下为两个配合 create-react-app 使用的示例。

示例一

假设我们现在需要在项目中引入 antd 库,我们可以使用以下命令进行安装:

npm install antd --save

安装完成后,我们需要在项目中引入该库,具体操作如下:

在 index.js 中添加以下代码:

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

然后在 App.js 中使用 antd 的组件:

import React, { Component } from 'react';
import { Button } from 'antd';

class App extends Component {
  render() {
    return (
      <div>
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

示例二

假设我们需要在项目中使用 sass 预处理语言,我们可以使用以下命令进行安装:

npm install node-sass sass-loader --save-dev

安装完成后,在 config/webpack.config.js 添加以下代码:

const sassRegex = /\.scss$/,
      sassModuleRegex = /\.module\.scss$/;

// ...

// 添加 sass 和 scss 文件处理
{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: [
      isEnvDevelopment && 'style-loader',
      isEnvProduction && MiniCssExtractPlugin.loader,
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 2,
        },
      },
      {
        loader: require.resolve('sass-loader'),
        options: {
          implementation: require('node-sass'),
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ].filter(Boolean),
},
{
    test: sassModuleRegex,
    use: [
      isEnvDevelopment && 'style-loader',
      isEnvProduction && MiniCssExtractPlugin.loader,
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 2,
          modules: {
            getLocalIdent: getCSSModuleLocalIdent,
          },
        },
      },
      {
        loader: require.resolve('sass-loader'),
        options: {
          implementation: require('node-sass'),
          sassOptions: {
            modules: true,
          },
        },
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              flexbox: 'no-2009',
            }),
          ],
        },
      },
    ].filter(Boolean),
},

添加完成后,我们可以在项目中使用 scss 文件了,例如在 App.js 中添加以下代码:

@import './App.module.scss';

.App {
  font-family: sans-serif;
  text-align: center;
}

$font-size: 32px;

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: $font-size;
  margin-top: $font-size;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

$primary-color: #1890ff;

.Button {
  background: $primary-color;
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background: lighten($primary-color, 10%);
  }
}

注意:如果修改了以上配置后,需要重新执行 npm start 才能生效。

参考

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:create-react-app项目配置全解析 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 详解从react转职到vue开发的项目准备

    下面我会给出“详解从React转职到Vue开发的项目准备”的完整攻略,并且采用Markdown的标准格式,以方便阅读和理解。 前言 React和Vue是现在比较热门的前端框架,而React和Vue之间的语法又有一定的差异,所以,如果需要从React转职到Vue开发,需要在项目准备的时候做出一些调整。下面,我会介绍如何在项目准备的时候做好转职前的准备工作。 调…

    JavaScript 2023年6月11日
    00
  • JS定时器实现数值从0到10来回变化

    实现数值从0到10来回变化,可以通过JavaScript中的定时器来实现。具体步骤如下: 使用JavaScript的setInterval()方法创建一个定时器。该方法接受两个参数:要执行的代码块和时间间隔,单位是毫秒。 创建一个计数器变量,初始值设为0,每当定时器触发时,将计数器加1,并将该数值显示在页面上。 设定一个条件,当计数器的值为10时,将其减1,…

    JavaScript 2023年6月11日
    00
  • Vue模仿ElementUI的form表单实例代码

    下面是针对“Vue模仿ElementUI的form表单实例代码”的详细攻略。 1. 概述 在实际的开发中,我们经常需要使用到表单组件。在Vue框架中,我们可以借助ElementUI提供的form表单组件快速开发表单。但是,有时候我们想要自己定制化一些表单组件,或者ElementUI提供的表单组件不够满足我们的需求时,就需要自己动手写表单组件了。 本攻略就是从…

    JavaScript 2023年6月10日
    00
  • 理解Javascript_03_javascript全局观

    理解Javascript_03_javascript全局观的完整攻略包括以下几个方面: 1. 全局作用域 JavaScript中的全局作用域是指在当前页面所有函数和变量都能访问的范围。当页面被加载时,全局作用域就已经存在,并且在页面生命周期的整个过程中都存在。在全局作用域中定义的变量和函数都是在全局范围内可见的。 2. 全局变量 在全局作用域中声明的变量是全…

    JavaScript 2023年6月10日
    00
  • CSS3+JavaScript实现炫酷呼吸效果的示例代码

    下面是我对于“CSS3+JavaScript实现炫酷呼吸效果的示例代码”的完整攻略,希望能对你有所帮助。 1.准备工作 在开始之前,我们需要先准备好相关的素材。首先是一个由多张逐渐透明的png图片组成的呼吸动画效果,还需要一个 HTML 文件和一个 CSS 文件。我们还需要在 HTML 文件中引入 jQuery 库和 CSS 文件。 下面是一个示例的 HTM…

    JavaScript 2023年6月11日
    00
  • 前端面试之对安全防御的理解分析

    前言 在前端开发领域中,安全防御一直是非常重要的一个方面。因为web应用程序是非常容易受到攻击的,如果没有恰当的安全措施,可能会导致各种问题,如身份盗窃、数据泄露、远程执行代码等。 在进行前端面试时,关于安全防御的理解和分析,是一个非常常见的问题。因此,在本篇攻略中,我将从多个角度对前端安全防御进行分析和讲解,帮助大家更好地理解前端安全防御的重要性和实现方式…

    JavaScript 2023年6月10日
    00
  • js特殊字符过滤的示例代码

    JS特殊字符过滤是一种常见的前端技术,其目的是为了防止恶意注入脚本,保护网站安全性。下面,我们将介绍几种常见的JS特殊字符过滤代码。 基于字符编码的过滤 字符编码过滤的基本原理是将所有可能的JS特殊字符进行相应的编码,在输出时将编码重新转换为原有字符。常用的字符编码有HTML的&和”,URL的%20等。 以下是一个简单的示例: function ht…

    JavaScript 2023年6月10日
    00
  • VBS.Runauto脚本病毒分析篇

    下面我将详细讲解“VBS.Runauto脚本病毒分析篇”的完整攻略,希望对您有所帮助。 简介 VBS.Runauto是一种常见的脚本病毒,会自动启动并感染系统中的许多文件。本篇攻略将介绍如何对VBS.Runauto进行分析,并提供两个示例说明。 准备工作 在开始分析之前,需要准备以下工具: 文本编辑器,如Notepad++ 反编译工具,如IDA Pro 虚拟…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部