1： 如何全局安装一个 node 应用?
npm install -g app
2： package.json 有什么作用？
相当于你本地项目的一个文档说明。
允许你指定你项目中所使用的node包的版本。
构建你的项目更加容易，便于给其他人共享。
{
"name": "my_package", //你的项目名称，全部小写，不能有空格，一个单词，允许-和_.
//如果是要发布自己的node插件，一般用github上面项目名称。
"version": "1.0.0", //你的项目版本号，最好遵守 GNU 版本号管理。
"main": "index.js", //目录中启动文件名称。或者称之为入口文件，一般都是 index.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
//一般默认一个test的空文件夹、用作写测试代码。
},
"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"
//项目主页、 发布才有用
}
一般情况，如果是自己的项目，特别是前端的人，会使用到gulp或者grunt来打包自己的项目，并且一般不会吧node_modules上传到git上面，所以需要package来管理自己打包所需的插件，以便于项目中其他人员共享，这个文件的好处就是一个人添加某个插件后，更改了这个文件，其他人员只需要同步此文件，然后执行npm install命令，即可安装同样的包。
3： npm install --save app 与 npm install --save-dev app有什么区别?
--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下
区别是，devDependencies 下列出的模块，是我们开发时用的；dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
4： node_modules的查找路径是怎样的?
node_modules的查找路径：先从本地目录下寻找，不存在就依次向上级目录中查询，直到系统根目录。node全局安装在系统根目录下，所以全局安装后可在所有目录下使用
5：npm3 与 npm2相比有什么改进？
这个问题如果在很久以前打开你的node-moudles文件夹一探究竟的同学就会有感觉，当时里面的目录很清晰，一个packages就是一个目录，里面再包括自身文件和依赖包。 后来有一天再打开惊呆了，里面一堆目录，当时觉得这很不neat，很不优雅。google的是npm更新到了npm3之后才发现自己的愚蠢，我们来看一张图。
Paste_Image.png
现在我们看到的是npm2的包依赖的目录构成形式，很容易发现一个问题，如果一个链式依赖非常深，目录相应也会越来越深，在我们定义css样式的时候就接触到一个概念: 层级查找是很慢的.
html>body>div.container>ul.gallery>li.item>img.image => 慢到爆炸!!！
同样的递进目录查找同样慢，越深越慢。而且还会存在一个问题，（黄色圈）当我们的不同modules对相同的包进行依赖时，会出现重复，而且很有可能它们的版本不一样(二次开发）但他们的层级是一样的(很不logical).
再看看npm3的扁平式目录结构策略： 将所有的依赖优先放置第一级目录(即'/node-modules'/下），看图解释：
Paste_Image.png
APP依赖Module A
Module A 依赖 Module B ----------------- ./node-modules
Module A 依赖 Module C ----------------- ./node-modules
Module B 依赖 Module D version 1.0 ----- ./node-modules
Module C 依赖 Module D version 2.0 ----- ./node-modules/ModuleC/
很清晰：So，当遇到版本不同时，npm3会将更高版本者放入依赖它的Module之下，层级关系映射版本关系，有种渐进增强的感觉，低版本作为基础依赖，版本递进则深入一层目录。 而其他的不存在版本递进的Module一律放入第一层目录，大大减少了查找时间，提高效率。
yarn和 npm 相比有什么优势?
yarn是facebook为自己的sandbox形式的开发环境创造的包管理器，既然是sandbox，摒弃外部环境时，对于离线形式的包安装的支持就很重要，这也是它的最大特点： 对所有已经安装过的包进行cache缓存，下次安装这些包时直接从缓存里拉取，对比与npm对网络环境的依赖，yarn解决了这个痛点。
More advantages over npm:
相对于npm的队列式安装（当一个包安装完毕后才会执行下一个），yarn支持Parallel Installation，速度更快。
yarn.lock: 这是一个版本锁，它记录了所有包的版本信息，也就是说，它保证了在任何一台设备上，你对于包的拉取安装都是严格遵循这个版本信息，从而保证不出现： But it works on my computer 这样烦人的问题。
clean： yarn支持清理命令，可以清理node-modules目录下的包文件，比如一些捆绑进入的广告以及不必要的文件。
网络恢复： 一个单独的请求并不会导致整个安装失败，这些请求可以重试直到请求恢复正常。
不得不说，F家还是很任性的，一言不合就造个轮子给自己用，而且还比市面的大轮子更好.
6： webpack是什么？和其他同类型工具比有什么优势？
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
优势:
- 对 CommonJS 、 AMD 、ES6的语法做了兼容
- 对js、css、图片等资源文件都支持打包
- 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持
- 有独立的配置文件webpack.config.js
- 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
- 支持 SourceUrls 和 SourceMaps，易于调试
- 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活
- webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
7：npm script是什么？如何使用？
npm script 是 package.json 中的一个属性，可以在这个属性中自定义npm命令脚本，简化操作。
"scripts": {
"run": "npm install -g npm",
"webpack":"webpack",
"start":"npm run build"
}
在package.json的scripts内添加键值对("name":"命令")，之后便可以使用了。
命令可以是命令行命令，npm程序，也可以是scripts内自定义的命令。
start和test命令可以不用加run，直接输入npm start/npm test即可操作，其他自定义命令设置完成，在终端内便可以通过npm run name来执行。
9：gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并.
var gulp = require('gulp')
var cssnano = require('gulp-cssnano'), //css压缩
uglify = require('gulp-uglify'), //js压缩
concat = require('gulp-concat'), //合并文件
rename = require('gulp-rename'), //重命名
clean = require('gulp-clean'), //清空文件夹
minhtml = require('gulp-htmlmin'), //html压缩
jshint = require('gulp-jshint'), //js代码规范检查
imagemin = require('gulp-imagemin') //图片压缩
gulp.task('html', function() {
return gulp.src('src/*.html')
.pipe(minhtml({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'))
})
gulp.task('css', function() {
return gulp.src('src/css/*.css')
.pipe(concat('merge.min.css'))
.pipe(cssnano())
.pipe(gulp.dest('dist/css/'))
})
gulp.task('js', function() {
return gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min' //换个名字
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'))
})
gulp.task('img', function() {
return gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs/'))
})
gulp.task('clear', function() {
return gulp.src('dist/*', { read: false })
.pipe(clean())
})
gulp.task('build', ['html', 'css', 'js', 'img'])
//命令行
gulp build
网友评论