网上的教程有好多,在这里不一一列举,我只介绍我今天安装成功的步骤

首先,在安装react之前要先配置好node

1.安装node

在这里下载node的安装包https://nodejs.org/en/download/ 。我下载的是.pkg文件,直接双击安装就好

node —v命令检验是否安装成功

npm -v用来检测npm

2.通过npm使用react

国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

一般这个时候就可以使用cnpm来进行操作,但是我的一直显示命令未找到。所以我放弃了使用cnpm,继续使用npm命令

npm配置taobao镜像的registry

npm config set registry https://registry.npm.taobao.org

然后直接用

npm install gulp less --save-dev

就是从taobao镜像拿包了

3.两种react开发环境构建

使用 create-react-app 快速构建 React 开发环境

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

MacOS,安装npm全局包提示没有写入权限:

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules


 

解决方法:

修改npm包所安装目录的权限sudo chown -R $USER /usr/local   然后输入密码就可以了

查看目录是否已切换权限:$ls -l /usr/local

接下来可以进行npm全局包安装:例如$npm install webpack -g

-----------------------------

安装问题

123deAir:~ mxt$ npm install create-react-app -g

WARN checkPermissions Missing write access to /usr/local/lib/node_modules

ERR! path /usr/local/lib/node_modules

ERR! code EACCES

ERR! errno -13

ERR! syscall access

ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']

ERR!   stack:

ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',

ERR!   errno: -13,

ERR!   code: 'EACCES',

ERR!   syscall: 'access',

ERR!   path: '/usr/local/lib/node_modules' }

npm

ERR! The operation was rejected by your operating system.

ERR! It is likely you do not have the permissions to access this file as the current user

npm

ERR! If you believe this might be a permissions issue, please double-check the

ERR! permissions of the file and its containing directories, or try running

ERR! the command again as root/Administrator (though this is not recommended).

ERR! A complete log of this run can be found in:

ERR!     /Users/mxt/.npm/_logs/2018-12-19T09_09_15_552Z-debug.log

123deAir:~ mxt$ npm install -g create-react-app

WARN checkPermissions Missing write access to /usr/local/lib/node_modules

ERR! path /usr/local/lib/node_modules

ERR! code EACCES

ERR! errno -13

ERR! syscall access

ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

ERR!  { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules']

ERR!   stack:

ERR!    'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',

ERR!   errno: -13,

ERR!   code: 'EACCES',

ERR!   syscall: 'access',

ERR!   path: '/usr/local/lib/node_modules' }

npm

ERR! The operation was rejected by your operating system.

ERR! It is likely you do not have the permissions to access this file as the current user

npm

ERR! If you believe this might be a permissions issue, please double-check the

ERR! permissions of the file and its containing directories, or try running

ERR! the command again as root/Administrator (though this is not recommended).

ERR! A complete log of this run can be found in:

ERR!     /Users/mxt/.npm/_logs/2018-12-19T09_11_38_006Z-debug.log

123deAir:~ mxt$ sudo npm install webpack -g

Password:

/usr/local/bin/webpack -> /usr/local/lib/node_modules/webpack/bin/webpack.js

> fsevents@1.2.4 install /usr/local/lib/node_modules/webpack/node_modules/fsevents

> node install

[fsevents] Success: "/usr/local/lib/node_modules/webpack/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed

Pass --update-binary to reinstall or --build-from-source to recompile

+ webpack@4.27.1

added 389 packages from 297 contributors in 30.263s

123deAir:~ mxt$ sudo chown -R $USER /usr/local

123deAir:~ mxt$ ls -l /usr/local

total 0

drwxr-xr-x   6 mxt  wheel   204 12 19 01:19 bin

drwxr-xr-x   3 mxt  wheel   102 12 10 13:29 include

drwxr-xr-x  73 mxt  wheel  2482 12 19 00:28 lib

drwxr-xr-x   5 mxt  wheel   170 12 10 13:29 share

123deAir:~ mxt$ sudo chown -R $USER /usr/local

123deAir:~ mxt$ ls -l /usr/local

total 0

drwxr-xr-x   6 mxt  wheel   204 12 19 01:19 bin

drwxr-xr-x   3 mxt  wheel   102 12 10 13:29 include

drwxr-xr-x  73 mxt  wheel  2482 12 19 00:28 lib

drwxr-xr-x   5 mxt  wheel   170 12 10 13:29 share

123deAir:~ mxt$ webpack -g

One CLI for webpack must be installed. These are recommended choices, delivered as separate packages:

