Mac上安装create-react-app

编程入门行业动态更新时间:2024-10-26 23:39:43

Mac上安装create-react-app,经常出现安装不上，这里说一下办法：

方法一：

1. sudo npm install -g create-react-app
2. create-react-app my-react
3. cd my_code
4. npm start

方法二：

 1. yarn global add create-react-app
 2. create-react-app my-app
 3. cd my_code
 4. yarn start

安装redux

yarn add i redux  -S               数据状态管理
yarn add i react-redux -S       react和redux做整合
yarn add i redux-thunk  -S     发送异步请求
yarn add i react-router-dom  -S     视图跳转，路由
yarn add i axios  -S               发送请求
yarn add i antd  -S               antdDesign UI库

antd去除多余组件

yarn add i react-app-rewired -D
修改package.json的启动项配置

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

yarn add i babel-plugin-import -D

antd插件按需加载

在用antd-mobile时，需要配置按需加载，那自然就用到了 babel-import-plugin
那么在用到这个插件的时候，自然就想到要用 react-app-rewired 来覆盖配置。

react-scripts 升级到 2.1.2 以前：
（1）yarn add i babel-plugin-import -D
（2）项目根目录创建config-overrides.js 内容如下

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

react-scripts 升级到 2.1.2 和以后安装：
（1）yarn add i customize-cra -D
（2）项目根目录创建config-overrides.js 内容如下

const {
  override,
  fixBabelImports,
  // addLessLoader,
} = require("customize-cra");
 
 
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd", libraryDirectory: "es", style: 'css' // change importing css to less
  }),
  // addLessLoader({
  //   javascriptEnabled: true,
  //   modifyVars: { "@primary-color": "#1DA57A" }
  // })
);