Mac上安装create-react-app

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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去除多余组件

  1. yarn add i react-app-rewired -D

  2. 修改package.json的启动项配置

    “scripts”: {

    “start”: " react-app-rewired start",

    “build”: " react-app-rewired build",

    “test”: " react-app-rewired test",

    “eject”: “react-scripts eject”

    }

  3. yarn add i babel-plugin-import -D

  1. 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" }
  // })
);

  1. 设置缓存文件

以上是 Mac上安装create-react-app 的全部内容， 来源链接： utcz.com/z/383928.html

回到顶部