此文档主要面向出生在前端(es6+,react,webpack,babel等)新手村的童鞋,主要目的是尽快让童鞋们从lv0尽快升级到lv10,走出新手村,探索更广阔的前端世界。内容较(te)为(bie)基础,请针对自身情况决定是否阅读。
- NodeJS安装;
- 简单介绍npm与cnpm;
- yarn简单介绍;
- package.json文件的说明;
- 总结
NodeJS的安装没有技术可言,这里就不说了,而为什么要用Node,你就把Node想成一个使JS能够运行的一个解析器就好。
https://nodejs.org/en/download/ (Node.js官方安装包及源码下载地址)
https://www.cnblogs.com/yzadd/p/6547668.html (node详细安装过程及环境变量配置)
https://registry.npmjs.org (npm地址)
https://npm.taobao.org (cnpm镜像地址)
1.npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);
2.使用npm安装插件:命令提示符执行npm install <name> [-g] [--save-dev]
<name>
:node插件名称。
例:npm install gulp-less --save-dev
-g:全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm,并且写入系统环境变量;
不加-g :非全局安装:将会安装在当前定位目录;
当你全局安装后可以通过命令行在任何地方调用它,本地安装将安装在定位目录的node_modules文件夹(存放第三方包)下。
-save:将保存配置信息至package.json(package.json是nodejs项目配置文件);
-dev:保存至package.json的devDependencies节点,不指定-dev将保存至dependencies节点;
为什么要将配置保存至package.json?因为node插件包相对来说非常庞大,所以不加入版本管理,将配置信息写入package.json并将其加入版本管理,我们直接用命令提示符执行npm install(cnpm install||yarn install),则会根据package.json下载所有需要的包)。
3.使用npm卸载插件:npm uninstall <name> [-g] [--save-dev]
。
4.使用npm更新插件:npm update <name> [-g] [--save-dev]
。
5.更新全部插件:npm update [--save-dev]
。
6.查看npm帮助:npm help
。
7.查看当前目录已安装插件:npm list
。
1.因为npm安装插件是从国外服务器 https://registry.npmjs.org 下载,受网络影响大,可能出现异常,淘宝团弄了个完整 npmjs.org 镜像(地址: https://npm.taobao.org ),来代替官方版本。
2.安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org
;
注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm。
Yarn是Facebook发布了新的 node.js包管理器用以替代npm。使用yarn前需要保证git在全局可以找到,配置好git环境变量。(本人用的是webstorm,是使用中间配置的,需要重启软件)
1.其实 yarn 可以直接像装模块那样用 npm 装:npm install -g yarn
;
2.yarn的安装依赖的方式不同于yarn,你需要执行以下命令来安装依赖:yarn add react
(npm 为 npm install react);
3.更新一个依赖
yarn upgrade [package]
yarn upgrade [package]@[version]
yarn upgrade [package]@[tag]
4.移除一个依赖
yarn remove [package]
5安装package.json中所有的依赖项
yarn / yarn install
6.yarn 更新所有的依赖包
yarn upgrade-interactive
每个项目一般都有一个package.json文件,定义了这个项目所需要的各种模块,以及项目的配置信息。npm install命令根据这个配置文件(不光局限在npm和yarn。nodejs应用都生效),自动下载所需的模块,也就是配置项目所需的运行和开发环境。
package.json文件就是一个JSON对象,该对象的每一个成员就是当前项目的一项设置。比如name就是项目名称,version是版本···。
package.json文件可以手工编写,也可以使用npm init命令自动生成。$ npm init
在当前目录生成一个基本的package.json文件。有了package.json文件,直接使用npm install
命令,就会在当前目录中安装所需要的模块。
scripts指定了运行脚本命令的npm命令行缩写,比如start指定了运行npm run start(或yarn run start)时,所要执行的命令。
dependencies:指定了项目运行所依赖的模块,
devDependencies:指定项目开发所需要的模块。
它们都指向一个对象。该对象的各个成员,分别由模块名和对应的版本要求组成,表示依赖的模块及其版本范围。
bin项用来指定各个内部命令对应的可执行文件的位置。
所有node_modules/.bin/目录下的命令,都可以用npm run [命令]的格式运行。在命令行下,键入npm run,然后按tab键,就会显示所有可以使用的命令。
main字段指定了加载的入口文件,require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
config字段用于添加命令行的环境变量。
browser指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具,通过它就知道该打包那个文件。
engines字段指明了该模块运行的平台,比如 Node 的某个版本或者浏览器,该字段也可以指定适用的npm版本。
man用来指定当前模块的man文档的位置。
preferGlobal的值是布尔值,表示当用户不将该模块安装为全局模块时(即不用–global参数),要不要显示警告,表示该模块的本意就是安装为全局模块。
style指定供浏览器使用时,样式文件所在的位置。样式文件打包工具parcelify,通过它知道样式文件的打包位置。
学习React首先要知道它是什么东西,做什么用的,需要的工具和相关配置是做什么的,理解了这些离你自己可以写一个简单的React项目就不远了。