如何全局安装一个 node 应用?
通过下面这个命令可以全局安装一个node应用
npm install --global appName
简写形式
npm i -g appName
通过全局安装的node应用会存放在'/usr/local/lib/node_modules'
中。
package.json有什么作用?
package.json是.json格式文件,记录了node包的相关信息,如依赖,版本号,名字等,每当用户 npm install
或使用命令行的时候,就会根据package下载相关依赖和执行相关文件。下面有几个比较重要的信息
"name": appName
//记录了这个node应用的名字
"version": "1.0.0"
//记录了node应用的版本,每次更新发布node包,都要更新version
"description": ""
//node应用的相关描述
"main": "index.js"
//node应用的入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
}
//script可以集成一些命令行,通过'npm run + 命令行的名字'执行该命令行,简化操作
//有的命令名npm本身有定义,如test,star就不需要run
//script还有一个很重要的功能,就算我们不是做node包,也可以使用script功能来构建工作流
"dependencies": {}
//dependencies记录了node应用的相关依赖
"devDependencies": {}
//devDependencies记录了该node应用的开发依赖
//是node应用开发过程中用到,但和功能不相关的依赖,如debug等
npm install --save app
与 npm install --save-dev app
有什么区别?
两条命令都是在本地安装node应用,安装在node_module文件夹中
现在假设我们在写一个node应用,用到app1和app2。
我们的node应用依赖app1,是node应用功能的一部分,没有app1,我们的node应用就跑不起来,这时候就要使用npm install --save app
命令安装app1,这个命令在安装app1的同时,会把信息写入到我们node应用的package.json
文件的dependencies
中,用户install我们的应用时就会根据这条信息下载相关的依赖
此外,开发中我们还用到了app2进行辅助开发,app2和我们的应用功能没关系,是用来debug、测试、打包之类的,这种时候就可以使用 npm install --save-dev app
来安装app2,安装的同时把信息记录到devDependencies
,用户install应用是不会下载相关app,app2为开发依赖
node_modules的查找路径是怎样的?
在node.js中,模块分为内建模块,本地模块,node_module模块
当我们require一个模块时,先查找是否为内建模块,然后是否为本地模块,最后查找是否为node_module模块
当require的模块既不是内建模块,也不是本地模块,且在当前目录中的node_module中也找不到时,就会向上查找上一级的node_module,一直到根目录
当文件标识不以'./ ../'开头,则跳过本地模块查找,直接在node_module中查找
npm3与npm2相比有什么改进?yarn和npm相比有什么优势?
npm3改进了一些依赖算法
假设有两个包,app1和app2
app1呢依赖a1和b1
app2呢依赖a1和b2
在npm2下,会把两个包的依赖完全下载下来,分别放在app1和app2下,如图所示
npm3则会分析这几个包有哪些共同依赖,把共同依赖的包放在一起,共同使用,单独依赖包另外下载,如图所示
npm3比npm2更节省空间,但是npm2的结构目录更加清晰
yarn是Facebook推出的JS包管理器,yarn 是为了弥补 npm 的一些缺陷而出现的
1.npm在拉取包的时候,是从package.json中读取依赖信息,但是版本号不太会写得非常确切,通常是定个版本范围,这样会导致不同的人获取的包依赖版本可能不一样,导致出现意外情况
yarn则通过一个yarn.lock文件,锁定了这个包的依赖模块的确切版本号,在你新增或更新依赖时,都会更新yarn.lock文件。每次拉取这包,都会严格按照yarn.lock中的信息拉取,保证每个人拉取的包都是一致的。
2.npm在安装包时输出信息比较冗长,yarn则省去许多无用信息,只输出有用的信息。
3.yarn在拉取包的速度是要优于npm
Yarn is only a new CLI client that fetches modules from the npm registry. Nothing about the registry itself will change — you’ll still be able to fetch and publish packages as normal.
yarn拉取的包还是来自于npm仓库,yarn只是一个新的用来操作npm仓库的cli
webpack是什么?和其他同类型工具比有什么优势?
webpack是一个模块加载器和打包工具,它能把JS/css/图片等等的资源打包成模块使用
它的优势:
1.以CommonJS规范书写模块,同时也支持AMD、CMD规范
2.webpack本身只能读取JS,但可以使用loadsh将各种资源打包转换成JS模块,因此webpack不仅可以打包JS,还可以是css/html/图片等等
3.强大的插件系统
npm scripts是什么?如何使用?
npm scripts是package.json中的一条信息
"scripts" : {
"test": "echo hello",
"build": //command line
}
npm scripts中可以定义一些命令行,供npm快捷调用,像上面的例子,只要在命令行中输入npm test
,就会执行echo hello
这条语句
npm中内置了一些像是'test','star'这样快捷命令,只要在scripts中定义好,直接就可以使用
npm test
npm star
但是其他的自定义快捷命令就要使用run
,像上面的'build',就要这样使用
npm run build
使用npm scripts,可以大大简化命令行的操作,建立快速工作流程
gulp是什么?使用gulp实现图片压缩、CSS压缩合并、JS压缩合并
gulp是一个以流为基础的前端自动化构建工具,可以实现css的压缩合并、js压缩合并、图片压缩等等
下面是gulpfile.js
一些配置
var gulp = require('gulp'),
cssnano = require('gulp-cssnano'), //css压缩
autoprefixer = require('gulp-autoprefixer'), //css前缀
imagemin = require('gulp-imagemin'), //图片压缩
babel = require('gulp-babel'), //es6转换es5
uglify = require('gulp-uglify'), //js压缩
concat = require('gulp-concat') //文件合并
//css自动前缀和压缩合并
gulp.task('merge:css',function() {
gulp.src('./src/css/*.css')
.pipe(autoprefixer({
browsers: ['last 4 versions'],
cascade: false
}))
.pipe(cssnano())
.pipe(gulp.dest('./dist/css'))
})
//图片压缩
gulp.task('merge:images',function() {
gulp.src('./src/images/*.{jpg,png,gif}')
.pipe(imagemin())
.pipe(gulp.dest('./dist/images'))
})
//js压缩
gulp.task('merge:js',function() {
gulp.src('./src/js/*.js')
.pipe(babel({
presets: ['env' ]
}))
.pipe(uglify())
.pipe(concat('main.js'))
.pipe(gulp.dest('./dist/js'))
})