create-react-app搭建react项目

我的电脑是Windows10系统，在使用react之前需安装node.js,在node.js中自带npm，另外还需要安装yarn,version:1.5.1

react脚手架create-react-app中文文档地址：
[Create React App]: https://www.css88.com/create-react-app/docs/documentation-intro/

1. 搭建自己的react项目

1. 打开WebStorm，在底部点击进入Terinal，使用cd命令进入自己保存项目的位置。以下所有命令都是在该处（my-app目录下）进行
2. 输入：yarn create-react-app my-app 其中my-app为项目名称
3. 输入：yarn install
4. 输入：yarn start ，启动项目
5. 浏览器地址栏输入：localhost:3000即可打开react项目
6. 要停止项目，按下Ctrl + c ，输入Y即可

2.修改项目默认端口号3000

1. 进入node-modules--react-scripts -- scripts -- start.js修改端口号
2. 如下图，修改3000为你想要设置的端口号
3. ​ 有图

3.自动生成的项目目录以及文件解析

1. node_modules: 项目依赖包目录；
2. public: 公共目录，该目录下的文件都不会被webpack进行加载、解析、打包；通过yarn build进行打包时该项目下的所有文件将会直接被复制到build目录下；
   1. favicon.ico: 是网站图标[可替换删除]
   2. index.html: 页面模板，webpack打包后将输出文件引入到该模板内；补充：index.html中通过环境变量%PUBLIC_URL% 来指向public目录路径；
   3. manifest.json: PWA将应用添加至桌面的功能的实现依赖于 manifest.json 。通过manifest.json文件可以对图标、名称等信息进行配置。
3. src: 是源码目录该目录下除了index.js App.test.js registerServiceWorker.js文件具有一定意义其余文件都是演示使用可直接删除
   1. index.js: 是整个项目的入口文件；
   2. App.test.js: 测试单元演示文件，暂时并不知道干嘛用；可以直接删除；
   3. registerServiceWorker.js: service worker是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务；registerServiceWorker就是为react项目注册了一个service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。注意，registerServiceWorker注册的service worker只在生产环境中生效，并且该功能只有在https下才能有效果；
4. gitignore: 该文件是github过滤文件配置
5. README.md: 该文件是github描述文件
6. package.json: 定义了项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。部分依赖模块被隐藏；
7. yarn.lock：每次通过yarm添加依赖或者更新包版本时 yarn都会把相关版本信息写入yarn.lock文件；npm也有类似功能，npm 也可以生成一个锁文件，就是使用上没有yarn方便

4.扩展webpack配置

使用 react-app-rewired 对 webpack 进行自定义配置

1. 安装依赖包 react-app-rewired：yarn add react-app-rewired --save-dev

2. 修改 package.json 中的脚本命令：修改如下

     "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test --env=jsdom",
       "eject": "react-app-rewired eject"
     }
   

3. 在项目根目录下(和package.json同级)新建配置文件 config-overrides.js，并添加如下内容

   module.exports = function override(config, env) {
       // 在这里添加配置
       return config;
   }
   

4. 安装依赖包react-app-rewire-less，通过该依赖包来实现对less的支持

   yarn add react-app-rewired@1.5.0

5. 修改 config-overrides.js 配置文件，为 webpack配置 less

   const rewireLess = require('react-app-rewire-less');
   module.exports = function override(config, env) {
     // 只需要一条配置信息即可实现对less的支持
     config = rewireLess(config, env);
     // 下面注释用于配置loader的参数
     // config = rewireLess.withLoaderOptions(someLoaderOptions)(config, env);
     return config;
   }
   

在 create-react-app 中使用Antd

1. 通过babel-plugin-import + react-app-rewired实现按需加载（官网推荐）

   1. react-app-rewired：的使用上文有过描述；主要用于在不暴露配置的情况下对webpack的配置进行扩展；
   2. babel-plugin-import 是一个用于按需加载组件代码和样式的babel插件
   • 安装依赖包：babel-plugin-import

    yarn add babel-plugin-import --save-dev
   

   • 通过 react-app-rewired 对webpack 配置进行扩展添加新的babel插件，config-overrides.js 修改 ( 添加 ) 如下内容：

   // 引入 react-app-rewired 添加 babel 插件的函数
   const { injectBabelPlugin } = require('react-app-rewired');
   module.exports = function override(config, env) {
       config = injectBabelPlugin(['import', 
           { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
       return config;
   };
   

   • 配置完后可直接导入antd的组件，不再需要另外引入css样式；

   import { Button } from 'antd';
   

2. 通过 react-app-rewired 扩展 webpack 来实现 antd 自定义主题
   主要通过利用了 less-loader的 modifyVars参数来进行主题配置

   • 安装配置：react-app-rewired(上文已经详细介绍过这里就不再细说)
   • 安装依赖包react-app-rewire-less：实现对 less 的支持同时添加 modifyVars 加载参数设置

yarn add react-app-rewire-less --save-dev

• 修改 config-overrides.js 配置文件

const rewireLess = require('react-app-rewire-less');
const { injectBabelPlugin } = require('react-app-rewired');
module.exports = function override(config, env) {
    // 扩展 webpack ==> 支持less
    config = rewireLess(config, env);
    // 配置loader参数
    config = rewireLess.withLoaderOptions({
        // 修改默认颜色 实现自定义主题
        modifyVars: { "@primary-color": "#1DA57A" },
   })(config, env);
   // antd 按需加载配置
    config = injectBabelPlugin(['import', 
        { libraryName: 'antd', libraryDirectory: 'es', style: true }], config);
    return config;
}

版本兼容问题：因为版本问题导致的启动错误，这里提供一套正常兼容的基本版本。安装的时候带上版本号即可

yarn add package-name@1.2.3

package.json

{
  "name": "icarus-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-plugin-import": "^1.4.0",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "react": "^16.7.0",
    "react-app-rewire-less": "^2.1.0",
    "react-app-rewired": "1.5.0",
    "react-dom": "^16.7.0",
    "react-scripts": "1.0.12"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

参考：https://segmentfault.com/a/1190000015301231