乐趣区

关于javascript:npm工具nvmnpx工具的使用

jiezi

NPM 命令的应用

NPM 的性能：

  • 容许用户从 NPM 服务器下载他人编写的 第三方包 到本地应用。
  • 容许用户从 NPM 服务器下载并装置他人编写的 命令行程序 到本地应用。
  • 容许用户将本人编写的包或命令行程序上传到 NPM 服务器供他人应用。

NPM 下载

NPM 在 Node.V10 之后就自带了，不须要额定下载。

LTS 版本: Long Term Support（长期反对版本）

  • 官网网址：https://nodejs.org
  • 装置 npm 组件：https://www.npmjs.com

注：因为某些大家晓得的起因，须要更换为国内的镜像

当然，你能够先查看以后应用的镜像：npm config get registry

我以后应用的镜像是：https://registry.npmjs.org/

能够应用 npm config set registry https://registry.npm.taobao.org 更改镜像地址，当然也能够应用这个办法改回原来的地址。

装置 cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

装置实现之后就能够通过 cnpm 代替 npm 的所有命令

npm -v 用于检测 npm 是否装置胜利

包和模块的区别：

  • 模块只有能够通过 require('') 进行引入就是模块
  • 包必须要通过 package.json 进行形容

npm 插件的版本控制

语义化版本控制：简略来讲所有版本都有三个数字

  • 第一个数字是主板本，进行不兼容的 API 更改时，降级主板本。
  • 第二个数字是次版本，进行不兼容的 API 更改时，降级主板本。
  • 第三个数字是补丁版本，向后兼容的缺点修复时，降级补丁版本

npm 命令

npm 包的装置命令

  • 本地的安装包：应用npm install <package-name> 装置，并且搁置在 node_modules 文件夹中
  • 全局的安装包：npm install <package-name> -g 全局装置，并放在固定的地位。

通常所有软件包都应该本地装置，能够确保计算机中有数十个应用程序，如果须要，每个利用都能够运行不同的版本。更新全局安装包时，所有的我的项目都应用新的版本，可能导致保护上的噩梦，可能会毁坏原来的依赖项和兼容性等。

装置命令详解

示例：npm install gulp@3.9.1 --save-dev
性能：应用 npm 装置 gulp 的 3.9.1 版本版本
--save  示意装置在以后文件夹下，npm 5 之后的版本能够省略，能够整体简写为 -S
-dev    将装置的信息保留在 package.json 中，简写为：-D
--save-dev 会将其视为开发依赖项，增加到 devDependencies 列表
gulp@3.9.1 示意下载 3.9.1 版本的 gulp
npm install gulp@3.9.1 --sava-dev 的简写:npm i gulp@3.9.1 -S-D

卸载命令

npm uninstall <package-name> 卸载 node.js 指定的包

npm uninstall <package-name> -g 装置全局模块 -g 后进行全局模块的卸载

如果装置时应用 -S(即 –save)，卸载时必须增加 -S，移除在 package.json 中的援用

同理，应用 -D(–save-dev)，卸载时必须增加 -D

其余命令

命令（常用命令） 性能
npm list 列出当前工作区曾经装置模块
npm list -g 查看全局装置的所有模块，只查找次要模块
npm list -g --depth=0
npm root -g 查看全局模块的装置门路
如果应用 nvm 管理工具，地位可能会不同
npm init 创立 JSON 文件，初始化本地开发环境
npm update 降级当前目录下的我的项目的所有模块
npm search <key-word> 依照关键字，在网络上搜寻模块
npm view <package-name> 在网络中查看该插件的详情
npm view <package-name> version 查看该软件的最新版本
npm view <package-name> versions 查看该插件的所有版本
npm publish 公布模块

npm 插件的装置

PostCSS

npm install postcss-cli -g

PostCSS 是一个运行环境，用于应用 JavaScript 扭转 CSS 的环境

官网解释：A tool for transforming CSS with JavaScript

postcss-sprites

cnpm i postcss-sprites

将多张图片自动合成为一张图片（雪碧图 |sprites）

