专业的编程技术博客社区

网站首页 > 博客文章 正文

Vue实战059:NPM配置国内镜像源及使用

baijin 2024-11-17 06:59:07 博客文章 2 ℃ 0 评论

npm(node package manager)是nodejs的包管理器,可以用于node插件及依赖的安装、卸载管理。在创建Vue项目或者安装插件的时候应该可以体会到,NPM的下载速度相当的慢。因为NPM默认访问的是国外网站,所以访问起来速度不是一丁点的慢,为了提高NPM的下载速度我们可以配置国内的镜像源:淘宝镜像(https://npm.taobao.org/)。

?安装node.js环境

要用npm的功能一定需要有node.js的开发环境(node中集成了npm),这里可以去node.js官网根据自己的系统下载安装即可。如果用的是绿色版记得配置下环境变量,配置好之后可以在cmd中检查下node.js和npm是否安装成功: 输入node -v安装成功会出现node版本号,验证npm同node.js一样,npm -v安装成功会出现npm版本号。

? 临时配置npm淘宝镜像

在安装时附上淘宝镜像链接,通过registry 属性指定npm下载安装包的源 默认:https://registry.npmjs.org/,这里我们改成淘宝镜像地址https://registry.npm.taobao.org。还有一个镜像源是cnpmjs镜像源:https://cnpmjs.org/,有兴趣的可以试试。

npm install -g @vue/cli  --registry=https://registry.npm.taobao.org;

永久使用npm淘宝镜像

npm提供了npm config命令可以进行npm相关配置,通过npm config set可以对配置项进行修改。在系统用户目录下会生成一个.npmrc文件,通过npm config ls -l 可查看npm的所有配置包括npmrc的文件路径:userconfig = "C:\\Users\\kevinfan\\.npmrc"。如果你需要代理还可以通过proxy属性配置ip和端口。

//cmd窗口配置
npm config set registry https://registry.npm.taobao.org
npm config set proxy=http://username:password@server:port

配置node-sass源

在安装node-sass的时候我们会发现总是安装不成功,而这安装不成功链接访问的是GitHub,而这个网址在国内总是网络不稳定,所以导致总是安装失败。一般配置了淘宝镜像基本都能解决该问题,但也不乏有些网络还是会出错,所以我们可以在npmrc文件中针对node-sass单独配置镜像。会遇到相同情况的还有phantomjs和electron插件,在这里可以一起配置了。

//.npmrc文件配置
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
electron_mirror=https://npm.taobao.org/mirrors/electron/
registry=https://registry.npm.taobao.org
proxy=http://username:password@server:port

npm相关命令

NPM使用相当的简单,npm提供了很多命令通过npm help命令可以查看npm支持的命令,我们只要熟悉了这些命令就可以很好的使用npm了。通过npm help '命令'可以查看条命令的详细帮助,命令可以附带一些参数来制定操作。

?npm常用install命令使用

就拿我们最常用的install命令来说,install命令用于安装模块。install安装时可以加入不同的参数,可以配置模块安装的环境。安装模块时如果没有将模块依赖写入pakage.json,运行npm install时也不会下载这个模块。如果你打开的是别人的项目,这个时候一般是没有任何依赖包的,但是所有需要的依赖包已经注入到package.json里面了,这个时候我们就可以使用npm install来安装所有项目中需要的依赖包了。

//安装模块到项目node_modules目录下,不会将模块依赖写入pakage.json
npm install moduleName
//指定版本安装,其他与上面一样
npm install moduleName 1.0
//-g表示global,全局安装的意思,安装模块到node.js指定的node_modules文件夹下。
npm install -g moduleName
//-S表示save,安装模块到项目node_modules目录下,会将模块依赖写入pakage.json的dependencies(生产环境依赖)中
npm install -S moduleName  //或者--save
//-D表示Dev,安装模块到项目node_modules目录下,会将模块依赖写入pakage.json的devDependencies(开发环境依赖)中
npm install -D moduleName   //或者--save-dev
//-O表示optional,安装模块到项目node_modules目录下,会将模块依赖写入pakage.json的optionalDependencies(可选环境依赖)中
npm install -O moduleName  //或者--save-optional
//安装pakage.json注入的所有项目中需要的依赖包
npm i  //或者npm install
//查看所有已经安装的模块,以下几个命令都可以。
npm list 或 npm ll 或 npm la 或 npm ls

Package.json 属性说明

当我们通过NPM创建每个项目时都会生成一个package.json文件,这里定义了这个项目所需要的各种模块以及项目的基本配置信息。当我们使用npm install命令时npm根据这个配置文件自动下载项目所需的模块也就是配置项目所需的开发环境,package.json文件是一个JSON对象,该对象的每一个成员就是当前项目的一项设置。下面是package.json中的一些属性定义:

name:项目/模块名称。
version:当前项目版本。
author:项目开发者。
description:项目描述,是一个字符串。
keywords:项目关键字,是一个字符串数组。
private:是否私有,设置为 true 时npm拒绝发布。
license:软件授权条款,让用户知道他们的使用权利和限制。
bugs:bug 提交地址。
contributors:包的其他贡献者姓名。
repository:项目仓库地址。
homepage:项目包的官网URL。
dependencies:依赖包列表。如果依赖包没有安装npm会自动将依赖包安装在node_module目录下。
devDependencies:开发环境下,项目所需依赖。
scripts:执行npm脚本命令。
bin:内部命令对应的可执行文件的路径。
main:字段指定了程序的主入口文件,require('moduleName')就会加载这个文件。如果没有设置则默认加载项目跟目录下的index.js文件。
module:模块化方式进行加载,优先查看是否有module字段,没有则使用main字段。
eslintConfig:EsLint 检查文件配置,自动读取验证。
engines:项目运行的平台。
browserslist:供浏览器使用的版本列表。
style:供浏览器使用时,样式文件所在的位置。
files:被项目包含的文件名数组。

更多Vue实战技巧可以参考专栏:Vue实战系列

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表