webpack项目npm使用命令

1、检查电脑中是否安装npm

在这里插入图片描述
如上图所示,安装成功会返回这个版本号。

2、安装依赖

命令:

npm install

如果使用国内淘宝的可以使用如下命令:

cnpm install

情况1:如果我们从github上面下载一个项目后,项目中不会包含依赖,我们首先要npm install一下安装依赖。
情况2:当我们在团队合作开发项目时,有其他人使用了某个依赖,我们拉取代码后运行会报错,提示缺少某个依赖,此刻我们就需要输入命令npm install进行安装依赖。

3、安装某个模块

命令:

npm install <模块名称>

比如我们要安装饿了么模块,可以使用:

npm i element-ui -S

注释:install 可以简写为i,如果写全npm install element-ui也是一样的,-S表示添加到package.json中,如果单纯使用npm install是不会把模块添加到package.json文件中的。

我们在package.json文件中可以查看我们已经安装的依赖,如下图:
在这里插入图片描述

‘-- sava-dev’ 用法说明

注意使用npm install 、npm install --save 和 npm install --save-dev的区别:
1、三者都会本地安装包到项目的node_modules目录中,区别在于对项目package.json的修改,npm install不会修改package.json,而后两者会将依赖添加进package.json,后两者的区别请看下文循序渐进。
2、指定依赖包取决于你的项目,你需要在package.json 文件中列出你需要使用的包,有两种包可以选择:
“dependencies”: 这些包都是你的应用程序在生产环境中所需要的。
“devDepedencies”:这些包只是在开发和测试中需要的。

你可以手动编辑你的package.json。你需要在包的dependencies 对象中创建一个属性用来指出你需要添加的依赖。 例如下面的项目中,在主要生产环境中使用包my_dep的版本1.0.0,而在在开发环境中使用包 my_test_framework 的3.1.0版本。

–save 和–save-dev下载标签:

  • 他们表面上的区别是–save 会把依赖包名称添加到 package.json 文件 dependencies 键下,–save-dev 则添加到 package.json 文件 devDependencies 键下.
  • dependencies是运行时依赖,devDependencies是开发时的依赖。即devDependencies 下列出的模块,是我们开发时用的

比如 我们安装 js的压缩包gulp-uglify 时,我们采用的是 “npm install gulp-uglify --save-dev”命令安装,因为我们在发布后用不到它,而只是在我们开发才用到它。dependencies 下的模块,则是我们发布后还需要依赖的模块,譬如像jQuery库或者Angular框架类似的,我们在开发完后后肯定还要依赖它们,否则就运行不了。
正常使用npm install时,会下载dependencies和devDependencies中的模块,当使用npm install --production或者注明NODE_ENV变量值为production时,只会下载dependencies中的模块。

如我这里有一个项目,里面的package.json内容如下:
在这里插入图片描述
上图中2区域显示的是生产环境需要用到的依赖,3区域显示的是开发测试环境用到的依赖。
在1区域的scripts中有两个字段分别是build和dev,它标识着我们运行的时候使用什么命令来跑。
我们使用命令标识运行代码:

npm run dev

4、webpack打包方法:

我们要发布到服务器上可以使用如下命令进行打包,生成文件直接上传到服务器上。

npm run build

打包后会生成一个dist文件夹,所有生成的文件都会保存在dist文件夹中。

5、卸载模块:

npm uninstall

比如:
如卸载开发版本的模块
npm uninstall gulp --save-dev

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值