Home  >  Article  >  Web Front-end  >  npm 模块管理器_html/css_WEB-ITnose

npm 模块管理器_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:45:571620browse

目录

简介

npm有两层含义。一层含义是Node.js的开放式模块登记和管理系统,网址为 http://npmjs.org。另一层含义是Node.js默认的模块管理器,是一个命令行下的软件,用来安装和管理node模块。

npm不需要单独安装。在安装node的时候,会连带一起安装npm。但是,node附带的npm可能不是最新版本,最好用下面的命令,更新到最新版本。

$ npm install npm@latest -g

上面的命令之所以最后一个参数是npm,是因为npm本身也是Node.js的一个模块。

Node安装完成后,可以用下面的命令,查看一下npm的帮助文件。

# npm命令列表$ npm help# 各个命令的简单用法$ npm -l

下面的命令分别查看npm的版本和配置。

$ npm -v$ npm config list -l

npm init

npm init用来初始化生成一个新的 package.json文件。它会向用户提问一系列问题,如果你觉得不用修改默认配置,一路回车就可以了。

如果使用了 -f(代表force)、 -y(代表yes),则跳过提问阶段,直接生成一个新的 package.json文件。

$ npm init -y

npm set

npm set用来设置环境变量。

$ npm set init-author-name 'Your name'$ npm set init-author-email 'Your email'$ npm set init-author-url 'http://yourdomain.com'$ npm set init-license 'MIT'

上面命令等于为 npm init设置了默认值,以后执行 npm init的时候, package.json的作者姓名、邮件、主页、许可证字段就会自动写入预设的值。这些信息会存放在用户主目录的 ~/.npmrc文件,使得用户不用每个项目都输入。如果某个项目有不同的设置,可以针对该项目运行 npm config。

$ npm set save-exact true

上面命令设置加入模块时, package.json将记录模块的确切版本,而不是一个可选的版本范围。

npm info

npm info命令可以查看每个模块的具体信息。比如,查看underscore模块的信息。

$ npm info underscore{ name: 'underscore',  description: 'JavaScript\'s functional programming helper library.', 'dist-tags': { latest: '1.5.2', stable: '1.5.2' }, repository: { type: 'git', url: 'git://github.com/jashkenas/underscore.git' }, homepage: 'http://underscorejs.org', main: 'underscore.js', version: '1.5.2', devDependencies: { phantomjs: '1.9.0-1' }, licenses: { type: 'MIT', url: 'https://raw.github.com/jashkenas/underscore/master/LICENSE' }, files: [ 'underscore.js', 'underscore-min.js', 'LICENSE' ], readmeFilename: 'README.md'}

上面命令返回一个JavaScript对象,包含了underscore模块的详细信息。这个对象的每个成员,都可以直接从info命令查询。

$ npm info underscore descriptionJavaScript's functional programming helper library.$ npm info underscore homepagehttp://underscorejs.org$ npm info underscore version1.5.2

npm search

npm search命令用于搜索npm仓库,它后面可以跟字符串,也可以跟正则表达式。

$ npm search <搜索词>

下面是一个例子。

$ npm search node-gyp// NAME                  DESCRIPTION// autogypi              Autogypi handles dependencies for node-gyp projects.// grunt-node-gyp        Run node-gyp commands from Grunt.// gyp-io                Temporary solution to let node-gyp run `rebuild` under…// ...

npm list

npm list命令以树型结构列出当前项目安装的所有模块,以及它们依赖的模块。

$ npm list

加上global参数,会列出全局安装的模块。

$ npm list -global

npm list命令也可以列出单个模块。

$ npm list underscore

npm install

基本用法

Node模块采用 npm install命令安装。

每个模块可以“全局安装”,也可以“本地安装”。“全局安装”指的是将一个模块安装到系统目录中,各个项目都可以调用。一般来说,全局安装只适用于工具模块,比如npm和grunt。“本地安装”指的是将一个模块下载到当前项目的 node_modules子目录,然后只有在项目目录之中,才能调用这个模块。

# 本地安装$ npm install <package name># 全局安装$ sudo npm install -global <package name>$ sudo npm install -g <package name>

npm install也支持直接输入Github代码库地址。

$ npm install git://github.com/package/path.git$ npm install git://github.com/package/path.git#0.1.0

