https://blog.csdn.net/playboyanta123/article/details/78349034(原文)

目前大多数基于vue的项目都是用vue-cli 创建的。当创建项目完成后,我们进入到项目目录,启动cmd命令窗口,输入npm install,它就会安装一堆东西(依赖),然后再输入npm run dev, 我们就可以看到网页了,整个项目启动成功。这就是npm 最强大的地方,只使用简单的两个命令,我们就能够快速地在本地启动一个项目。

  npm install 就是安装模块,npm run dev  就是执行npm script中的命令。当我们执行npm命令的时候,它到哪里去找,这就要说到每个node项目中都有的核心文件package.json 文件。

  项目开始时,我们就要建立这个文件。假设我们要创建一个node 项目,我们会新建一个文件夹命名node, 这时我们就要创建package.json文件。进入node 文件夹,你可以手动创建,就和创建一个txt文件一样,但我们一般都会使用命令创建,打开cmd 窗口,输入npm init, 这时你要回答几个问题,如name,version 等,输入内容,一路回车键,当你输入yes的时候,package.json 创建成功,你的文件夹中多了这个文件。

  其中有几个字段比较重要:

  name 项目名称, 你可能在项目中使用过 var express = require(‘express’), require 函数后面的参数,就是package.json 中的name字段,所以这个name一定要简短,且不能有大写,这是规定。

  version版本号:安装一个模块的时候, 你可能指定过特定的版本号,npm install express @4.13.2, 版本号4.13.2 就是我们这里的version。版本号有三个组成部分,4:表示的是大版本,一般是重大升级。13:表示的是小版本, 在大版本的基础进行的小的更新,如某个功能废弃了,新增了那个功能。2: 对该版本进行补丁,主要是版本bug的修复。

  script: 我们在命令行中执行的所有命令都写在这个地方,然后用 npm run 去执行这个命令。

  项目初始完成后,我们就可以进行项目开发。在开发过程中我们都会用到一些第三方库和 框架,尤其是node 开发, 因为它提供的API 有点底层. 如果想用第三方的东西,就要事先安装。上面说到 安装用的命令是npm install。 npm install express --save  --save 是什么意思?--save表示,我们安装模块的时候,同时把它写到package.json 文件中。这时打开package.json 文件,我们看到多了一个dependencies字段,它包括了我们刚安装的express. node中有些es6/es7 的语法不支持,我们使用的时候,就需要进行转换。这时安装babel. npm install babel-cli babel-preset-es2015 --save–dev  --save-dev 又是什么,它也表示安装依模块的时候,把它写到package.json中,不过它写入的不是dependencies, 而是devDependencies中。

  devDependencies 和dependencies 有什么区别?dependencies: 是项目运行时的依赖,就是程序上线后仍然需要依赖,比如express, 我们程序就是用express 写的,如果没有express, 我们的程序根本无法运行,更直白一点,dependencies 就是我们在程序开发的过程中手动require的模块。进行express 开发时,server.js中,都会写  var express  = require(‘express’), 我们程序直接依赖,所以是dependencies.

  devDependencies, 开发依赖,就是我们在开发过程中需要的依赖。比如babel, 它只负责转换es6+ 到es5, 转换完成后,我们只要转换后的代码,上线的时候,直接把转换后的代码部署上线,不需要bebal.  这就是开发依赖,只在开发时候起作用, 上线不需要。其实就是我们在使用webpack开发时,它配置文件里所有的依赖,都是开发依赖。

  无论devDependencies还是dependencies中,安装的模块版本号前面还有符号^, 其实这里还有很多符号也可以无符号,符号主要是限定版本。

  "express": "4.15.2" 版本号前面什么符号都没有,它表示固定版本,安装版本时,只会安装这个指定的版本。

  "express": "~4.15.2",版本号前面有符号~,它表示安装4.15.x 的版本,只x>3 就可以。在这里,我们express指定是4.15.2 版本,当我们npm install 安装的时候,它可能在项目中安装4.15.5或者4.15.6 版本。

  "express": "^4.15.2" , 版本号前面有符号^, 它表示可以安装4.x.x 的版本,只要中间的x  大于15就可以。

  >=4.15.3  版本号前面有符号>=, 它安装大于我们指定的版本,就可以。

  有时还看到一个*, 表示安装最新版本。

  版本号一定要注意,因为有些框架和库在进行版本升级的时候,向后兼容性必较差,容易引起代码冲突。但npm install 进行安装的时候,它默认是^ 符号,如果不符合我们要求,我们可以对package.json 进行手动修改,如 把^号改成~, 或直接去掉符号, package.json文件,只是一个文件, 我们可以手动地进行任何修改。

  最后再说一下package.json 中的scripts. 这个字段主要用于运行命令。我们用es6 写一个hello World项目体验下。在node文件夹中新建index.js

import express from "express";
let app = express();

app.get('/', (req,res)=> {
res.send("hello World")
})
app.listen(8080)

  由于node 不支持 import 命令,所以要把它转成require 的形式,这要用到babel 命令: babel index.js –o server.js,由于babel-cli  是安装到本地的,所以不能全局使用,那么这个命令写在什么地方?就是写在scripts 中,

  在scripts中的命令,都要用npm run 命令名启动。这时在命令行中输入npm run build,可以看到目录中多了一个server.js文件,再在命令行中输入node server, 就可以启动服务器。浏览器地址栏中输入localhost:8080, 看到hello world.

  这里我们在命令行中输入了两次命令,其实可以把这两个命令合并到 一个命令中,修改scripts 中的build 如下, 直接npm run build  就可以启动服务器。

