搭建react开发环境

官方文档 https://reactjs.org/docs/add-react-to-a-new-app.html
（如果yarn、npm安装太慢，请使用cnpm安装项目模块）

1.安装nodeJs是必备的
2.全局安装create-react-app模块

npm install -g create-react-app

YW3BM26R)8_QY4}[}@%3]HS.png

查看版本

create-react-app --version
or
create-react-app -V

1.png

3.创建项目

create-react-app my-project

~91V63QYH42RD~UXR{66BCF.png

2.png

)IITXIG%79WU%E}Q{KCV9{9.png

安装完成！

4.进入项目根目录，启动

cd my-project
yarn start

3.png

B7TG5RY@%O5T1GHKN3EBECT.png

5.项目目录

4.png

6.修改端口号，在package.json--->scripts--->start

6.png

7.配置css与处理器（less， sass，stylus），首先得安装相关的依赖，我个人喜欢使用 stylus，这里介绍stylus配置
安装stylus和stylus-loader

npm install stylus stylus-loader --save-dev

8.执行eject把配置文件下载下来

yarn eject

FZ1W%FIHTVH5U}6KYZRSHB1.png

输入命令之后，她问你是否确定要执行eject，晕，我不执行我输入命令干嘛！键入y
这时的package.json多了一大堆东西

8.png

9.现在正式配置stylus
开发依赖：config--->webpack.config.dev.js---->oneOf

{
         test: /\.styl$/,
         exclude: /node_modules/,
         loaders: ['style-loader', 'css-loader', 'stylus-loader']
}

7I[9QZA~AU]6G9MARBX(YAS.png

生产依赖：config--->webpack.config.prod.js---->oneOf

{
         test: /\.styl$/,
         exclude: /node_modules/,
         loaders: ['style-loader', 'css-loader', 'stylus-loader']
}

9.png

配置完成就可以使用stylus语法编写css了

10.如果打包不想要生成.map文件，在webpack.config.prod.js下找到devtool，注释该行

OO31LD3%ECNS6M%J`2H9K67.png

11.配置引用路径别名（为了减少组件内众多的../../）
在config--->paths.js下添加

component: path.resolve(__dirname, '../src/component')

%D~%AD64BY6T_NX`[email protected]

然后在webpack.config.dev.js和webpack.config.prod.js找到modules（大概在75行，后者大概在81行），添加paths.component

1.png

2.png

在组件中引入组件的时候，
以前需要

import Home from "./component/Home/Home";

现在只需要

import Home from "Home/Home";

12.本文到此结束，希望能帮到更多的人。