安装之前, npm install会先检查, node_modules目录之中是否已经存在指定模块。如果存在,就不再重新安装了,即使远程仓库已经有了一个新版本,也是如此。

如果你希望,一个模块不管是否安装过,npm 都要强制重新安装,可以使用 -f或 --force参数。

$ npm install <packageName> --force

如果你希望,所有模块都要强制重新安装,那就删除 node_modules目录,重新执行 npm install。

$ rm -rf node_modules$ npm install

安装不同版本

install命令总是安装模块的最新版本,如果要安装模块的特定版本,可以在模块名后面加上@和版本号。

$ npm install sax@latest$ npm install sax@0.1.1$ npm install sax@">=0.1.0 <0.2.0"

如果使用 --save-exact参数,会在package.json文件指定安装模块的确切版本。

$ npm install readable-stream --save --save-exact

install命令可以使用不同参数,指定所安装的模块属于哪一种性质的依赖关系,即出现在packages.json文件的哪一项中。

  • –save:模块名将被添加到dependencies,可以简化为参数 -S。
  • –save-dev: 模块名将被添加到devDependencies,可以简化为参数 -D。

$ npm install sax --save$ npm install node-tap --save-dev# 或者$ npm install sax -S$ npm install node-tap -D

如果要安装beta版本的模块,需要使用下面的命令。

# 安装最新的beta版$ npm install <module-name>@beta (latest beta)# 安装指定的beta版$ npm install <module-name>@1.3.1-beta.3

npm install默认会安装dependencies字段和devDependencies字段中的所有模块,如果使用production参数,可以只安装dependencies字段的模块。

$ npm install --production# 或者$ NODE_ENV=production npm install

一旦安装了某个模块,就可以在代码中用require命令调用这个模块。

var backbone = require('backbone')console.log(backbone.VERSION)

避免系统权限

默认情况下,Npm全局模块都安装在系统目录(比如 /usr/local/lib/),普通用户没有写入权限,需要用到 sudo命令。这不是很方便,我们可以在没有root权限的情况下,安装全局模块。

首先,在主目录下新建配置文件 .npmrc,然后在该文件中将 prefix变量定义到主目录下面。

prefix = /home/yourUsername/npm

然后在主目录下新建 npm子目录。

$ mkdir ~/npm

此后,全局安装的模块都会安装在这个子目录中,npm也会到 ~/npm/bin目录去寻找命令。

最后,将这个路径在 .bash_profile文件(或 .bashrc文件)中加入PATH变量。

export PATH=~/npm/bin:$PATH

npm update,npm uninstall

npm update命令可以更新本地安装的模块。

# 升级当前项目的指定模块$ npm update [package name]# 升级全局安装的模块$ npm update -global [package name]

它会先到远程仓库查询最新版本,然后查询本地版本。如果本地版本不存在,或者远程版本较新,就会安装。

使用 -S或 --save参数,可以在安装的时候更新 package.json里面模块的版本号。

// 更新之前的package.jsondependencies: {  dep1: "^1.1.1"}// 更新之后的package.jsondependencies: {  dep1: "^1.2.2"}

注意,从npm v2.6.1 开始, npm update只更新顶层模块,而不更新依赖的依赖,以前版本是递归更新的。如果想取到老版本的效果,要使用下面的命令。

$ npm --depth 9999 update

npm uninstall命令,卸载已安装的模块。

$ npm uninstall [package name]# 卸载全局模块$ npm uninstall [package name] -global

npm run

npm不仅可以用于模块管理,还可以用于执行脚本。 package.json文件有一个 scripts字段,可以用于指定脚本命令,供npm直接调用。

{  "name": "myproject",  "devDependencies": {    "jshint": "latest",    "browserify": "latest",    "mocha": "latest"  },  "scripts": {    "lint": "jshint **.js",    "test": "mocha test/"  }}

上面代码中, scripts字段指定了两项命令 lint和 test。命令行输入 npm run-script lint或者 npm run lint,就会执行 jshint **.js,输入 npm run-script test或者 npm run test,就会执行 mocha test/。 npm run是 npm run-script的缩写,一般都使用前者,但是后者可以更好地反应这个命令的本质。

