我刚刚开始学习React, Facebook通过提供以下现成的项目来帮助简化初始设置。

如果我必须安装框架项目,我必须在命令行中键入npx create-react-app my-app。

我想知道为什么Facebook在Github有npx create-react-app my-app而不是npm create-react-app my-app?


当前回答

npx是一个npm包运行器(x可能代表eXecute)。使用npx的一种常见方法是下载并临时运行一个包或进行试用。

Create-react-app是一个NPM包,预计在项目的生命周期中只运行一次。因此,最好使用npx在一个步骤中安装和运行它。

正如主页https://www.npmjs.com/package/npx中提到的,默认情况下,npx可以在PATH或node_modules/.bin中运行命令。

注意: 通过深入研究,我们可以发现create-react-app指向一个在节点环境中执行的Javascript文件(在Linux系统中可能是/usr/lib/node_modules/create-react-app/index.js)。这只是一个执行一些检查的全局工具。实际的设置由react-scripts完成,其最新版本安装在项目中。更多信息请参考https://github.com/facebook/create-react-app。

其他回答

NPM代表节点包管理器。NPM是Node.JS的默认包管理器。它是用Javascript写的。NPM的作用是管理node.js的包和模块。

NPX代表节点包执行。NPX附带了npm,当npm安装在5.2.0版本之上时,它会自动安装。NPX是一个npm包运行器,它的作用是从注册表执行包,甚至不需要安装包。

现在NPM和NPX的区别如下:

i) NPM用于安装包,NPX用于执行包。

ii)由于npm的缘故,安装的包必须被照顾,因为它是全局安装的,而npx使用的包不需要被照顾,因为它们不是全局安装的。

NPM vs NPX

NPM代表节点包管理器。一个基于文本的Nodejs包管理程序。

而NPX是一个节点包运行器。它的功能是执行Nodejs包

NPX将执行Nodejs包中的二进制文件,无论是否安装。

甚至NPX也可以帮助我们使用某些版本的Nodejs,而不必使用nvm (node.js版本管理)、nave (node.js虚拟环境)和nvm (node.js版本管理)。

简单地说,npm就是节点包管理器 NPX是运行NPM包的可执行版本

NPM代表节点包管理器。 它预装在Node.js中。NPM有助于将项目中的包作为依赖项来管理。

在使用NPM时,有两种方法将包安装到本地计算机中。

本地:当一个包在本地安装时,它被安装在 ./node_modules/.bin/ 全局:在用户环境中安装全局包 路径。Linux为“/usr/local/bin”,Windows为“AppData%/npm”。

要执行本地安装的包,应该在包中指定。Json脚本块如下所示。

"scripts": {
    "your-package":  "your-package-name"
}

然后,你可以执行这个包:

npm run your-package-name

NPX是一个NPM包执行器。 目前,当你安装NPM 5.2.0或更高版本时,NPX与NPM捆绑在一起。

为什么NPX胜过NPM?

不需要编辑包。带有node_modules路径的Json文件。 您可以直接从命令行执行该工具。

npm - JavaScript包管理器,就像:pip (Python), Maven (Java), NuGet (.NET), Composer (PHP), RubyGems (Ruby),…

NPX—运行包的命令而不显式地安装它。

用例:

您不希望既全局安装包,也不希望在本地安装包。 您没有全局安装它的权限。 只是想测试一些命令。 有时,您希望在包中有一个脚本命令(生成、转换某些东西……)。Json来执行一些东西,而不需要将这些包作为项目的依赖项安装。

语法:

npx [options] [-p|--package <package>] <command> [command-arg]...

软件包可选:

npx   -p uglify-js         uglifyjs --output app.min.js app.js common.js
      +----------------+   +--------------------------------------------+
      package (optional)   command, followed by arguments

例如:

Start a HTTP Server      : npx http-server
Lint code                : npx eslint ./src
                         # Run uglifyjs command in the package uglify-js
Minify JS                : npx -p uglify-js uglifyjs -o app.min.js app.js common.js
Minify CSS               : npx clean-css-cli -o style.min.css css/bootstrap.css style.css
Minify HTML              : npx html-minifier index-2.html -o index.html --remove-comments --collapse-whitespace
Scan for open ports      : npx evilscan 192.168.1.10 --port=10-9999
Cast video to Chromecast : npx castnow http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4

更多关于命令的内容:

https://docs.npmjs.com/files/package.json#bin https://github.com/mishoo/UglifyJS2/blob/master/package.json#L17