精华内容
下载资源
问答
  • npm包管理工具

    2020-05-11 20:08:59
    需要使用npm包管理工具,首先得下载这个工具,node.js中集成了npm包管理工具,所以先去node.js官网去下载安装node.js,安装完成后,我们用npm初始化一个项目 1.npm初始化项目: 创建一个文件夹,打开命令行工具,...

    npm是包管理工具,它更加是node.js平台的包管理工具,npm就像后端的maven一样管理包,而npm是下载上传前端的包的。需要使用npm包管理工具,首先得下载这个工具,node.js中集成了npm包管理工具,所以先去node.js官网去下载安装node.js,安装完成后,我们用npm初始化一个项目

    1.npm初始化项目:

    创建一个文件夹,打开命令行工具,使用npm init -y(这里-y指的是所有选项选择默认值)初始化一个项目,如下图左侧是文件夹,右侧是npm初始化项目命令行截图。

    2.初始化完成以后,生成了package.json文件,这个文件是包的配置文件,对其中的配置,如果需要我们可以自己根据需求修改。

    3.现在我们可以根据自己项目所需要的模块进行指定版本的模块安装,比如我们需要用到jquery

    我们就在命令行中输入npm install jquery 那么npm就会自动下载最新的jquery包到这个项目文件夹下面了,也可以使用npm install jquery@2.6.1这样的方式来指定某个模块的固定版本。

     

    4.安装完成后,我们看项目文件夹下面出现了多了以下标红的文件和文件夹

    在该目录下出现一个 node_modules 文件夹 和 package-lock.json node_modules 文件夹用于存放下载的js库(相当于maven的本地仓库) package-lock.json 是在 npm install 时候生成一份文件。 用以记录当前状态下实际安装的各个包的具体来源和版本号。 重新打开 package.json 文件,发现刚才下载的 jquery.js 已经添加到依赖列表中了.

    上面我们使用了npm install jquery安装了jquery模块,可以看到jquery安装到开发依赖(dependencies)中去了,实际的项目开发中,我们安装模块的时候,有两种安装模式,一种是安装到开发依赖(devdependencies)一种是安装到生产依赖(dependencies),这两种安装的不同方式在于,安装在开发依赖的东西,在项目的部署打包的时候不需要,它只是在开发过程中用到了,比如说"eslint"格式校验(这个只是帮助在开发过程中监测有没有格式问题)或者“webpack”打包工具(在开发完成后,我们打包好项目,在项目部署的时候,用的是webpack打好的包部署上线所以不需要在生产依赖中使用),而生产依赖是我们打包部署项目的时候,需要用到的东西,比如,我们项目是用jquery写的,没有这个jquery项目运行会出错,所以就需要把依赖安装到生产依赖中去,使用npm安装依赖的时候,怎么区分或者说怎么通过命令将他们安装到不同的依赖中去呢?下面举个例子

    1 安装到生产依赖(dependencies) npm install jquery --save

    2 安装到开发依赖(devdependencies)npm install eslint --save-dev

    如果不写-dev--save或--save,则默认安装到生产依赖中去。

    不管是生产依赖还是开发以来,都安装到项目的node_modules目录下,

    当运行npm install 初始化项目时候,会将开发依赖和生产依赖中的模块节点下的资源都下载到项目目录node_modules中

    而当运行npm install --production 或者注明NODE_ENV变量为production时候,dependencies中依赖的模块会自动下载到node_modules目录中去,而devDependencies节点下的模块不会被下载到node_modules目录中去。

     

    总结:

    npm install 初始化项目安装所有依赖,

    npm install --production 安装生产依赖

    npm install  --save moduleName(模块名) 安装模块到生产环境依赖

    npm install --save-dev  moduleName(模块名) 安装模块到开发环境依赖

     

    最后,如果要卸载模块,使用命令npm uninstall 模块名

    展开全文
  • NPM 包管理工具

    2020-07-28 15:50:55
    文章目录NPM 包管理工具配置淘宝镜像参考NPM 初始化项目参考安装、卸载模块查看模块版本查看最新版本查看所有可用版本本地安装、卸载不指定版本安装模块卸载模块指定版本安装模块不指定模块安装全局安装、卸载查看或...

    NPM 包管理工具

    配置淘宝镜像

    使用国内镜像,可以提高模块的下载速度。

    查看当前镜像地址:

    npm get registry
    

    配置淘宝镜像地址:

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

    提示:用户配置的参数保存在参数 userconfig 指向的文件中,执行命令 npm config ls -l 可以查看所有配置参数。

    参考

    npm-config - Default Configs

    npmrc

    NPM 初始化项目

    打开命令提示符窗口,新建一个文件夹,进入到该文件夹,执行命令 npm init 即可开始初始化项目,具体步骤如下:

    在这里插入图片描述

    执行命令 npm init -ynpm init --yes 可以跳过询问,直接采用默认值初始化项目。

    参考

    npm-init

    安装、卸载模块

    模块的安装方式有两种,一种是本地安装,另一种是全局安装。

    本地安装将模块安装到当前项目的 node_modules 文件夹中;全局安装将模块安装到一个全局的 node_modules 文件夹中。

    查看模块版本

    查看最新版本

    查看 jquery 的最新版本:

    npm view jquery version
    3.5.1
    

    查看所有可用版本

    查看 jquery 的所有可用版本:

    npm view jquery versions
    
    [
      '1.5.1',       '1.6.2',       '1.6.3',
      '1.7.2',       '1.7.3',       '1.8.2',
      '1.8.3',       '1.9.1',       '1.11.0-beta3',
      '1.11.0-rc1',  '1.11.0',      '1.11.1-beta1',
      '1.11.1-rc1',  '1.11.1-rc2',  '1.11.1',
      '1.11.2',      '1.11.3',      '1.12.0',
      '1.12.1',      '1.12.2',      '1.12.3',
      '1.12.4',      '2.1.0-beta2', '2.1.0-beta3',
      '2.1.0-rc1',   '2.1.0',       '2.1.1-beta1',
      '2.1.1-rc1',   '2.1.1-rc2',   '2.1.1',
      '2.1.2',       '2.1.3',       '2.1.4',
      '2.2.0',       '2.2.1',       '2.2.2',
      '2.2.3',       '2.2.4',       '3.0.0-alpha1',
      '3.0.0-beta1', '3.0.0-rc1',   '3.0.0',
      '3.1.0',       '3.1.1',       '3.2.0',
      '3.2.1',       '3.3.0',       '3.3.1',
      '3.4.0',       '3.4.1',       '3.5.0',
      '3.5.1'
    ]
    

    本地安装、卸载

    不指定版本安装模块

    本地安装 jQuery 的步骤:

    在这里插入图片描述

    卸载模块

    卸载刚刚安装的 jquery 模块:

    npm uninstall jquery
    

    指定版本安装模块

    执行以下命令安装 jquery 3.5.0 版本:

    npm install jquery@3.5.0
    

    不指定模块安装

    从 GitHub 上克隆的项目,一般是不带 node_modules 文件夹。

    此时,可以直接执行命令 npm install,npm 将根据 package.json 配置文件安装所需模块。

    全局安装、卸载

    查看或修改全局目录路径

    执行命令 npm root -g 可以查看全局的 node_modules 文件夹的路径:

    C:\Users\86188>npm root -g
    C:\Users\86188\AppData\Roaming\npm\node_modules
    

    执行命令 npm config set prefix "路径" 可以修改全局的 node_modules 文件夹的路径:

    C:\Users\86188>npm config set prefix "E:/npm"
    
    C:\Users\86188>npm root -g
    E:\npm\node_modules
    

    不指定版本安装模块

    要将模块安装到全局 node_modules 文件夹中,只需在安装命令之后加上 -g--global 即可。

    安装 jquery 到全局文件夹中:

    npm install -g jquery
    

    查看模块

    执行命令 npm list -g 即可查看全局安装的模块。

    卸载模块

    要卸载安装在全局 node_modules 文件夹中的模块,只需在卸载命令之后加上 -g--global 即可。

    从全局文件夹中卸载 jquery

    npm uninstall -g jquery
    

    生产环境模块安装、卸载

    生产环境模块,最终会被打包到可发布的文件中。

    在安装命令之后加上 -S-save,即可将模块安装到生产环境中。默认情况就是安装到生产环境。

    安装 jquery 模块到生产环境中:

    npm install -save jquery
    

    安装到生产环境的模块的信息记录在 package.json 配置文件中的 dependencies 项:

    {
      "name": "npm-01-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "jquery": "^3.5.1"
      }
    }
    

    如果要将模块从生产环境中卸载,可以在卸载命令之后加上 -S-save

    开发环境模块安装、卸载

    开发环境模块,最终不会被打包到可发布的文件中。比如一些语法检查插件,服务器插件等。

    在安装命令之后加上 -D-save-dev,即可将模块安装到开发环境中。

    安装到开发环境的模块的信息记录在 package.json 配置文件中的 devDependencies 项。

    如果要将模块从开发环境中卸载,可以在卸载命令之后加上 -D-save-dev

    参考

    npm-view

    npm-install - Description

    npm-uninstall

    npm-root

    npm-ls

    展开全文
  • NPM包管理工具

    2020-07-21 13:01:39
    NPM包管理工具 NPM全程是Node Package Manager,他是JavaScript的包管理工具,是Node.js平台默认的包管理工具,通过NPM可以安装、共享、分发代码、管理项目依赖关系。 可以从NPM服务器下载别人编写的第三方包到本地...

    NPM包管理工具

    NPM全程是Node Package Manager,他是JavaScript的包管理工具,是Node.js平台默认的包管理工具,通过NPM可以安装、共享、分发代码、管理项目依赖关系。

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

    可以吧NPM理解为前端的Maven,通过NPM很方便的下载使用js库,管理前端工程。

    最新版的Node.js已经继承了npm,所以首先安装Node环境就可以了。

    NPM英文网:https://nodejs.org/en/
    NPM中文网:http://nodejs.cn/
    在这里插入图片描述
    安装完成后检验是否安装成功:

    node -v
    
    npm -v 
    

    在这里插入图片描述

    NPM 初始化

    初始化项目

    npm init
    

    在这里插入图片描述
    输入名称:名称不能包含大写字母,如:studyDemo是不允许的,如果有大写,可以设置为study-demo,
    如果不输入直接回车,则以括号中的名称做为默认名字。
    在这里插入图片描述
    版本号:版本号,如果不输入也是以小括号中的版本号为默认。
    在这里插入图片描述
    描述:输入一个描述,随便来了。
    在这里插入图片描述
    入口文件:运行一个程序都有一个入口,设置之后,我们的js项目就是从这个文件里面运行,有人可以设置一个新的,但是我们用默认的就可以了。
    在这里插入图片描述
    测试命令:不用输入,直接回车就可以了。
    在这里插入图片描述
    git 仓库地址,也不需要,直接回车就行了。
    在这里插入图片描述
    关键字、作者、秘钥认证都不需要,直接忽略就可以了。
    在这里插入图片描述
    接下来他会根据我们设置的在studyDemo文件夹下创建一个package.json文件,内容如上图,点击回车标识确认,即OK,不确认的话我们就得设置一个no然后回车。
    在这里插入图片描述
    然后文件夹下就有了刚刚创建好的package.json文件。打开看一下:
    在这里插入图片描述
    如果嫌麻烦,可以采用以下命令初始化npm,这样的话他不会提示你填写各种信息,而是全部采用磨人的方式创建。

    npm init -y
    

    在这里插入图片描述
    这样子的话就简化了一系列的操作。

    NPM模块的安装

    安装方式

    npm install 命令用于安装某个模块,安装方式分为本地安装和全局安装两部分。

    • 本地安装
      将JS库安装在当前实行命令时所在的目录下
    npm install <module name>[@版本号]
    
    • 全局安装
      将JS库安装到你的全局目录下
    npm install <module name>[@版本号] -g
    

    如果安装出现一下错误:

    npm err! Error:connect ECONNREFUSED 127.0.0.1:8087
    

    解决办法:

    npm config set proxy null
    

    本地安装

    本地安装会将js库存放在当前目录下
    安装最新版 express 模块,他是基于node.js平台的web开发框架,执行命令如下:

    npm install express
    

    出现黄色的不用担心是警告。
    在这里插入图片描述
    在该目录下出现一个 node_modules 文件夹和一个 package-lock.json 文件。
    node_modules 文件夹用于存放下载的js库(相当于maven的本地仓库)。
    package-lock.json 是在 npm install 的时候生成的一份文件,记录的是当前状态下实际安装的各个包的具体来源和版本号。
    重新打开 package.json 文件,发现刚才下载的文件已经添加到依赖列表中了。
    在这里插入图片描述

    模块版本号显示方式:
    • 指定版本号:比如“3.5.2”,只安装指定版本,遵循“大版本,次要版本、小版本”的格式规定。
    • ~ 波浪号+指定版本:比如“~3.5.2”,安装3.5.x的最新版本,不低于3.5.2,但是不安装3.6.x,也就是说,安装时不改变大版本号和次要版本号。
    • ^ 插入号+指定版本号:比如 ^3.5.2:安装3.x.x,安装3.x.x的最新版本号,但不安装4.x.x,也就是说安装的时候不改变大版本号。需要注意的四,如果大版本号为0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本的变动,也可能带来不兼容。
    • latest:安装最新版本。

    指定版本安装

    安装jquery2.2.0版本,注意,2.2.0版本必须存在,不然会安装失败。

    npm install jquery@2.2.0
    

    在这里插入图片描述
    在这里插入图片描述
    安装成功!

    全局安装

    使用全局安装会安装到全局目录下。
    查看全局安装目录:

    npm root -g
    

    在这里插入图片描述
    比如在全局安装一个 vue。

    npm install vue -g
    

    在这里插入图片描述
    修改全局目录

    npm config set prefix "d:\npm"
    
    npm root -g
    

    很多项目都用到或者是经常用的时候,就是用全局安装。如果是某个项目特定的使用,其他项目一般用不到的时候就使用本地安装。

    查看全局安装的模块

    npm list -g
    

    生产环境模板安装

    格式:–save 或者 -S ,参数的意思是把模块的版本信息保存在package.json文件的 dependencies 字段中(生产环境依赖)。

    npm install <Model Name> [--save|-S]
    

    如果不写 --save 或 -S 默认也是安装到生产环境当中。

    例如在生产环境安装vue。
    在这里插入图片描述
    安装成功:
    在这里插入图片描述

    开发环境模板安装

    格式:–save-dev 或 -D 参数是把模块的版本信息保存到 package.json 文件的 devDependencies 字段中(开发环境依赖),所以开发阶段一般使用它:

    npm install <Module Name> [--save-dev | -D]
    

    例如 开发环境安装 eslint

    npm install eslint -D
    

    在这里插入图片描述
    在这里插入图片描述

    批量下载模块

    从网上下载的项目大多只有 package.json ,没有 node_modules 文件夹时,就要使用命令下载这些没有的js库。

    进入命令提示符,package.json所在的目录,执行以下命令,完成批量下载:

    npm install
    

    此时,npm 就会自动下载 package.json 中所依赖的库。

    查看模块命令

    1. 可以进入安装目录 node_modules 下查看是都有包。
    2. 使用命令查看。
    # 查看本地安装的所有模块
    npm list
    
    npm ls
    
    # 查看指定模块
    npm list <Model Name>
    

    查看模块远程最新版本

    格式:

    npm view <Module Name> version
    

    例如:查看jquery模块的最新版本。

    npm view jquery version
    

    在这里插入图片描述
    查看jquery远程所有版本信息。

    npm view jquery versions
    

    在这里插入图片描述

    卸载模块

    卸载局部模块

    npm uninstall <Module Name>
    

    卸载全局模块

    npm uninstall -g <Module Name>
    

    配置淘宝镜像加速

    查看当前使用的镜像地址:

    npm get registry
    

    在这里插入图片描述
    配置淘宝镜像地址:

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

    还原默认的镜像地址:

    npm config set registry https://registry.npmjs.org/
    
    展开全文
  • Npm包管理工具

    2019-08-16 11:30:40
    Npm包管理工具,JS开发者能够更方便的分享和复用以及更新代码,被复用的代码 被称为包或者模块,一个模块中包含了一到多个js文件。在模块中一般还会包含一个 package.json的文件,该文件中包含了该模块的配置信息。...

    一、介绍

    Npm包管理工具,JS开发者能够更方便的分享和复用以及更新代码,被复用的代码
    被称为或者模块,一个模块中包含了一到多个js文件。在模块中一般还会包含一个
    package.json的文件,该文件中包含了该模块的配置信息。一个完整的项目,需要依赖
    很多个模块。

    一个完整的npm包含三部分
    • npm网站-----用于预览npm管理的包
    • 注册机制-----用于上传包,使用数据库来维护包与上传者的信息
    • 客户端-----用于安装包

    文档地址:npm Documentation

    二、创建一个模块

    Node.js的模块是一种能够被发布到npm上的包。创建模块从创建package.json文件
    开始,package.json是模块的配置文件。

    可以使用npm init命令来初始化package.json文件

    $ npm init

    • name 模块名称
    • package.json 记录了项目的相关的信息
    • description 描述信息
    • Dependencies 依赖关系
    • devDependencies 环境依赖或测试依赖
    • optionalDependencies可选择依赖
    • version 模块版本
    • main 指定模块入口文件
    • engines 指定node版本
    • script 定义当前模块脚本,使用npm run来运行所定义的脚本
    使用-y参数创建默认package.json文件

    $ npm init -y

    三、安装npm

    npm会随着node一起被安装到本地。
    $ npm install npm@latest -g 更新npm

    全局安装cnpm包

    npm install -g cnpm

    安装淘宝镜像的npm工具

    由于默认npm的仓库在国外,下载起来很慢,可以使用淘宝镜像来加快下载速度。
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    Registry注册中心
    修改npm权限

    执行npm的时候有时会遇到权限不足的情况,可以通过以下方式进行修正。
    $ npm config get prefix
    $ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

    四、模块安装

    如果想要仅在当前模块中使用某个第三方模块,就可以使用npm install的默认安装,默认安装即是本地安装;如果想要在命令行中使用模块,就需要进行全局安装。安装时,如果当前目录中没有node_modules目录,npm就会创建一个该目录。

    $ npm install <package_name>
    • $ npm install
      安装所有项目依赖的模块,依赖的模块定义在package.json
    • $npm install
      安装模块时,默认会将所安装的模块写入到package.json中的dependencies属性,通过添加一些参数改变这个特性。
    模块更新

    全局更新依赖的模块。
    $ npm update <module_name>

    模块删除

    node_modules中删除不需要的模块。
    $ npm uninstall -g <package_name>

    不仅删除node_modules中的依赖,还需要删除package.json中的信息,可以使用save参数。
    $ npm uninstall –save -g <package_name>

    搭建本地npm仓库(sinopia)

    1.安装 $ npm install -g sinopia
    2.配置 $ npm set registry http://localhost:4873/
    3.添加用户 $ npm adduser --registry http://localhost:4873/
    4.发布模块 $ npm publish <module_name>
    5.启动 $ sinopia

    五、Babel工具

    ES6写的代码,NodeJS绝大部分支持,浏览器的支持程度比较弱。所有需要使用Babel工具将ES6的代码转成ES5代码。全局环境下进行 Babel转码。这意味着,如果项目要运行,全局环境必须有 Babel,也就是说项目产生了对环境的依赖。

    babel工具-----只转换语法层次的代码
    babel-polyfill(垫片)-----将es6的功能性新特性转换成es5的代码

    1.全局安装babel工具

    $ npm install --global babel-cli

    cnpm install --save babel-cli
    dependencies:{
    	babel-cli:""
    }
    cnpm install --save-dev babel-cli
    devDependencies:{
    	babel-cli:""
    }
    

    查看版本号:babel --version

    2.局部安装babel-preset-latest(安装到当前目录底下)

    cnpm install babel-preset-latest

    3.添加配置文件配置.babelrc(存放在项目的根目录下)

    {"presets":["latest"]}

    ES2015转码规则
    $ npm install --save-dev babel-preset-es2015 =>es2015
    最新转码规则
    $ npm install --save-dev babel-preset-latest =>latest
    不会过时的转码规则
    $ npm install --save-dev babel-preset-env =>env

    4.编写ES6代码
    5.转换

    Babel 命令
    babel a.js(文件名) 将转换的结果输出到终端
    babel a.js(文件名) --out-file b.js(文件名) 将a.js中的代码转换后输出到b.js文件中(默认是当前目录底下)
    babel src(目录名) --out-dir dist(目录名) 将src目录中的所有的文件转换成ES5的代码,最终输出到dist目录底下的同名文件中

    六、ES6转ES5升级版

    1.将当前目录初始化,成为一个Node项目, 在项目中有package.json文件,文件中可以声明该项目需要的包-模块。其他人拿到项目之后,使用cnpm install ,可以直接下载需要的依赖。

    cnpm init -y 快速初始化一个项目

    2.在项目开发阶段安装babel-cli

    cnpm install --save-dev babel-cli

    3.在项目开发阶段安装babel-preset-latest

    cnpm install --save-dev babel-preset-latest
    --save-dev 是在开发阶段依赖的包
    --save 是在打包之后依然依赖的包,将安装的记录,需要的依赖,记录到package.json文件中

    4.配置文件.babelrc

    {"presets":["latest"]}
    在这里插入图片描述

    5.在package.json中编写脚本,执行转换

    "start":"babel src --out-dir dist"
    在这里插入图片描述

    6.在src目录底下编写es6代码
    7.执行脚本

    cnpm run start
    或者:npm run start
    或者:npm start

    七、babel-polyfill

    Babel默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如IteratorGeneratorSetMapsProxyReflectSymbolPromise等全局对象,以及一些定义在全局对象上的方(比如Object.assign)都不会转码。举例来说,ES6 在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

    1.安装

    $ npm install --save babel-polyfill

    2.在js文件中引用并且使用

    import 'babel-polyfill';
    或者:require('babel-polyfill');

    展开全文
  • npm 包管理工具

    2019-09-26 14:18:20
    npm 包管理工具-分清全局安装与本地安装 刚学习 npm 的时候,官方教程在介绍 -g 参数时是这么描述的:“加上 -g 参数是全局安装,否则本地安装”。这种说话说一半的感觉真的很让人讨厌,什么是全局什么是本地完全...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,388
精华内容 2,555
关键字:

npm包管理工具