npm run命令会自动在环境变量 $PATH添加 node_modules/.bin目录,所以 scripts字段里面调用命令时不用加上路径,这就避免了全局安装NPM模块。

npm内置了两个命令简写, npm test等同于执行 npm run test, npm start等同于执行 npm run start。

npm run会创建一个Shell,执行指定的命令,并临时将 node_modules/.bin加入PATH变量,这意味着本地模块可以直接运行。

举例来说,你执行ESLint的安装命令。

$ npm i eslint --save-dev

运行上面的命令以后,会产生两个结果。首先,ESLint被安装到当前目录的 node_modules子目录;其次, node_modules/.bin目录会生成一个符号链接 node_modules/.bin/eslint,指向ESLint模块的可执行脚本。

然后,你就可以在 package.json的 script属性里面,不带路径的引用 eslint这个脚本。

{  "name": "Test Project",  "devDependencies": {    "eslint": "^1.10.3"  },  "scripts": {    "lint": "eslint ."  }}

等到运行 npm run lint的时候,它会自动执行 ./node_modules/.bin/eslint .。

如果直接运行 npm run不给出任何参数,就会列出 scripts属性下所有命令。

$ npm runAvailable scripts in the user-service package:  lint     jshint **.js  test mocha test/

下面是另一个 package.json文件的例子。

"scripts": {  "watch": "watchify client/main.js -o public/app.js -v",  "build": "browserify client/main.js -o public/app.js",  "start": "npm run watch & nodemon server.js",  "test": "node test/all.js"},

上面代码在 scripts项,定义了四个别名,每个别名都有对应的脚本命令。

$ npm run watch$ npm run build$ npm run start$ npm run test

其中, start和 test属于特殊命令,可以省略 run。

$ npm start$ npm test

如果希望一个操作的输出,是另一个操作的输入,可以借用Linux系统的管道命令,将两个操作连在一起。

"build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js"

但是,更方便的写法是引用其他 npm run命令。

"build": "npm run build-js && npm run build-css"

上面的写法是先运行 npm run build-js,然后再运行 npm run build-css,两个命令中间用 &&连接。如果希望两个命令同时平行执行,它们中间可以用 &连接。

下面是一个流操作的例子。

"devDependencies": {  "autoprefixer": "latest",  "cssmin": "latest"},"scripts": {  "build:css": "autoprefixer -b 'last 2 versions' < assets/styles/main.css | cssmin > dist/main.css"}

写在 scripts属性中的命令,也可以在 node_modules/.bin目录中直接写成bash脚本。下面是一个bash脚本。

#!/bin/bashcd site/mainbrowserify browser/main.js | uglifyjs -mc > static/bundle.js

假定上面的脚本文件名为build.sh,并且权限为可执行,就可以在scripts属性中引用该文件。

"build-js": "bin/build.sh"

参数

npm run命令还可以添加参数。

"scripts": {  "test": "mocha test/"}

上面代码指定 npm test,实际运行 mocha test/。如果要通过 npm test命令,将参数传到mocha,则参数之前要加上两个连词线。

$ npm run test -- anothertest.js# 等同于$ mocha test/ anothertest.js

上面命令表示,mocha要运行所有 test子目录的测试脚本,以及另外一个测试脚本 anothertest.js。

npm run本身有一个参数 -s,表示关闭npm本身的输出,只输出脚本产生的结果。

// 输出npm命令头$ npm run test// 不输出npm命令头$ npm run -s test

scripts脚本命令最佳实践

scripts字段的脚本命令,有一些最佳实践,可以方便开发。首先,安装 npm-run-all模块。

$ npm install npm-run-all --save-dev

这个模块用于运行多个 scripts脚本命令。

# 继发执行$ npm-run-all build:html build:js# 等同于$ npm run build:html && npm run build:js# 并行执行$ npm-run-all --parallel watch:html watch:js# 等同于$ npm run watch:html & npm run watch:js# 混合执行$ npm-run-all clean lint --parallel watch:html watch:js# 等同于$ npm-run-all clean lint$ npm-run-all --parallel watch:html watch:js# 通配符$ npm-run-all --parallel watch:*

(1)start脚本命令

start脚本命令,用于启动应用程序。

"start": "npm-run-all --parallel dev serve"

