npm简单介绍

安装

直接安装Node.js即可,安装完成之后重启电脑,然后成功

简单介绍

Node.js又是干嘛的?

JavaScript可以运行在哪里?浏览器对吧.现在我想在电脑上不借助浏览器直接使用JavaScript可以吗?

可以,Node.js就是这个作用,帮助你在电脑上直接使用JavaScript,所以Node.js是干嘛的?就是一个桥梁,让你可以在电脑上直接使用JavaScript

npm是干嘛的?

npm是一个包管理工具,我需要Jquery了,我去官网下载或者引用,我需要Bootstrap了我去官网下载或者引用,我需要Vue了.......

每一个都去官网自己下载或者找引用链接不麻烦?而且还有版本之间的依赖关系很复杂

npm帮你解决

简单操作

npm init

我习惯使用VS Code,新建一个目录,调出终端,cd 进入你这个目录.只需要输入

npm init -y

你会发现多出来一个package.json,这就是npm的初始化

npm Jquery

我需要Jquery,安装 i是install的缩写

npm i jquery

npm Vue

我需要Vue,安装

npm i vue

出现的node_modules

这个时候目录下出现的node_modules,打开看看,有两个包,Jquery和vue

package.json

这个时候再看看package.json

{
  "name": "y",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.4.1",
    "vue": "^2.6.11"
  }
}

dependencies里面有了包的依赖关系了

这个时候删除node_modules,不要包了,再执行

npm i

你会发现所有的包又下回来了,所以有package.json就一切ok

常用命令

# 初始化
npm init
# 根据package.json下载所有的包
npm i
# 下载包
npm i jquery
# 删除包
npm uninstall jquery
# 更新包
npm update jquery
# 使用旧版本
npm i jquery@3.3.0

安装webpack

因为js直接相互引用变量的问题,以及js暴露变量导致冲突覆盖问题,Node.js的模块化解决了这个问题.webpack可以对这种js进行转换,变成浏览器识别的js

全局安装

可以全局安装,这样哪个目录都可以使用

npm i webpack-cli -G

例如下面有两个js

var msg = "Vae";
module.exports = {msg:msg};

var msg = require('./b').msg
console.log('名字是: '+msg);

然后使用webpack打包,记得cd进入你的项目地址

webpack a.js -o  bundle.js

然后html引用bundle.js即可

局部安装

可以在项目中安装webpack,可能不同的项目的webpack版本是不一样的,cd进入目录,执行

npm i webpack-cli -D

然后使用webpack的时候,这样使用

node_modules/.bin/webpack a.js -o bunle.js