如何全局安装一个 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下，如图所示
npm2
npm3则会分析这几个包有哪些共同依赖，把共同依赖的包放在一起，共同使用，单独依赖包另外下载，如图所示
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'))
})
网友评论