上面命令并行执行 dev脚本命令和 serve脚本命令,等同于下面的形式。

$ npm run dev & npm run serve

如果start脚本没有配置, npm start命令默认执行下面的脚本,前提是模块的根目录存在一个server.js文件。

$ node server.js

(2)dev脚本命令

dev脚本命令,规定开发阶段所要做的处理,比如构建网页资源。

"dev": "npm-run-all dev:*"

上面命令用于继发执行所有 dev的子命令。

"predev:sass": "node-sass --source-map src/css/hoodie.css.map --output-style nested src/sass/base.scss src/css/hoodie.css"

上面命令将sass文件编译为css文件,并生成source map文件。

"dev:sass": "node-sass --source-map src/css/hoodie.css.map --watch --output-style nested src/sass/base.scss src/css/hoodie.css"

上面命令会监视sass文件的变动,只要有变动,就自动将其编译为css文件。

"dev:autoprefix": "postcss --use autoprefixer --autoprefixer.browsers \"> 5%\" --output src/css/hoodie.css src/css/hoodie.css"

上面命令为css文件加上浏览器前缀,限制条件是只考虑市场份额大于5%的浏览器。

(3)serve脚本命令

serve脚本命令用于启动服务。

"serve": "live-server dist/ --port=9090"

上面命令启动服务,用的是 live-server模块,将服务启动在9090端口,展示 dist子目录。

live-server模块有三个功能。

  • 启动一个HTTP服务器,展示指定目录的 index.html文件,通过该文件加载各种网络资源,这是 file://协议做不到的。
  • 添加自动刷新功能。只要指定目录之中,文件有任何变化,它就会刷新页面。
  • npm run serve命令执行以后,自动打开浏览器。、

以前,上面三个功能需要三个模块来完成: http-server、 live-reload和 opener,现在只要 live-server一个模块就够了。

(4)test脚本命令

test脚本命令用于执行测试。

"test": "npm-run-all test:*","test:lint": "sass-lint --verbose --config .sass-lint.yml src/sass/*"

上面命令规定,执行测试时,运行 lint脚本,检查脚本之中的语法错误。

(5)prod脚本命令

prod脚本命令,规定进入生产环境时需要做的处理。

"prod": "npm-run-all prod:*","prod:sass": "node-sass --output-style compressed src/sass/base.scss src/css/prod/hoodie.min.css","prod:autoprefix": "postcss --use autoprefixer --autoprefixer.browsers "> 5%" --output src/css/prod/hoodie.min.css src/css/prod/hoodie.min.css"

上面命令将sass文件转为css文件,并加上浏览器前缀。

(6)help脚本命令

help脚本命令用于展示帮助信息。

"help": "markdown-chalk --input DEVELOPMENT.md"

上面命令之中, markdown-chalk模块用于将指定的markdown文件,转为彩色文本显示在终端之中。

(7)docs脚本命令

docs脚本命令用于生成文档。

"docs": "kss-node --source src/sass --homepage ../../styleguide.md"

上面命令使用 kss-node模块,提供源码的注释生成markdown格式的文档。

pre- 和 post- 脚本

npm run为每条命令提供了 pre-和 post-两个钩子(hook)。以 npm run lint为例,执行这条命令之前,npm会先查看有没有定义prelint和postlint两个钩子,如果有的话,就会先执行 npm run prelint,然后执行 npm run lint,最后执行 npm run postlint。

{  "name": "myproject",  "devDependencies": {    "eslint": "latest"    "karma": "latest"  },  "scripts": {    "lint": "eslint --cache --ext .js --ext .jsx src",    "test": "karma start --log-leve=error karma.config.js --single-run=true",    "pretest": "npm run lint",    "posttest": "echo 'Finished running tests'"  }}

上面代码是一个 package.json文件的例子。如果执行 npm test,会按下面的顺序执行相应的命令。

  1. pretest
  2. test
  3. posttest

如果执行过程出错,就不会执行排在后面的脚本,即如果prelint脚本执行出错,就不会接着执行lint和postlint脚本。

下面是一个例子。

{  "test": "karma start",  "test:lint": "eslint . --ext .js --ext .jsx",  "pretest": "npm run test:lint"}