- webpack-cli (https://github.com/webpack/webpack-cli)

The original webpack full-featured CLI.

We will use "npm" to install the CLI via "npm install -D".

Do you want to install 'webpack-cli' (yes/no): npm install webpack -g

You need to install 'webpack-cli' to use webpack via CLI.

You can also install the CLI manually.

123deAir:~ mxt$ npm install -g create-react-app

/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js

+ create-react-app@2.1.1

added 63 packages from 20 contributors in 8.958s

123deAir:~ mxt$ create-react-app my-app

Creating a new React app in /Users/mxt/my-app.

Installing packages. This might take a couple of minutes.

Installing react, react-dom, and react-scripts...

> fsevents@1.2.4 install /Users/mxt/my-app/node_modules/fsevents

> node install

[fsevents] Success: "/Users/mxt/my-app/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed

Pass --update-binary to reinstall or --build-from-source to recompile

+ react-scripts@2.1.1

+ react-dom@16.6.3

+ react@16.6.3

added 1776 packages from 684 contributors in 120.945s

Success! Created my-app at /Users/mxt/my-app

Inside that directory, you can run several commands:

npm start

Starts the development server.

npm run build

Bundles the app into static files for production.

npm test

Starts the test runner.

npm run eject

Removes this tool and copies build dependencies, configuration files

and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd my-app

npm start

Happy hacking!

123deAir:~ mxt$

/安装命令

npm install create-react-app -g  // 全局安装create-react-app,如果不想全局安装,则不要-g。可能会很慢,可以使用cnpm来安装create-react-app my-app  // my-app是项目名cd my-app  npm start  // 启动项目

转载于:https://www.cnblogs.com/iOS-mt/p/10144674.html

MacOS安装react。问题 -- npm全局包的权限问题相关推荐

  1. Node安装,改变npm全局默认C盘安装路径

    1.自定义安装目录下新建两个文件夹node_cache和node_global 2.cmd设置路径地址 npm config set prefix "D:\node\node_global& ...

  2. npm安装的全局包/工具不能使用,不是内部/外部命令

    事情经过 今天通过npm安装全局工具,安装完成后,使用新安装的工具命令,竟然显示"不是内部或外部命令,也不是可运行的程序" 之前通过npm安装全局包,就可以正常使用,为什么今天就不 ...

  3. node mysql安装目录_nodejs 指定全局安装路径和缓存路径

    1.前提:已安装 nodejs(nodejs官网 https://nodejs.org), 并且已将其添加到了环境变量 path 中: 2.进入cmd命令行,然后输入 node -v ,测试是否安装成 ...

  4. npm修改全局包安装路径

    npm的安装方式 全局安装 npm install -g <package_name> 安装路径默认为C:\Users\xxx\AppData\Roaming\npm,缓存路径为C:\Us ...

  5. npm 全局安装node module并查看安装路径

    如何安装全局包? npm install -g <name> 如何查看全局安装了哪些包? 方式一 第一步 npm config get prefix 第二步 找到node_modules, ...

  6. npm全局安装和本地安装及卸载

    NPM是 1)npm是第三方模块的托管网站 1.node包括ECMAscript核心 2.全局成员 3.模块系统成员  (包括  核心模块,第三方模块,自定义模块) 2)npm是node包的管理工具  ...

  7. npm更新包(全局单个,项目单个,全局所有,项目生产环境,项目开发环境)

    npm-check检查npm依赖包是否有更新,错误以及不在使用的. 安装npm-check npm install -g npm-check npm全局更新包 npm-check -u -g npm更 ...

  8. npm全局安装 require报错Cannot find module

    npm全局安装 require报错Cannot find module 原因:没有设置系统环境变量NODE_PATH,项目内读取不到全局包. 解决方案: 输入以下命令,查看全局包路径, npm roo ...

  9. npm全局安装_安装webpack

    安装Webpack前的准备工作: 1. 由于 webpack 执行打包压缩时依赖 nodeJS,先确保你的系统安装了nodeJS 5.0.0 及以上的版本. 2. 因为 npm 是 nodeJS 平台 ...

最新文章

  1. perl 编程 - 判断系统进程是否活着的方法
  2. python买什么书-希望更加深入了解python 有什么书可以推荐?
  3. 阿里开源富容器引擎 PouchContainer 的 network 连接机制
  4. c++ 编译添加dll_matconvnet安装、编译、配置
  5. [转]使用HttpOnly提升Cookie安全性
  6. 关于5G技术和5G技术即将面临的各项挑战
  7. 2020 年 Service Mesh 技术展望
  8. 比较zImage和uImage的区别
  9. 【OpenCV 例程200篇】97. 反谐波平均滤波器
  10. 移动测试之-流量测试方案
  11. python使用梯度下降方法实现线性回归算法_python实现线性回归梯度下降算法
  12. 局域网文件传输工具---LANDrop 使用记录
  13. linux程序性能分析工具stap,《面向应用开发者的系统指南》CPU篇之使用systemtap分析进程的行为...
  14. 吉首大学期末计算机考试,吉首大学微机原理期末考试试卷.doc
  15. 中国各省的简称及省会
  16. Androidx和Android support库共存问题解决
  17. 服务器怎么用ftp传文件夹吗,ftp服务器怎么传文件夹吗
  18. matlab在solver,matlab的solver
  19. 小米平板2刷哪个系统更流畅_Windows 10版小米平板2简测:流畅度不及自家MIUI版...
  20. 滴水逆向三期笔记与作业——02C语言——02数据类型

热门文章

  1. 004 IOC---IOC容器
  2. 通过路由进行参数的传递(方法一)
  3. JavaScript frame跨域获取元素、修改元素属性、调用其他frame页面方法
  4. jQuery导航切换功能
  5. healthd: battery l=1 v=0 t=27.0 h=2 st=1 chg=a 注释方法
  6. 09 | 基础篇:怎么理解Linux软中断?
  7. oracle ajax储存过程分页,创建 Oracle 分页存储过程
  8. 二进制图片在http怎么显示_HTTP/2内核剖析
  9. Flink 1.13,面向流批一体的运行时与 DataStream API 优化
  10. 一击进榜!达摩院十年“扫地僧”,揭秘阿里云数据仓库逆袭之旅