从无到有，使用yarn开发react项目（配置及开发基础篇）（小白向）

Posted 2023-03-09

参考技术A 1.在cmd下输入“npm install create-react-app yarn -g”

2.在指定项目目录下输入 create-react-app your_project_name 

例如“create-react-app react_test” （注意项目名称不能有大写字母）

安装完成之后提示如下图所示

3.切换到刚刚安装时创建的文件夹，输入“yarn start”测试安装是否成功，安装成功则会调成一个页面

4.切换到刚刚安装时创建的文件夹，输入“ yarn add antd --save”安装antdesign

打开package.json可以看到antd已成功安装

此时，我们可以在编辑器中打开项目文件夹（此处是vs code），可以清晰的看到create-react-app的生成目录：

此时，系统已经为我们生成了基础的页面（也就是App.js中的组件所展现出来的）

在目录文件夹下运行“yarn start”命令，基础页面也就是react的logo等，此时的页面长这样：

然后我们就可以在render中引入新的组件渲染我们需要的页面了。例如：

此处我们通过import从antd中按需导入了Button组件，然后在render中渲染，运行“yarn start”指令得到如下页面：

可以看到页面中新增了一个button，至此基础的开发就是这样了，其他需要的组件，需要调整的样式可自行添加。

react中执行yarn eject配置antd-mobile的按需加载

在使用react做项目时如果用antd-mobile，如果使用按需加载，则需要修改它的配置文件
如果我们不操作yarn eject，则直接操作下面的步骤即可：

在 create-react-app 搭建脚手架时
cnpm install -g create-react-app
create-react-app reactDemo
cd  reactDemo
cnpm start

引入 antd-mobile
因为配置文件隐藏了，从而我们需要引入 react-app-rewired 并修改 package.json 里的启动配置

cnpm install react-app-rewired --save-dev
cnpm install babel-plugin-import --save-dev
或者
yarn add react-app-rewired --dev
yarn add babel-plugin-import --dev
/* 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 --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置（必须是根目录下）。

const {injectBabelPlugin} = require(‘react-app-rewired‘);
module.exports = function override(config, env) {
  config = injectBabelPlugin([‘import‘, {libraryName: ‘antd-mobile‘, style: ‘css‘}], config);
  return config;
};

此页面的引入方式更改为（index.js里面引入的总样式需要删掉）
- import Button from ‘antd-mobile/lib/button‘;
+ import { Button } from ‘antd-mobile‘;

如果执行yarn eject，需要配置的操作如下

1.用create-react-app创建完成项目后，执行yarn eject命令后会生成一个config文件,在config文件夹会
显示配置文档
2.添加插件
   yarn add babel-plugin-import --save-dev 
   yarn add antd --save-dev 
3.在congif文件夹下webpack.config.dev.js
  options: {
   +        plugins: [
   +             [‘import‘, [{ libraryName: "antd", style: ‘css‘ }]],
   +          ],
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              cacheDirectory: true,
            },
4.在config文件下webpack.config.prod.js添加
     options: {
     +        plugins: [
     +             [‘import‘, [{ libraryName: "antd", style: ‘css‘ }]],
     +         ],
              compact: true,
            },
5.在页面引入antd
    import { Button } from ‘antd-mobile‘;