Awesome npm resources and tips
npm is a package manager for the JavaScript programming language and comes bundled in the Node.js runtime.
Please read the contribution guidelines before contributing.
npm publish
.$ npm install --global npm
npm i
→ npm install
npm i -D
→ npm install --save-dev
npm t
→ npm test
npm it
→ npm install && npm test
npm r
→ npm uninstall
npm un
→ npm uninstall
npm up
→ npm update
Speed up your common npm tasks.
In your .zshrc
/.bashrc
:
alias ni='npm install'
alias nid='npm install --save-dev'
alias nig='npm install --global'
alias nt='npm test'
alias nit='npm install && npm test'
alias nk='npm link'
alias nr='npm run'
alias ns='npm start'
alias nf='npm cache clean && rm -rf node_modules && npm install'
alias nlg='npm list --global --depth=0'
By default npm adds packages you install to the dependencies
field in package.json (since v5). You can prevent this by specifying the --no-save
flag. You can add a package to devDependencies
with --save-dev
/-D
:
$ npm install --save-dev ava
You can easily run scripts using npm by adding them to the "scripts"
field in package.json and run them with npm run <script-name>
. Run npm run
to see available scripts. Binaries of locally install packages are made available in the PATH, so you can run them by name.
{
"name": "awesome-package",
"scripts": {
"cat": "cat-names"
},
"dependencies": {
"cat-names": "^1.0.0"
}
}
$ npm run cat
Max
All package.json properties are exposed as environment variables:
{
"name": "awesome-package",
"scripts": {
"name": "echo $npm_package_name"
}
}
$ npm run name
awesome-package
You can pass options to the command you are using in your npm script by adding -- --flag
like in the example below. The --
marks the end of options parsing, so npm run
will just ignore it and pass it to the command.
{
"name": "awesome-package",
"scripts": {
"xo": "xo",
"xo:fix": "npm run xo -- --fix",
}
}
Adding the -- --fix
option is like executing xo --fix
.
npm run
has a --silent
option which is especially useful when combining npm scripts.
Imagine you have a setup for linting your JavaScript files like the following:
{
"name": "awesome-package",
"scripts": {
"xo": "xo",
"xo:fix": "npm run xo --silent -- --fix",
}
}
Using the --silent
option reduces the output in the terminal. See this comparison.
npm comes with predefined lifecyle scripts which are excuted under specific conditions if they are defined in your package.json.
{
"name": "awesome-package",
"scripts": {
"prepublishOnly": "nsp check"
},
"devDependencies": {
"nsp": "^3.0.0"
}
}
This will be executed automatically before your npm package is published to the registry via npm publish
to check for known vulnerabilties in your dependencies.
Note: prepublishOnly is available since npm v4.0.0. See npm docs.
npm start
and npm test
npm start
and npm test
are also lifecycle scripts but are not executed automatically.
{
"name": "awesome-package",
"scripts": {
"start": "node server.js",
"test": "ava"
},
"devDependencies": {
"ava": "^1.0.0"
}
}
Therefore they can be executed simply with:
$ npm test
$ npm start
pre
and post
scriptsThese are special lifecycle scripts which can be used to run scripts automatically in sequence.
{
"name": "awesome-package",
"scripts": {
"pretest": "eslint .",
"test": "ava"
},
"devDependencies": {
"eslint": "^4.19.0",
"ava": "^1.0.0"
}
}
$ npm test
This will lint your files before running your tests. The tests will not run if linting fails. Or more generally spoken: the following script won’t be executed if one of the scripts running in sequence exits with an exit code other than 0.
Note: pre
and post
scripts can also be used for your custom npm scripts. So npm run foo
will also run prefoo
and postfoo
if defined.
npx
npm
comes bundled with npx
(Since v5.2.0) — a tool to execute package binaries. Each command is executed either from the local node_modules/.bin
directory, or from a central cache, installing any packages needed in order for <command>
to run.
{
"name": "awesome-package",
"dependencies": {
"cat-names": "^1.0.0"
}
}
If the binary is already installed, it will be executed from node_modules/.bin
.
$ npx cat-names
Max
But if the binary is missing, it will be installed first.
$ npx dog-names
npx: installed 46 in 3.136s
Bentley
With npx
(Comes bundled with npm v5.2.0 or newer) and the node-bin
package, you can easily try out code in different Node.js versions without having to use a version manager like nvm
, nave
, or n
.
$ npx --package=node-bin@6.11.0 -- node --version
v6.11.0
Sometimes it can be useful to have a local version of a package as a dependency. You can use npm link
to link one local package into another. Run npm link
in the package you want to use. This creates a global reference. Then go into your original package and run npm link <package-name>
to link in the other package.
$ cd rainbow
$ npm link
$ cd ../unicorn
$ npm link rainbow
You can now use rainbow
as a dependency in the unicorn
package.
npm supports using a shorthand for installing a package directly from a GitHub repo:
$ npm install sindresorhus/chalk
Let's target a specific commit as the main branch is a moving target:
$ npm install 'sindresorhus/chalk#51b8f32'
Specify either a commit SHA, branch, tag, or nothing.
You can also install Git dependencies with semver: (Requires npm v5 or newer)
$ npm install 'sindresorhus/chalk#semver:^2.0.0'
$ npm install chalk@1.0.0
$ npm ls --depth=0
Get help docs for a command:
$ npm help <command>
Example:
$ npm help install
Quickly get a standalone version of a package that is browserified and usable in the browser.
https://wzrd.in/standalone/<package-name>[@<version>]
Examples:
Great for prototyping, but download the file or use Browserify yourself for production.
^
mean in package.json versioning?下载: npm install vue-awesome-swiper@3.1.3 -S vue-awesome-swiper 参考网站 https://www.npmjs.com/package/vue-awesome-swiper 注意版本 ❓ 下载成功但是swiper 用不了 查阅 https://www.npmjs.com/package/vue-awesome-swiper 版本要对
vue2.0 npm install swiper vue-awesome-swiper --save 或者 npm install swiper@5.4.1 vue-awesome-swiper@4.1.1 --save main.js中添加 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper)
1.安装 npm install vue-awesome-swiper --save 2.main.js 导入 和 注册 //引入swiper import VueAwesomeSwiper from 'vue-awesome-swiper' //引入swiper 样式 import 'swiper/css/swiper.css' //注册插件 Vue.use(VueAwesomeSwiper)
1、安装 swiper4 npm install swiper vue-awesome-swiper --save 或指定swiper3 //直接安装版本3即可,自动会选择3.1.3版本 cnpm i vue-awesome-swiper@3 -S //或者手动指定 cnpm i vue-awesome-swiper@3.1.3 -S 2、引入模块 页面引入即可,没必要全局引入,很少所以页面
最近要做一个走马灯形式的效果,是多个卡片式的效果。于是,想到了 vue-awesome-swiper这个插件。这是插件是基于swiper的。 首先,安装插件 npm install swiper vue-awesome-swiper --save # or yarn add swiper vue-awesome-swiper 全局引入 import Vue from 'vue' import
大坑 因为swiper和vue-awesome-swiper的版本较多,如果使用最新的版本,或者两者版本差距较大,就容易掉进很多的坑里面,各种报错。切记,版本问题 "swiper": "^5.4.5", "vue-awesome-swiper": "^4.1.1", //这是我用得版本 首先,安装swiper和vue-awesome-swiper npm install swiper@5.4.5
//直接安装版本3即可,自动会选择3.1.3版本 npm i vue-awesome-swiper@3 -S //或者手动指定 npm i vue-awesome-swiper@3.1.3 -S //全局引入,在vue-page-base.js import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/dist/css/s
vue-awesome-swiper@4 在v2项目的模板 我在练习时常用的vue-awesome-swiper@4模板,欢迎补充! <template> <Swiper style="height: 100%" ref="mySwiper" :options="options"> <SwiperSlide v-for="(item, index) in bannerArr"
Awesome Awesome Node.js A curated list of awesome lists that are about or related to Node.js. Inspired by the awesome list thing, going deeper down the rabbit hole. �� Meta stuff about this awesome li
A curated list of awesome things related to Vite.js This awesome list is for Vite 2.x and onward. Vite 1.x's list is archived. Resources Official Resources 文档 GitHub Repo Release Notes Vue 3 Docs Awes
Awesome Python 是一个资源整理集合,由 vinta 发起和维护。内容包括:Web框架、网络爬虫、网络内容提取、模板引擎、数据库、数据可视化、图片处理、文本处理、自然语言处理、机器学习、日志、代码分析等。 这个系列没有推荐 Python 书籍、经典博文、交互教程,所以另外推荐:《25本免费的Python电子书》、《学习Python编程的11个(教程)资源》、《PythonMonk:Py
Font Awesome 是一个图标工具包。其已经被重新设计并从头构建。除此之外,还增加了一些功能,比如 icon font ligature、SVG 框架、流行的前端库(如 React)的官方 NPM 包,以及对新 CDN 的访问。Font Awesome 已扩展至 7,865 个图标。
awesome-android 收录了来自 github 或其他网站的关于 Android 的大部分库。
The Lithe Project Development Team Awesome CryptoNote A curated list of awesome CryptoNote open-source blockchains, resources, projects, and shiny other things related.Many projects are derived from f
Guidelines for Hacktoberfest 2021: About Hacktoberfest: Hacktoberfest is organised by DigitalOcean in partnership with Dev, Intel, DeepSource & Appwrite. It is a month-long celebration of open-source
Curated list of awesome neuroscience libraries, software and any content related to the domain. Neuroscience is the study of how the nervous system develops, its structure, and what it does. Neuroscie