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日

相关文章

  • Javascript Date getUTCFullYear() 方法

    以下是关于JavaScript Date对象的getUTCFullYear()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的getUTCFullYear()方法 JavaScript Date对象的getUTCFullYear()方法返回当前日期的年份,以四位数字形式表示。 下面是使用Date对象的getUTCFullYear()方…

    JavaScript 2023年5月11日
    00
  • jquery表单验证插件formValidator使用方法

    下面就是jquery表单验证插件formValidator的使用方法攻略。 什么是jquery表单验证插件formValidator? jquery表单验证插件formValidator是一款基于jQuery的表单验证插件,可快速实现表单的输入验证功能,让表单验证变得简单易用。 如何使用jquery表单验证插件formValidator? 首先,在页面中引入…

    JavaScript 2023年6月11日
    00
  • JavaScript数组的使用详解

    JavaScript数组的使用详解 JavaScript是一种广泛使用的编程语言,而数组是它最常用的数据类型之一。JavaScript数组可以存储一组有序的数据并进行一系列操作。本文将详细讲解JavaScript数组的使用方法和常见操作。 创建数组 直接量方式创建数组 可以使用直接量方式创建数组,直接在中括号[]中用逗号隔开每个元素。 示例: let arr…

    JavaScript 2023年5月18日
    00
  • Javascript Date toString() 方法

    以下是关于JavaScript Date对象的toString()方法的完整攻略,包括两个示例说明。 JavaScript Date对象的toString()方法 JavaScript的toString()方法返回一个表示日期时间部分的字符串,该字符串格式根据国际标准时间(UTC)而定。该方法不接受任何参数。 下面是使用对象的toString()方法的示例:…

    JavaScript 2023年5月11日
    00
  • JS实现可针对算术表达式求值的计算器功能示例

    JS实现可针对算术表达式求值的计算器功能示例 介绍 本文将介绍如何使用JS实现一个可针对算术表达式求值的计算器功能示例。 实现步骤 用户界面实现 首先,我们需要实现一个用户界面,来接收用户输入的算术表达式。在此示例中,我们使用HTML和CSS来实现一个基本的用户界面,示例代码如下: <!DOCTYPE html> <html> &lt…

    JavaScript 2023年5月28日
    00
  • js获取单选按钮的数据

    获取单选按钮的数据在实际应用中非常常见,以下是 js 获取单选按钮数据的完整攻略: 1. 获取单选按钮的选中状态 要获取单选按钮的数据,首先需要知道单选按钮的选中状态。单选按钮的选中状态可以通过其 checked 属性来获取。checked 属性是一个布尔值,表示单选按钮是否被选中。若该属性为 true,则表示单选按钮被选中。 下面是获取单选按钮的选中状态的…

    JavaScript 2023年6月10日
    00
  • 解析John Resig Simple JavaScript Inheritance代码

    解析 John Resig 在 Simple JavaScript Inheritance 代码的思路可以分为以下几个部分: 简介 这是 John Resig 在 2008 年发布的一个 JavaScript 类继承的库,用来实现类的继承。 源代码及解析 下面我们来逐行分析源代码实现: 首先,定义了一个匿名函数,并将其赋值给 Class 变量。 var Cl…

    JavaScript 2023年6月10日
    00
  • JavaScript 学习笔记(十四) 正则表达式

    JavaScript 学习笔记(十四) 正则表达式 什么是正则表达式 正则表达式是一种可以匹配文本片段的模式,它是由一个或多个字符和元字符组成的。在 JavaScript 中,正则表达式是由 RegExp 对象表示的。 正则表达式语法 元字符 元字符是正则表达式中具有特殊意义的字符,包括以下元字符: . : 匹配除 \n 外的任意字符。 [] : 匹配括号内…

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