1、如何全局安装一个 node 应用?
npm install -g appName
2、package.json 有什么作用？
-
相当于你本地项目的一个文档说明。
-
允许你指定你项目中所使用的node包的版本。
-
构建你的项目更加容易，便于给其他人共享。
一个典型的package.json文件如下所示。
{
"name": "my_package",
//你的项目名称，全部小写，不能有空格，一个单词，允许-和_. 如果是要发布自己的node插件，一般用github上面项目名称。 下次有机会说明 npm 上面的发布流程。
"version": "1.0.0",
//你的项目版本号，最好遵守 GNU 版本号管理。
"main": "index.js",
//目录中启动文件名称。或者称之为入口文件，一般都是 index.js
"scripts": {
//使用 scripts 字段定义脚本命令
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
//项目的关键词。 一般用不到，发布npm才用得到。
"author": "ag_dubs", //作者名称
"license": "ISC", //协议
"repository": {
// 用来存放到 版本管理远程服务。 发布npm才有用
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": {
// 正式使用时，依赖的包
"my_dep": "^1.0.0"
},
"devDependencies" : {
//开发或者测试时，依赖的包。
"my_test_framework": "^3.1.0"
}
"bugs": {
//同repository
"url": "https://github.com/ashleygwilliams/my_package/issues"
},
"homepage": "https://github.com/ashleygwilliams/my_package"
//项目主页、 发布才有用
}
一般不会吧node_modules上传到git或者npm上面，需要package来管理自己打包所需的插件，以便于项目中其他人员共享，这个文件的好处就是一个人添加某个插件后，更改了这个文件，其他人员只需要同步此文件，然后执行如下命令，即可安装同样的包。
npm install
3、npm install --save app 与 npm install --save-dev app有什么区别?
-
都是为了省区修改 package文件
-
--save将依赖添加到字段dependencies中，是产品依赖模块。
npm install --save moduleName
- --save-dev将依赖添加到字段devDependencies中，是开发依赖模块。（可简写为-d）
npm install -d moduleName
4、node_modules的查找路径是怎样的?
当require('xxx'),这个模块的xxx不是nodejs的内建模块(比如http、path、fs等)，并且模块标识不以路径开始('../ , ./')。
则nodejs会不断的上一级目录递归查找node_modules目录，若一直未找到模块的xxx，则会抛错。
5、 npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势? (选做题目)
- npm3相比npm2主要改进了依赖管理方案
- npm2安装依赖的时候比较简单直接，直接按照包的依赖的树形结构下载填充至本地目录，缺陷在于太深的目录树结构会严重影响效率，甚至在window下可能会超出系统路径限制的长度，另外有删node_modules目录都可能经历漫长的等待。
- 针对 npm2 的问题，npm3 加了点算法，直白的解释就是：npm install
时会按照 package.json 里依赖的顺序依次解析，遇到新的包就把它放在第一级目录，后面如果遇到一级目录已经存在的包，会先判断版本，如果版本一样则忽略，否则会按照 npm2 的方式依次挂在依赖包目录下。 - 在包版本差异化不太严重的情况下，这种构建方式会几乎把所有包放在一级目录下，很大程度下提升了效率以及节省了部分磁盘空间。
- 但是npm3又遇到了新问题，有可能开发环境和测试环境的node_modules的目录结构不一样，以及其他因素，faceboook开发了yarn来替代npm。
- yarn优点在于只要通过Yarn安装过的套件都会在本地目录产生Cache，也就是说只要安装过依次，下次重新安装都会从Cache重新读取， 安装速度会提升很多。
6、webpack是什么？和其他同类型工具比有什么优势？
webpack是一种模块加载器兼打包工具，可以将各种资源；例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
- 对 CommonJS、AMD、ES6 的语法兼容。
- 对CSS、JS、图片等资源文件都支持打包。
- 串联式的模块加载器以及插件机制，让其具有更好地灵活性和扩展性，**
- 例如提供对 CoffeeScript、ES6 的支持。
- 有独立的配置文件 webpack.config.js
- 可以将代码切分成不同的 chunk，实现按需加载，降低初始化时间
- 支持 SourceUrls 和 SourceMaps，易于调试
- 具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活
- webpack 使用异步 IO 并具有多级缓存，这使得 webpack 很快。
7、npm script是什么？如何使用？
npm script 是package.json的一个属性，可以在scripts里面定义一些脚本命令。内置的命令名如start、test等可直接使用run xxx执行，自定义的命令名使用 npm run xxx 执行。如：
"script" : {
"new": "mkdir test" //新建一个test文件夹
}
执行命令：npm run new
8、 webpack 应用
- 使用npm scripts
{
"name": "lebronii",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack ./src/app.js app.bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}
- 或者配置webpack.config.js
var path = require('path')
module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, './bin'),
filename: 'bundle.js'
}
}
代码地址：https://github.com/zh-yang/resume/tree/master/LebronII
预览地址：https://zh-yang.github.io/resume/LebronII
9、gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
- gulp是自动化的前端构建工具，开发过程中可能需要对图片和代码进行压缩合并，less/sass/pug代码的转换，代码规范性的检查、测试等，gulp可以将这些工作整合在一起，方便高效地完成任务。
- 安装gulp
npm install -g gulp
npm install --save-dev gulp
- gulp常见用法
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var uglify = require('gulp-uglify');
var imgmin = require('gulp-imagemin');
var concat = require('gulp-concat');
//当我们需要使用一个功能时，需要先在bash安装这个模块，
//然后在使用前require它，最后在gulp.task中定义这个功能。
//图片压缩
gulp.task('imagemin',function(){
return gulp.src('图片地址')
.pipe(imagemin())
.pipe(gulp.dest('输出目录')
})
//css压缩合并
gulp.task('cssnano',function(){
return gulp.src([css1地址,css2地址...])
.pipe(cssnano()) //压缩
.pipie(concat(新文件名)) //合并
.pipe(gulp.dest(输出目录))
})
//js压缩合并
gulp.task('uglify',function(){
return gulp.src([js1地址,js2地址,....])
.pipe(uglify()) //压缩
.pipie(concat(新文件名)) //合并
.pipe(gulp.dest(输出目录))
})
- gulp其他用法
var gulp = require('gulp')
//添加版本号
var rev = require('gulp-rev')
//版本号替换
var revReplace = require('gulp-rev-replace')
//解析html资源定位
var useref = require('gulp-useref')
//less转css(css预编译)
var less = require('gulp-less')
//css后编译(前缀等、兼容)
var autoprefixer = require('gulp-autoprefixer')
//css压缩
var cssnano = require('gulp-cssnano')
//或 var minifycss = require('gulp-minify-cdd')
//或 var csso = require('gulp-csso')
//js压缩
//或 var gulpif = require('gulp-if')
//或 var filter = require('gulp-filter')
var uglify = require('gulp-uglify')
//合并文件
var concat = require('gulp-concat')
//重命名
var rename = require('gulp-rename')
//清空文件夹
var clean = require('gulp-clean')
//html压缩
var minhtml = require('gulp-htmlmin')
//js代码规范性检查
var jshint = require('gulp-jshint')
//图片压缩
var imagemin = require('gulp-imagemin')
网友评论