上面代码中,在运行 npm run test之前,会自动检查代码,即运行 npm run test:lint命令。

下面是一些常见的 pre-和 post-脚本。

  • prepublish:发布一个模块前执行。
  • postpublish:发布一个模块后执行。
  • preinstall:用户执行 npm install命令时,先执行该脚本。
  • postinstall:用户执行 npm install命令时,安装结束后执行该脚本,通常用于将下载的源码编译成用户需要的格式,比如有些模块需要在用户机器上跟本地的C++模块一起编译。
  • preuninstall:卸载一个模块前执行。
  • postuninstall:卸载一个模块后执行。
  • preversion:更改模块版本前执行。
  • postversion:更改模块版本后执行。
  • pretest:运行 npm test命令前执行。
  • posttest:运行 npm test命令后执行。
  • prestop:运行 npm stop命令前执行。
  • poststop:运行 npm stop命令后执行。
  • prestart:运行 npm start命令前执行。
  • poststart:运行 npm start命令后执行。
  • prerestart:运行 npm restart命令前执行。
  • postrestart:运行 npm restart命令后执行。

对于最后一个 npm restart命令,如果没有设置 restart脚本, prerestart和 postrestart会依次执行stop和start脚本。

另外,不能在 pre脚本之前再加 pre,即 prepretest脚本不起作用。

注意,即使Npm可以自动运行 pre和 post脚本,也可以手动执行它们。

$ npm run prepublish

下面是 post install的例子。

{  "postinstall": "node lib/post_install.js"}

上面的这个命令,主要用于处理从Git仓库拉下来的源码。比如,有些源码是用TypeScript写的,可能需要转换一下。

下面是 publish钩子的一个例子。

{  "dist:modules": "babel ./src --out-dir ./dist-modules",  "gh-pages": "webpack",  "gh-pages:deploy": "gh-pages -d gh-pages",  "prepublish": "npm run dist:modules",  "postpublish": "npm run gh-pages && npm run gh-pages:deploy"}

上面命令在运行 npm run publish时,会先执行Babel编译,然后调用Webpack构建,最后发到Github Pages上面。

以上都是npm相关操作的钩子,如果安装某些模块,还能支持Git相关的钩子。下面以 husky模块为例。

$ npm install husky --save-dev

安装以后,就能在 package.json添加 precommit、 prepush等钩子。

{    "scripts": {        "lint": "eslint yourJsFiles.js",        "precommit": "npm run test && npm run lint",        "prepush": "npm run test && npm run lint",        "...": "..."    }}

类似作用的模块还有 pre-commit、 precommit-hook等。

内部变量

scripts字段可以使用一些内部变量,主要是package.json的各种字段。

比如,package.json的内容是 {"name":"foo", "version":"1.2.5"},那么变量 npm_package_name的值是foo,变量 npm_package_version的值是1.2.5。

{  "scripts":{    "bundle": "mkdir -p build/$npm_package_version/"  }}

运行 npm run bundle以后,将会生成 build/1.2.5/子目录。

config字段也可以用于设置内部字段。

  "name": "fooproject",  "config": {    "reporter": "xunit"  },  "scripts": {    "test": "mocha test/ --reporter $npm_package_config_reporter"  }

上面代码中,变量 npm_package_config_reporter对应的就是reporter。

通配符

npm的通配符的规则如下。

  • *匹配0个或多个字符
  • ?匹配1个字符
  • [...]匹配某个范围的字符。如果该范围的第一个字符是 !或 ^,则匹配不在该范围的字符。
  • !(pattern|pattern|pattern)匹配任何不符合给定的模式
  • ?(pattern|pattern|pattern)匹配0个或1个给定的模式
  • +(pattern|pattern|pattern)匹配1个或多个给定的模式
  • *(a|b|c)匹配0个或多个给定的模式
  • @(pattern|pat*|pat?erN)只匹配给定模式之一
  • **如果出现在路径部分,表示0个或多个子目录。

npm link

开发Npm模块的时候,有时我们会希望,边开发边试用。但是,常规情况下,使用一个模块,需要将其安装到 node_modules目录之中,这对于开发中的模块,显然非常不方便。 npm link就能起到这个作用,建立一个符号链接,在全局的 node_modules目录之中,生成一个符号链接,指向模块的本地目录。

