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技术站