>

详解Nodejs之npm&package.json,nodejsnpm

- 编辑:乐百家599手机首页 -

详解Nodejs之npm&package.json,nodejsnpm

详解Nodejs之npm&package.json,nodejsnpm

直白以来,作为前端开拓,在集团都以先写好页面,然后再跟后端合营,将数据填充前端页面中,不过一时自个儿闲来无事,也会看一些框架什么的,然后使用框架做个单页面应用啊,app什么的,那时候页面包车型地铁数量连接某个假数据,而至于数据央浼的有的就不能够做(因为未有后台嘛)。所以本身深感是时候学习一下node了,那对于笔者事后要学的webpack,前端工程化等也可以有一定帮助。
用作前端,因为反复用到gulp,webpack等工具,所以大家最常见到的是npm和package.json,所以先总括一下它们俩。

npm

初始化

$ npm init
or
$ npm init --y 

在做前端开采的时候,大家经常会用到创设工具,例如gulp,webpack等,为了让别人也能够涉足进去,大家供给告诉外人项目有个别什么注重包,然后令人家也设置同样的依靠包,而npm init发生的package.json正是用来记录大家项目中的注重的,一样的,在做node开辟的时候,也会用刀正视包,同样须要package.json记录。

在极端输入npm init会询问package.json的各个消息,进而确认。借使一切用到暗许值,能够平素在终点输入npm init --y快速生成package.json。

安装注重包

$ npm install <package name> <package name> ...

$ npm install <package name> -g

$ npm install <package name> --save

$ npm install <package name> --save-dev

$ npm install <pacakage name> --O //--save-optional -B: --save-bundle -E: --save-exact

npm install <package name> -g意味着全局安装,须要留心的是大局情势并不是将一个模块安装包安装为二个大局包的情趣,它并不意味着能够从别的地点通过require()来引用,-g的意义是将四个包安装为全局可用的可实践命令。那代表,全数通过-g安装的包都能够在终点以命令格局运营,比方gulp,webpack等。

--save--save-dev的分裂在于前面一个是生育意况中项目运行需求的注重,安装后被记录在package.json中的dependencies关键字下;而后人是开垦时候要求的借助,安装后被记录在devDependencies关键字下。

同样--O/B/E各自会被记录到对应的要害字下。

更新正视包

$ npm update

$ npm update -g

$ npm outdated

$ npm outdated -g

在项目目录下运作npm update可以荣升项目中所用重视到新型版本,而npm update -g则能够升官全局安装的借助包到最新版。

npm outdated用以检查模块是不是过时并列出。

卸载注重

$ npm uninstall <package name> <package name> ...

$ npm uninstall <package name> -g

$ npm uninstall <package name> --save

$ npm uninstall <package name> --save-dev

使用npm uninstall能够卸载依赖,可是卸载后,在package.json中的纪录并不会被剔除,要想在卸载信赖的同有时间删除在package.json中的纪录,须求在卸载的时候利用安装时的兼具的选项,譬喻,尽管设置时候使用了npm install <package name> --save则卸载的时候,同样选拔npm uninstall <pacakage name> --save,而只要选取了--save-dev,卸载时候也亟需加同样的选项。

行使自定义npm命令

在package.json中,有一个scripts要害字,只要求在该重大字内写入自定义命令以及对应实践的实际命令就可以。

"scripts":{
  "test": "nonde ./test.js",
  "dev": "gulp --gulpfile gulpfile-dev.js",
  "build": "gulp --gulpfile gulpfile-build.js"
}

地点的安顿中,只要大家在终极运营npm dev正是运营了gulp --gulpfile gulpfile-dev.js,那样就节约了大家在终点输入非常短的一段命令,特别便于。

其他

npm view <pacakage name>能够查阅包的package.json文件,借使只是看包的某些天性,在后面加上相应的key就可以,譬如npm v zepto version固然查看当前安装的zepto的版本,v是view的简写。

npm ls能够分析出脚下当前项目下能够通过模块路线找到的有着包,并转移重视树。

npm doc <package name>能够展开该注重包的官方网站,其实正是开辟了package.json中的homepage。

package.json文件

在运行npm init后会生成package.json文件,该公文用于记录项目中所用到的借助以及项目标布置新闻(比方名称、版本、许可证等)。npm install指令依据那些布局文件自动下载项目周转和开垦所急需的借助。

