NPM学习-基础+安装

参考:

https://www.cnblogs.com/lgx5/p/10732016.html

https://www.runoob.com/nodejs/nodejs-npm.html

npm官方文档:npmjs.org/doc/

npm中文文档:https://www.npmjs.cn/

http://npm.taobao.org/

一、Windows下安装NPM                                                                

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

目前NPM安装程序已经包含在Nodejs中,安装Nodejs即可安装NPM。

下载nodejs地址:https://nodejs.org/en/,下载msi文件。安装,一直下一步。以安装在C: odejs为例。

安装过程中包含“Add to PATH”,会自动把nodejs路径添加到操作系统环境变量中。

   (图)

安装完毕后,C: odejs目录如下:

     (图)

安装成功后,cmd在命令行执行:node -v、npm -v,可以看到版本信息,说明安装成功。

二、配置npm                                                                  

介绍配置前,先说明下npm安装模块的原理:

npm安装模块的命令:npm install <Module Name>

npm安装模块有本地安装 和 全局安装两种方式:

(1)本地安装 npm install <Module Name>

  • 将安装包放当前目录(运行 npm 命令时所在的目录)下的node_modules,如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
  • 可以通过 require() 来引入本地安装的包。

(2)全局安装 npm install <Module Name> -g

  • 将安装包放在 /usr/local 下或者你 node 的安装目录。
  • 可以直接在命令行里使用。

如果你希望具备两者功能,则需要在两个地方安装它或使用 npm link。

1、配置node_global

那么全局安装,模块安装在什么地方呢?这就用到了node_global路径配置。

npm还有两个目录node_global、node_cache。默认情况下,全局安装到 C:Users用户名AppDataRoaming pm 目录下。用户自定义全局安装目录node_global,设置完毕后,全局安装的模块安装到node_global ode_modules下 。

以配置D: odejs ode_global、D: odejs ode_cache目录为为例。在cmd命令含执行:

    npm config set prefix "D: odejs ode_global"

    npm config set cache "D: odejs ode_cache"

配置完毕后,执行npm config list查看配置结果。

2、配置镜像:

    npm config set registry=http://registry.npm.taobao.org

使用淘宝镜像:

   国内直接使用npm官方镜像很慢,以使用淘宝npm镜像为例:

   淘宝 npm 镜像是一个完整 npmjs.org 镜像,可以用此代替官方版本,同步频率目前为 10分钟一次以保证尽量与官方服务同步。

   也可以使用淘宝定制的cnpm (gzip 压缩支持) 命令行工具代替默认的npm。安装cnpm

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

   后续使用cnmp命令代替npm命令。

配置完毕后,执行如下命令检查镜像行不行:

    npm config get registry

3、配置文件位置

npm的配置文件保存在 C:Usersf00371603.npmrc。打开可以看到起内容:

prefix=D: odejs ode_global

cache=D: odejs ode_cache

no-proxy=.huawei.com

registry=http://cmc-cd-mirror.rnd.huawei.com/npm

三、更新npm到最新版本                                                        

nodejs默认安装额npm版本可能不是最新版本,更新npm版本

  npm install npm -g

查看Global中有什么模块:

  npm list -global

查看某个模板的版本:

  npm list <module name>

下载模块:

  npm uninstall <module name>

更新模块:

  npm update <module name>

搜索模块:

  npm search <module name>

创建模块:

 npm init

后续再详述。

四、npm安装VUE                                             

安装VUE涉及如下两个模块:

  • webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
  • vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

1、安装VUE

npm install vue -g

安装完毕后,在D: odejs ode_global ode_modules目录下将会有vue目录

2、安装vue-router

npm install vue-router -g

3、安装vue脚手架

npm install vue-cli -g

安装完毕后,会发现在D: odejs ode_global出现了vue可执行程序,但是在命令行执行vue是找不到命令的,原因是D: odejs ode_global路径不在PATH环境变量中。

PATH环境变量中添加D: odejs ode_global。

在此执行vue --version,输出版本说明vue安装成功。

4、使用vue创建框架、并运行:

vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目。

以创建webpack框架为例,以创建的项目在d:根目录,项目名为vuetest为例。

进入d:,执行vue init webpack vuetest

提示错误:vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 13.229.188.59:443

执行vue init webpack vuetest --offline

提示错误: vue-cli · Local template "C:Usersf00371603.vue-templateswebpack" not found.

从https://github.com/vuejs-templates/下载对应的模块,放到C:Usersf00371603.vue-templateswebpack目录。

再次执行vue init webpack vuetest --offline

输入提示的信息,其中“Install vue-router”选择yes,其他都选择no。执行完毕后可以看到d目录下,多了:vuetest目录。 内部有package.json、index.js的文件。

cd vuetest进行项目目录:执行npm install下载package.json中定义的依赖,下载本项目的node_modules子目录下。

在项目目录下:执行npm run dev 执行项目。提示可以用http://localhost:8080访问项目。在浏览器输入http://localhost:8080可查看样例效果。

在项目目录下:执行npm run build,在dist目录下编译出静态文件。

vuetest项目目录结构:

|--testvue

|--build 构建脚本目录

|--config 构建配置目录

|--dist 生成的结果文件目录

|--node_modules 依赖包的目录

|--src 源码目录

    |--assets 资源目录

    |--components 组件目录

    |--router 路由

    --App.vue 页面级组件

    --main.js 入口js

|--static

--package.json 项目描述文件

--inde.html 入口页面

五、npm模块的package.json                                                     

打开npm的node_golbal ode_modules下的任何一个模块,会发现每个都有一个package.json文件。

这个文件用于定义当前模块的包的属性:

name:包名。

version:包的版本号。

description:包的描述。

homepage:包的官网 url 。

author:包的作者姓名。

contributors:包的其他贡献者姓名。

dependencies:依赖包列表。如果依赖包没有安装,npm 会自动将依赖包安装在 node_module 目录下。

repository:包代码存放的地方的类型,可以是 git 或 svn,git 可在 Github 上。

main:main 字段指定了程序的主入口文件,require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。

keywords:关键字

可以使用npm init命令初始创建项目的package.json,过程需要输入基本信息。

六、npm的版本管理                                                             

NPM使用语义版本号来管理代码。语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号。当代码变更时,版本号按以下原则更新。

  • 如果只是修复bug,需要更新Z位。
  • 如果是新增了功能,但是向下兼容,需要更新Y位。
  • 如果有大变动,向下不兼容,需要更新X位。

版本号有了这个保证后,在申明第三方包依赖时,除了可依赖于一个固定版本号外,还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。

  

八、发布自己开发的模块到本地                                                          

在package.json所在目录下使用npm install . -g可先在本地安装当前命令行程序,可用于发布到npm资源库前的本地测试。

九、发布自己开发的模块到npm资源库                                                

使用邮件在npm资源库中注册用户:npm adduser。 输入用户名、密码、邮箱。

发布模块:npm publish。发布完成后,其他人就可以采用npm install安装你自己的模块包。

撤销发布:npm unpublish <package>@<version>可以撤销发布自己发布过的某个版本模块包。

原文地址:https://www.cnblogs.com/yickel/p/12484294.html