您好,欢迎访问一九零五行业门户网

npm 模块管理器_html/css_WEB-ITnose

目录
简介 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 # 全局安装$ sudo npm install -global $ sudo npm install -g
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 --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 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' 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,会按下面的顺序执行相应的命令。
pretest test 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=
如果你的模块是用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 # 新增维护者$ npm owner add # 删除维护者$ npm owner rm
参考链接 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
其它类似信息

推荐信息