"build": "babel index.js -o server.js && node server"
  npm 也可以做部分的任务自动化。

  整个package.json文件如下:

{
"name": "node",
"version": "1.0.0",
"description": "node project",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel index.js -o server.js && node server"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.15.2"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1"
}
}
-----------

(自用 )npm --save和--save-dev区别的更多相关文章

  1. npm install 插件 --save与 --save -dev的区别

    npm i 插件   ,会把插件安装到node_modules目录中,不会修改package.json, npm i 插件 --save  ,项目发布上线之后还会依赖用到的插件,没有这些插件,项目不能 ...

  2. npm --save-dev 和--save 参数的区别

    npm中的--save与--save-dev参数的区别 --save一般规定把产品运行时(或生产环境)需要的npm包存入到package.json的dependencies中: --save-dev则 ...

  3. npm安装包时 --save 和 --save-dev 的区别

    以npm 安装 vue为例 1.npm install vue: 会把vue包安装到node_modules目录中: 不会修改package.json文件: 之后运行npm install命令时,不会 ...

  4. npm 命令 --save 和 --save-dev 的区别

    回顾 npm install 命令 我们在使用 npm install 安装模块的模块的时候 ,一般会使用下面这几种命令形式: 1 2 3 4 5 6 7 npm install moduleName ...

  5. npm install, npm install -g, npm install --save, npm install --save-dev之间的区别

    1.npm install X 安装X到项目的node_modules文件夹 会修改package.json,在dependencies中写入依赖.(关于这一点,网上的大部分文章都是说,不会修改pac ...

  6. 关于npm --save还是-save的横岗数量的细节的记录

    最近又开始鼓捣npm了,所以得稍微记录一下. 首先是npm install xxx --save 和 npm install xxx -save这两的区别(注意加粗的部分,横杠数不一样).当我搜索-- ...

  7. node-sass:npm install node-sass --save

    从git上拉下来的项目,要先安装依赖, 再运行. 缺少node-sass:npm install node-sass --save

  8. 了解 npm install -S -D 的区别,看这篇就完事了

    一.npm install -S -D 的区别 npm install module_name -S 即 npm install module_name --save 写入dependencies n ...

  9. npm -g -D -s的区别

    npm install module-name 全局安装 npm install module-name -D 即 npm install module-name -save-dev  保存到devD ...

  10. npm i -S -D -g 区别

    npm install 本身就有一个别名 npm i npm i module_name -S    即    npm install module_name --save     写入depende ...

随机推荐

  1. 【弱省胡策】Round #5 Count

    [弱省胡策]Round #5 Count 太神仙了. \(DP\)做法 设\(f_{n,m,d,k}\)表示\(n*m\)的矩阵,填入第\(k\)个颜色,并且第\(k\)个颜色最少的一列上有\(d\) ...

  2. WPF自定义控件(三)の扩展控件

    扩展控件,顾名思义就是对已有的控件进行扩展,一般继承于已有的原生控件,不排除继承于自定义的控件,不过这样做意义不大,因为既然都自定义了,为什么不一步到位呢,有些不同的需求也可以通过此来完成,不过类似于 ...

  3. Google Colab 基本操作

    ## 上传 from google.colab import files uploaded = files.upload() for fn in uploaded.keys(): print('Use ...

  4. 深度学习之Attention Model(注意力模型)

    1.Attention Model 概述 深度学习里的Attention model其实模拟的是人脑的注意力模型,举个例子来说,当我们观赏一幅画时,虽然我们可以看到整幅画的全貌,但是在我们深入仔细地观 ...

  5. D. Diverse Garland

    题意:灯有三种颜色R,G,B.只要同一种颜色相邻就不可以.问最少需要换几次,可以使在一串灯中没有相邻灯的颜色相同. 思路:贪心思路:我们知道一个程序都是要子阶段,然后子阶段各个组合起来形成这个程序.那 ...

  6. 【angularjs】使用angular搭建项目,实现隔行换色

    描叙:使用ng-class实现每隔3行换色 代码: <!DOCTYPE html> <html ng-app="myApp"> <head> & ...

  7. 转发 .Net平台下ActiveMQ入门实例 https://www.cnblogs.com/madyina/p/4121458.html

    1.ActiveMQ简介 先分析这么一个场景:当我们在网站上购物时,必须经过,下订单.发票创建.付款处理.订单履行.航运等.但是,当用户下单后,立即跳转到“感谢那您的订单” 页面.不仅如此,若果没有延 ...

  8. go第三方日志系统-seelog-使用文档

    参考:https://godoc.org/github.com/cihub/seelog 导入方式: import "github.com/cihub/seelog" 包seelo ...

  9. hadoop学习笔记肆--元数据管理机制

    1.首先,认识几个名词 (1).NameNode中读.写.以及DataNode映射等信息叫做“元数据” ,NameNode元数据存放位置有.内存.fsimage.edits log三个位置. (2). ...

  10. SWAP_JOIN_INPUTS Oracle Hint(处理hash join强制大表(segment_size大)作为被驱动表)

    SWAP_JOIN_INPUTS Oracle Hint(处理hash join强制大表(segment_size大)作为被驱动表) swap_join_inputs是针对哈希连接的hint,它的含义 ...