const sprites = require('postcss-sprites');
module.exports = {
    plugins :[
        cssnext,
        stylelint({
            "rules" : {"color-no-invalid-hex" true;}
        }),
        sprites({spritePath : './dist'})
    ]
}

postcss-cssnext

cnpm i postcss-cssnext

对 css 进行降级，反对更早的浏览器版本

const cssnext = require('postcss-cssnext');
module.exports = {
    plugins :[cssnext]
}

postcss-import

cnpm i postcss-import

对于多个 css 文件进行合并

const postcss = require('postcss-import');
module.exports = {
    plugins :[postcss]
}

autoprefixer

cnpm i autoprefixer

主动增加浏览器前缀，进行浏览器兼容

// 配置文件中引入
const autoprefixer = require('autoprefixer');
module.exports = {
    plugins :[
        autoprefixer({browsers : ['> 0%']// 对所有浏览器兼容
        })
    ]
}

stylelint

命令行装置cnpm i stylelint

进行 CSS 文本纠错

const cssnext = require('postcss-cssnext');
module.exports = {
    plugins :[
        cssnext,
        stylelint({
            "rules" : {"color-no-invalid-hex" true;}
        })
    ]
}

Animate.css

npm install animate.css --save

animate.css 是一些 CSS 动画的集成

cssnano

cnpm i cssnano

对于 css 进行压缩

const postcss = require('postcss-import');
module.exports = {
    plugins :[cssnano]
}

NVM 命令的应用

什么是 NVM

nvm 是用来 对 node 进行版本控制的工具

windows 上的 nvm 和 linux & MacOS 上的 nvm 工具不是一个我的项目，它们是两个团队做进去的货色。

nvm（Linux、Unix、OS X）的装置

https://github.com/creationix…

nvm(Windows) 装置：https://github.com/coreybutle…

常用命令

nvm install node & nvm install latest (装置最新版本的 node)

nvm list & nvm ls 以后所领有的 npm 版本

nvm use taobao 切换到淘宝镜像

cnpm install -g nvm 全局装置 nvm 命令

nvm -v 以后 nvm 工具的版本

nvm use 8.4.0 应用 8.4.0 版本的 node

nvm uninstall 版本号 卸载该版本的 node.js

NPX 工具

npx 是一个工具，能够主动寻找以后文件夹（node_modules）文件夹下的可执行插件，正确援用并且执行。并且如果以后文件夹下没有下载可执行插件，那就会在网络中寻找后，下载并且运行，在运行胜利后删除，利用这一个性，能够实现防止全局模块的装置。

命令的应用相似于原插件的执行办法，不过不须要 npm 进行装置：

npx cowsay hello world

能够和 node 特定版本联合，npx node@10 -v #10.18.1

npx uglify-js@3.1.0 // 同 npm 一样，能够通过 @指定应用的版本

可增加的参数

--no-install 强制应用本地模块

--ignore-existing 疏忽本地存在的模块

 npx --no-install http-server // 强制应用本地模块
 npx --ignore-existing create-react-app my-react-app // 疏忽本地存在的模块，而后生成 react app

-p 指定将要装置的模块

npx -p node@0.12.8 node -v 
npx -p lolcatjs -p cowsay "hello" // 能够通过 -p 指定多个不同的命令

-c 能够将所有命令都用 npx 解释，

npx -p lolcatjs -p cowsay 'cowsay hello | lolcatjs' // 报错
// 默认状况只有第一个可执行项会应用 npx 装置的模块，前面的可执行项还是会交给 Shell 解释。npx -p lolcatjs -p cowsay -c 'cowsay hello | lolcatjs' // 增加 -c 后将所有命令给 npx 解释，失常运行

将环境变量带入所要执行的命令

npm run env | grep npm_ // 能够用该命令查看提供以后我的项目的一些环境变量。npx -c 'echo"$npm_package_name"' // 该代码会输入以后我的项目的我的项目名

执行近程代码

npx 能够指定间接执行 git 下面的代码，前提是近程代码必须是一个模块，必须蕴含 package.json 和入口脚本。

用 npx 应用 live-server

应用npx http-server

退出移动版