多个比较完整的package.json文件如下:

{
  "name": "project",
  "version": "1.0.0",
  "author": "张三",
  "description": "第一个node.js程序",
  "keywords":["node.js","javascript"],
  "repository": {
    "type": "git",
    "url": "https://path/to/url"
  },
  "license":"MIT",
  "engines": {"node": "0.10.x"},
  "bugs":{"url":"http://path/to/bug","email":"[email protected]"},
  "contributors":[{"name":"李四","email":"[email protected]"}],
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "latest",
    "mongoose": "~3.8.3"
  },
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0"
  }
}

在package.json中部分第一字的含义:

1.name:包名

2.version:版本号

3.description:包的描述

4.homepage:包的官方网址url

5.autor:包的撰稿人名字

6.contributors:包的其余进献者

7.dependencies:注重包的列表,使用npm install可以安装信赖包到node_medule目录下

8.repository:包代码寄放的地点,能够是git可能svn

9.keywords:关键字

10.scripts:脚本表明对象。它最首要被包管理器用来设置、编译、测量检验和卸载包,示比方下:

"scripts":{

  “install”:"install.js",

  "test":"test.js"

}

11.main:模块引进方法require()在引进包时,会预先检查这么些字段,并将其当作包中其余模块的输入,假若该字段子虚乌有,则node会检查目录下的index.js,index.node,index.json作为默许入口。

12.devDependencies:一些模块只在开采时须要依赖,配置那几个性子,能够唤起包的延续开荒者安装重视包

如上便是有关node中npm和package.json的下结论。希望对我们的读书抱有扶助,也可望我们多多扶助帮客之家。

name package name ...$ npm install package name -g$ npm install package name --save$ npm install package name --save-dev$ npm install pacakage name --O...

5.autor:包的撰稿人名字

6.npm script是怎么着?怎么样运用?

npm script允许在package.json中动用scripts字段定义脚本命令

"scripts" : {
      "test": "echo hello",
      "build": “npm install -g package”
}

实行npm run build命令就相当于施行npm install -g package命令。

难点7:npm script是怎么着?怎样使用?

npm script 是 package.json 里的壹脾质量,能够自定义命令,用 npm run xxx来实践
(假若 xxx 是 test 、start,则毫不加 run,因为那是 npm 内置的一声令下)
例如:

 "scripts": {
    "test":"mkdir abc" 
    "start": "touch def.html",
    "delete": "rm -r def.html"
  }

顶点里运营 npm test 就能成立abc文件夹
npm start 就能创建def.html文件
npm run delete 会删除def.html文件

11.main:模块引进方法require()在引进包时,会事先检查这些字段,并将其用作包中别的模块的输入,假若该字段不设有,则node会检查目录下的index.js,index.node,index.json作为暗中认可入口。

3.npm install --save app与 npm install --save-dev app有啥样界别?

先是要有别于dependencies和devDependencies。前面叁个是类别支付碰到必得的借助,后面一个是利于于项目利用支付的工具如脚手架工具、测量检验工具等。

一律:都会在项目下的node_modules目录下下载app

昨今不一致:在往package.json文件写信赖时
--save 会写在dependencies下
--save-dev 会写在devDependencies下

难点3: npm install --save app 与 npm install --save-dev app有怎样不相同?

  • npm install --save app
    项目运维正视:安装名字为 app 的包,并在 package.json 中增多到 dependencies 项目周转重视中去,发布之后人家会自动下载 app 正视
  • npm install --save-dev app
    付出依赖:安装名叫 app 的包,并在 package.json 中增多到 devDependencies 开拓重视中去,那一个 app 包依赖唯有开垦者自身使用,揭橥后外人用不到

您或者感兴趣的篇章:

  • nodejs npm package.json汉语文书档案
  • package.json文件配置详解

4.node_modules的搜索路径是怎么的?

在node.js中,模块分为内建立模型块,本地模块,node_module模块
当大家require三个模块时,先物色是不是为内建立模型块,然后是或不是为地面模块,末了查找是不是为node_module模块
当require的模块既不是内建立模型块,亦不是地点模块,且在当前目录中的node_module中也找不到时,就能向上查找上拔尖的node_module,一贯到根目录
当文件标志不以'./ ../'早先,则跳过本地模块查找,间接在node_module中查找。

主题材料1: 怎么着全局安装叁个 node 应用?

npm install -g xxx表示全局安装多个node包。

在做前端开荒的时候,我们平常会用到创设筑工程具,比方gulp,webpack等,为了让别人也得以涉足进去,大家要求报告外人项目有个别什么重视包,然后让别人也设置同样的信赖包,而npm init发生的package.json就是用来记录大家项目中的重视的,一样的,在做node开拓的时候,也会用刀注重包,同样必要package.json记录。

1.怎么样全局安装三个node应用?

npm install name -g

全局安装,应用被下载安装到全局目录中/usr/local/lib/node_modules

主题材料8: 使用 webpack 替换 入门-职责15中模块化使用的 requriejs

作用预览
代码

package.json文件

7.使用 webpack

代码地址

主题素材2: package.json 有怎样效果与利益?

package.json 是叁个 json 格式的公文,用来记录当前的 npm 包的连锁音信,如

{
  "name" : "underscore",//包的名字
  "version" : "1.1.6",//版本号
  "description" : "programming library.",//描述
  "homepage" : "",//主页
  "keywords" : [ "browser"],//关键词
  "author" : "Jeremy ",//作者
 "license" : 版权信息
  "dependencies" : [],//项目运行依赖,发布的时候,不需要发布依赖的包,只要发布其名字,别人下载的时候,会自动下载依赖的包。
  "devDependencies":[],//开发依赖,只有自己本地开发时候用的依赖包,发布以后别人用不到
  "main" : "underscore.js",//包的入口文件
  "script:" {} // 运行脚本命令的npm命令行缩写  
}
$ npm update

$ npm update -g

$ npm outdated

$ npm outdated -g

8.gulp是哪些?使用 gulp 完毕图片压缩、CSS 压缩合併、JS 压缩合併

gulp是二个以流为根基的前端自动化塑造工具,能够兑现css的滑坡合併、js缩并、图片压缩等等

采用 gulp 达成图片压缩、CSS 压缩合併、JS 缩并:

1. 安装压缩插件
安装图像压缩插件
npm install gulp-imagemin --save-dev
安装文件合并插件
npm install gulp-concat --save-dev
安装css压缩插件
npm install gulp-cssnano --save-dev
安装js规范检查插件
npm install jshint gulp-jshint --save-dev
安装js压缩插件
npm install uglify --save-dev
2. 载入插件
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify'); // js压缩
var imagemin = require('gulp-imagemin'); // image压缩
var jshint = require('gulp-jshint'); // js代码规范性检查

3. 定义任务
定义css合并压缩任务
gulp.task('build:css', function() {
    gulp.src('./src/css/*.css')
        .pipe(concat('index-merge.css'))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/')); // 
})

定义js合并压缩任务
gulp.task('build:js', function() {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
})

定义图片压缩任务
gulp.task('build:image', function() {
    gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'));
})

gulp.task('build', ['build:css', 'build:js', 'build:image']);
4. 执行任务
在命令行中执行命令:
gulp build

【个人计算,如有错漏,迎接提出】
:>

标题9:gulp是何许?使用 gulp 实现图片压缩、CSS 压缩合併、JS 压缩合併

gulp是一款能够兑现自动化的工具,能扶助你在支付进程中自行实现职分。

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require("gulp-concat");
var jshint = require("gulp-jshint"); 
var clean = require('gulp-clean');
var imagemin = require("gulp-imagemin");
var uglify = require("gulp-uglify");
var htmlmin = require("gulp-htmlmin");
// var browse = require("browser-sync");
// var sequence = require("run-sequence");

gulp.task("css", function () {
  return gulp.src("./src/image/*.css")
      .pipe(concat("index1.css"))
      .pipe(cssnano())
      .pipe(gulp.dest("./src/dest"))
})
gulp.task("js", function () {
 gulp.src("./src/app/*.js")
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(concat("index1.js"))
      .pipe(uglify())
      .pipe(gulp.dest("./src/dest/"))
})
gulp.task("html", function () {
  return gulp.src("./*.html")
      .pipe(htmlmin({
          collapseWhitespace: true
      }))
      // .pipe(htmlmin("index.html"))
      .pipe(gulp.dest("./src/dest"))
})
gulp.task("img", function() {
 return  gulp.src("./src/image/*")
      .pipe(imagemin({optimizationLevel:5}))
      // .pipe(concat())
      .pipe(gulp.dest('./src/dest/img'))
})
gulp.task("default", ["js", "css","img", "html"]);

使用npm uninstall能够卸载信赖,不过卸载后,在package.json中的纪录并不会被删除,要想在卸载注重的还要删除在package.json中的纪录,须要在卸载的时候使用安装时的全部的选项,举例,假诺设置时候利用了npm install <package name> --save则卸载的时候,同样使用npm uninstall <pacakage name> --save,而只要利用了--save-dev,卸载时候也亟需加同样的选项。

2.package.json有怎么着作用?

执行npm init生成package.json文件,该文件对项目记录了部分安插消息,首若是用来进展包管理。富含name、version、description、author、private、scripts、dependencies、decDependencies。当中scripts定义模块包的施用格局,dependencies和devDependencies是模块包的依赖性管理
package.json文件表达:

  • scripts钦命了运营脚本的npm命令行缩写
"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}
  • dependencies字段钦点了档案的次序周转所注重的模块,devDependencies内定项目开荒所要求的模块。
{
  "devDependencies": {
    "browserify": "~13.0.0",//模版名 版本 
    "karma-browserify": "~5.0.1"
  }
}
  • bin项用来钦定种种内部命令对应的可试行文件的岗位。
"bin": {
"someTool": "./bin/someTool.js"
}
  • main字段钦命了加载的进口文件,require(‘moduleName’)就能够加载那些文件。这几个字段的暗中认可值是模块根目录上面包车型地铁index.js。
  • name:项目名称
  • version:版本
  • description:描述表明
  • keywords:关键字

难点6: webpack是怎么样?和其它同品种工具比有何样优势?

webpack 是一款模块加载器兼打包工具,它能把种种财富JS、CSS、图片等都看作模块来选取和管理。
优势

  • 用 commonJS 来书写,对 速龙/CMD 援助也很周到,
  • 有利其余模块也相配使用,扩张性强,插件机制健全,能被模块化处理的能源多
  • 支出方便人民群众,能代表部分 grunt/gulp 的行事,举例打包,压缩。
{
  "name": "project",
  "version": "1.0.0",
  "author": "张三",
  "description": "第一个node.js程序",
  "keywords":["node.js","javascript"],
  "repository": {
    "type": "git",
    "url": "https://path/to/url"
  },
  "license":"MIT",
  "engines": {"node": "0.10.x"},
  "bugs":{"url":"http://path/to/bug","email":"bug@example.com"},
  "contributors":[{"name":"李四","email":"lisi@example.com"}],
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "latest",
    "mongoose": "~3.8.3"
  },
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0"
  }
}

5.webpack是什么样?和别的同品种工具比有哪些优势?

webpack是一个模块加载器和打包工具,它能够将好多麻痹的模块依据拂重和准则打包成符合生产条件安插的前端能源。还可以将按需加载的模块举办代码分隔,等到实际必要的时候再异步加载。通过 loader 的退换,任何格局的财富都得以看作模块,比方 CommonJs 模块、 英特尔模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

优势:

  • 对CommonJS、英特尔、ES6的语法兼容
  • 对js、css、图片等能源文件都援救打包
  • 串联式模块加载器以及插件机制,让其具有更加好的狡猾和扩充性,举例提供对CoffeeScript、ES6的支撑
  • 有单独的配备文件webpack.config.js
  • 可以将代码切割成差别的chunk,达成按需加载,减少了起先化时间
  • 支撑 SourceUrls 和 SourceMaps,易于调试
  • 抱有庞大的Plugin接口,多数是中间插件,使用起来比较灵活
  • webpack 使用异步 IO 并具有一连串缓存。那使得 webpack 极快且在增量编写翻译上特别速

题目4: node_modules的寻找路线是怎么着的?

从文件所在目录下的 nodule_modules 开始,逐级向上查找,直到找到根目录,若是还找不到,就能报错。

"scripts":{
  "test": "nonde ./test.js",
  "dev": "gulp --gulpfile gulpfile-dev.js",
  "build": "gulp --gulpfile gulpfile-build.js"
}

卸载正视

6.contributors:包的别的进献者

设置依赖包

本文由乐百家前段发布,转载请注明来源:详解Nodejs之npm&amp;package.json,nodejsnpm