为了理解 npm link,请设想这样一个场景。你开发了一个模块 myModule,目录为 src/myModule,你自己的项目 myProject要用到这个模块,项目目录为 src/myProject。每一次,你更新 myModule,就要用 npm publish命令发布,然后切换到项目目录,使用 npm update更新模块。这样显然很不方便,如果我们可以从项目目录建立一个符号链接,直接连到模块目录,就省去了中间步骤,项目可以直接使用最新版的模块。

首先,在模块目录( src/myModule)下运行 npm link命令。

src/myModule$ npm link

上面的命令会在Npm的全局模块目录内,生成一个符号链接文件,该文件的名字就是 package.json文件中指定的文件名。

/path/to/global/node_modules/myModule -> src/myModule

这个时候,已经可以全局调用 myModule模块了。但是,如果我们要让这个模块安装在项目内,还要进行下面的步骤。

切换到项目目录,再次运行 npm link命令,并指定模块名。

src/myProject$ npm link myModule

上面命令等同于生成了本地模块的符号链接。

src/myProject/node_modules/myModule -> /path/to/global/node_modules/myModule

然后,就可以在你的项目中,加载该模块了。

var myModule = require('myModule');

这样一来, myModule的任何变化,都可以直接反映在 myProject项目之中。但是,这样也出现了风险,任何在 myProject目录中对 myModule的修改,都会反映到模块的源码中。

如果你的项目不再需要该模块,可以在项目目录内使用 npm unlink命令,删除符号链接。

src/myProject$ npm unlink myModule

npm bin

npm bin命令显示相对于当前目录的,Node模块的可执行脚本所在的目录(即 .bin目录)。

# 项目根目录下执行$ npm bin./node_modules/.bin

npm adduser

npm adduser用于在npmjs.com注册一个用户。

$ npm adduserUsername: YOUR_USER_NAMEPassword: YOUR_PASSWORDEmail: YOUR_EMAIL@domain.com

npm publish

npm publish用于将当前模块发布到 npmjs.com。执行之前,需要向 npmjs.com申请用户名。

$ npm adduser

如果已经注册过,就使用下面的命令登录。

$ npm login

登录以后,就可以使用 npm publish命令发布。

$ npm publish

如果当前模块是一个beta版,比如 1.3.1-beta.3,那么发布的时候需要使用 tag参数。

$ npm publish --tag beta

如果发布私有模块,模块初始化的时候,需要加上 scope参数。只有npm的付费用户才能发布私有模块。

$ npm init --scope=<yourscope>

如果你的模块是用ES6写的,那么发布的时候,最好转成ES5。首先,需要安装Babel。

$ npm install --save-dev babel-cli@6 babel-preset-es2015@6

然后,在 package.json里面写入 build脚本。

"scripts": {  "build": "babel source --presets babel-preset-es2015 --out-dir distribution",  "prepublish": "npm run build"}

运行上面的脚本,会将 source目录里面的ES6源码文件,转为 distribution目录里面的ES5源码文件。然后,在项目根目录下面创建两个文件 .npmignore和 .gitignore,分别写入以下内容。

// .npmignoresource// .gitignorenode_modulesdistribution

npm deprecate

如果想废弃某个版本的模块,可以使用 npm deprecate命令。

$ npm deprecate my-thing@"< 0.2.3" "critical bug fixed in v0.2.3"

运行上面的命令以后,小于 0.2.3版本的模块的 package.json都会写入一行警告,用户安装这些版本时,这行警告就会在命令行显示。

npm owner

模块的维护者可以发布新版本。 npm owner命令用于管理模块的维护者。

# 列出指定模块的维护者$ npm owner ls <package name># 新增维护者$ npm owner add <user> <package name># 删除维护者$ npm owner rm <user> <package name>

参考链接

  • James Halliday, task automation with npm run: npm run命令(package.json文件的script属性)的用法
  • Keith Cirkel, How to Use npm as a Build Tool
  • justjs, npm link: developing your own npm modules without tears
  • hoodie-css, Development Environment Help
  • Stephan Bönnemann, How to make use of npm’s package distribution tags to create release channels
  • Alex Booker, How to Build and Publish ES6 npm Modules Today, with Babel
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn