npm常见命令
npm install -g app-name
webpack命令
- 显示npm下载包时,发的每一个请求:
npm config set loglevel http
- 关闭npm显示的进度条:
npe config set process false
package.json 有什么作用?
每个项目下面都有一个package.json文件,定义了这个项目中所需要的模块,以及项目的配置信息(比如名称、版本、许可证等元数据)。npm install
命令会根据这个配置文件,自动下载所需要的模块,也就是配置项目所需的运行和开发环境。
package.json可以手动编写,也可以通过npm init
自动生成,有了package.json,就可以通过npm install
安装其中指定的模块
一个package.json的例子:
{
"name": "Hello World",
"version": "0.0.1",
"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",
"handlebars-runtime": "~1.0.12",
"express3-handlebars": "~0.5.0",
"MD5": "~1.2.0"
},
"devDependencies": {
"bower": "~1.2.8",
"grunt": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-clean": "~0.5.0",
"browserify": "2.36.1",
"grunt-browserify": "~1.3.0",
}
}
- name: 项目名称
- version:项目版本
-
scripts: 指定了运行脚本命令的npm命令行缩写,
"start": "node index.js"
——当执行npm run start
时,会执行node index.js
命令 -
dependencies字段和devDependencies字段
dependencies
字段指定了项目运行所依赖的模块,devDependencies
字段指定了项目开发所需要的模块。
他们都指向一个对象。该对象的各个成员,分别由“模块名”和“对应的版本要求组成”,表示依赖的模块和版本范围
{
"devDependencies": {
"browserify": "~13.0.0",
"karma-browserify": "~5.0.1"
}
}
对应的版本加上各种限定,主要有以下几种:
- 指定版本:例如:
1.2.2
,遵循的是“大版本.次要版本.小版本”
的格式,安装时,只安装指定版本- 波浪号+指定版本:例如:
~1.2.2
,表示安装1.2.x
的最新版本,版本不小于1.2.2,同时不大于1.3.x,也就是安装时不改变大版本和次要版本。- 插入号+指定版本:例如:
^1.2.2
,表示安装1.x.x的最新版本(不低于1.2.2),但是不安装2.x.x的版本,也就是说不改变大版本号。需要注意的是,如果大版本号为0,则插入号的行为与波浪号相同,这是因为此时处于开发阶段,即使是次要版本号变动,也可能带来程序的不兼容。- latest:安装最新版本
如果一个模块不在package.json文件之中,可以通过
npm install module --save
npm install module --save-dev
这两个命令安装,
--save
参数:表示将模块写入“dependencies”属性中
--save-dev
参数:表示将模块写入“devDependencies”属性中
-
bin字段
该项用于定义执行内部命令时,指定的可执行文件的位置,可与script
项配合使用
"bin": {
"someTool": "./bin/someTool.js"
}
上面代码指定,someTool 命令对应的可执行文件为 bin 子目录下的 someTool.js。Npm会寻找这个文件,在node_modules/.bin/目录下建立符号链接。在上面的例子中,someTool.js会建立符号链接npm_modules/.bin/someTool。由于node_modules/.bin/目录会在运行时加入系统的PATH变量,因此在运行npm时,就可以不带路径,直接通过命令来调用这些脚本。
因此,像下面这样的写法可以采用简写。
scripts: {
start: './node_modules/someTool/someTool.js build'
}
// 简写为
scripts: {
start: 'someTool build'
}
所有node_modules/.bin/目录下的命令,都可以用npm run [命令]
的格式运行。在命令行下,键入npm run
,然后按tab键,就会显示所有可以使用的命令。
main字段
该字段指定了加载的入口文件。这个字段的默认值,就是模块根目录下的index.js
文件-
config字段
该字段用于添加命令行的环境变量下面是一个package.json文件。
{
"name" : "foo",
"config" : { "port" : "8080" },
"scripts" : { "start" : "node server.js" }
}
---
## npm install --save app 与 npm install --save-dev app有什么区别?
`npm install --save app`: 在当前目录下安装模块,并将模块添加到`package.json`中的`dependencies`属性中
`npm install --save-dev app`:与`npm install --save app`命令类型,只不过是将模块添加到`packag.json`中的`devDependencies`属性中
---
## node_modules的查找路径是怎样的?
node_modules的模块查找路径,说到底就是通过`require()`函数引入模块时的查找路径。
>当 Node 遇到 require(X) 时,按下面的顺序处理。
1. 如果X是内置模块,如: `require('http')`
a. 返回该模块,
b. 不再继续执行
2. 如果X是以 `"./"` 或 `"/"` 或 `"../"` 开头
a. 根据X所在的父模块,确定X的绝对地址
b. 将X当成文件,依次查找下面的文件,只要有一个存在,就返回该文件,不再继续执行
- X
- X.js
- X.json
- X.node
> c. 将X当成目录,依次查找一下文件,只要有一个存在,就返回该文件,不再继续执行
- X/package.json(中的main字段)
- X/index.js
- X/index.json
- X/index.node
3. 如果X不带路径
a. 根据X所在的父模块,确定X可能的安装目录
b. 依次在每个目录中,将X当成文件或目录名加载
4. 抛出 "not found"
一个例子:
当前脚本文件`/home/ry/project/foo.js`执行了`require('bar')`,属于上面的第3种情况,Node内部运行过程如下:
首先,确认X的绝对路径可能是下面的几种情况,依次查找:
>- /home/ry/project/node_modules/bar
- /home/ry/node_modules/bar
- /home/node_modules/bar
- /node_modules/bar
搜素时,Node先将bar当成文件名,依次尝试加载下面这些文件,只要有一个成功就返回
> - bar
- bar.js
- bar.json
- bar.node
如果都不成功,说明bar可能是目录名,于是依次尝试加载下面这些文件
> - bar/package.json(main字段)
- bar/index.js
- bar/index.json
- bar/index.node
如果在所有对应的目录中,都无法找到对应的目录或文件,就抛出一个错误
参考:[require() 源码解读](http://www.ruanyifeng.com/blog/2015/05/require.html)
---
## npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)
npm3对于包的依赖处理不同于npm2
**npm2**:按照一个嵌套方式安装所有依赖
**npm3**:试图减轻树的深度和冗余的嵌套,将传统的嵌套结构改为平铺结构
**yarn与npm相比的优势**:
- yarn.lock 文件
Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块,Yarn 就会创建(或更新)yarn.lock 这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本。
- 并行安装
- 更简洁的输出
[Yarn vs npm:你需要知道的一切](https://zhuanlan.zhihu.com/p/23493436)
---
## webpack是什么?和其他同类型工具比有什么优势?
webpack是一个JavaScript应用程序的**模块打包器**。当使用webpack处理应用程序时,它会递归的构建一个**依赖关系图**,其中包含应用程序需要的每个模块,然后将应用程序打包成少量的**bundler**——通常只有一个,由浏览器加载。
与其他打包工具相比,webpack具有:
- **代码分割**:
- **Loaders**:通过Loader机制,可以将各种类型的资源转换为js的模块
- **插件机制**:拥有非常丰富的插件
---
## npm script是什么?如何使用?
npm script是package.json中的一个属性,利用该属性可以自定义一些脚本命令
通过: `npm run xxx`来执行xxx命令,如果xxx是npm中的默认命令,则无需添加run,直接使用`npm xxx`即可。
如:
```js
{
// ...
"scripts": {
"build": "node build.js"
}
}
执行: node run build
即可执行node build.js
命令
使用 webpack 替换 入门-任务15中模块化使用的 requriejs
gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是一款基于数据流的自动化构建工具
一个gulpfile.js文件
// 载入模块
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
clean = require('gulp-clean'),
concat = require('gulp-concat'),
minhtml = require('gulp-htmlmin'),
notify = require('gulp-notify'),
md5 = require('gulp-md5-plus');
// css任务
gulp.task('css', function() {
gulp.src('dist/css/*').pipe(clean());
return gulp.src('./www/src/css/*.css')
// .pipe(concat('merge.min.css'))
.pipe(minifycss())
.pipe(md5(10, 'dist/index.html'))
.pipe(gulp.dest('dist/css/'));
});
// html任务
gulp.task('html', function(){
return gulp.src('./www/src/index.html')
.pipe(minhtml({collapseWhitespace: true}))
.pipe(gulp.dest('dist'))
});
// js任务
gulp.task('js', function(){
gulp.src('./dist/app.bundle.js')
.pipe(jshint())
.pipe(concat('merge.min.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'))
});
// img任务
gulp.task('img', function(){
gulp.src('www/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'))
});
// clean任务
gulp.task('clear', function(){
gulp.src('./dist/*', {read: false})
.pipe(clean());
});
gulp.task('build', ['html', 'css', 'js', 'img']);
开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)
包地址:npm install -g hexon-hunger-weather2