题目1: 如何全局安装一个 node 应用?
- npm install -g xx
题目2: package.json 有什么作用?package.json是什么?package.json如何创建?
- package.json文件描述了一个NPM包,包括作者、简介、包的依赖、构建等所有信息。
- 通常在创建NPM包时,可以在命令行输入nmp init命令自动生成一个package.json文件,里面包含了一些常用的字段。还可以根据实际需求来自行完善或创建package.json文件。
- package.json
文件包含的常用配置字段: - name
name和version是package.json中最重要的两个字段,也是发布到NPM平台上的唯一标识,如果没有正确设置这两个字段,包就不能发布和被下载。 - version
这个字段的取值需要符合node-semver的规则,详细可以见其文档。 - description
包的描述信息,将会在npm search的返回结果中显示,以帮助用户了解包的用途。 - author
包的作者,可以是字符串或对象。 - files
包所包含的所有文件,可以取值为文件夹。还可以用.npmignore来去除不想包含到包里的文件。 - main
包的入口文件,如index.js - repository
包的github仓库地址。 - scripts
通过设置这个可以使NPM调用一些命令脚本,封装一些功能。 - config
添加一些设置,可以供scripts读取用,同时这里的值也会被添加到系统的环境变量中。 - dependencies
指定依赖的其它包,这些依赖是指包发布后正常执行时所需要的,如果是开发中依赖的包,可以在devDependencies设置。
{
"name": "my_package", //项目名称
"version": "1.0.0", //项目版本号
"main": "index.js", //入口文件
// bin参数是{ 命令名:文件名 }的格式,指定了各个内部命令对应的可执行文件的位置,相当于在user.local/bin下创建一个快捷方式
// 执行`server`,`mock`或`server-mock`命令时,将运行对应文件(./bin/server)
// ./bin/server文件头部需添加 #!/usr/bin/env node, 表示将以node运行这个文件
"bin":{
"server":"./bin/server",
"mock":"./bin/mock",
"server-mock":"./bin/server-mock"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1", //一般默认一个test的空文件夹、用作写测试代码,`npm test`即可运行。
"make":"echo 'hello world!' " //自定义的命令名需加run才能与运行,`npm run make`
},
"keywords": [], //项目的关键词。 一般用不到,发布npm才用得到。
"author": "candy", //作者名称
"license": "ISC", //协议
"repository": { // 用来存放到 版本管理远程服务。 发布npm才有用
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": { // 正式使用时依赖的包, npm install --save xxx 生成
"my_dep": "^1.0.0"
},
"devDependencies" : {//开发或者测试时,依赖的包。npm install --save-dev xxx生成
"my_test_framework": "^3.1.0"
}
"bugs": { //同repository
"url": "https://github.com/ashleygwilliams/my_package/issues"
},
"homepage": "https://github.com/ashleygwilliams/my_package" //项目主页、 发布才有用
}
题目3: npm install --save app 与 npm install --save-dev app有什么区别?
- npm install --save app
指项目正常运行所依赖的包,没有这个依赖,项目会出错。 - npm install --save-dev app
指项目开发测试过程中所用的工具。
题目4: nodule_modules的查找路径是怎样的?
比如需要查找的依赖包叫“easytpl”,它会先在当前目录下查找node_module, 看有没有easytpl文件夹(即easytpl包),如果有的话,会读取easytpl文件夹下的package.json,找到里面的main参数,加载main里对应的路径的文件。如果当前目录下没有node_module,或当前目录下的node_module没找到easytpl,便向上级目录中查询,直到系统根目录。
题目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是一个module bundler(模块打包工具),所谓的模块就是在平时的前端开发中,用到一些静态资源,如JavaScript、CSS、图片等文件,webpack就将这些静态资源文件称之为模块。webpack支持AMD和CommonJS,以及其他的一些模块系统,并且兼容多种JS书写规范,可以处理模块间的以来关系,所以具有更强大的JS模块化的功能, 它能对静态资源进行统一的管理以及打包发布 。
优势:
- 对 CommonJS 、AMD 、ES6的语法做了兼容;
- 对js、css、图片等资源文件都支持打包;
- 串联式 模块加载器 以及 插件机制 ,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持;
- 有独立的配置文件webpack.config.js;
- 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间;
- 支持 SourceUrls 和 SourceMaps,易于调试;
- 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活;
- webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快;
题目7:npm script是什么?如何使用?
scripts属性是一个对象,里边指定了项目的生命周期个各个环节需要执行的命令。key是生命周期中的事件,value是要执行的命令。
{ // ... "scripts": { "build": "node build.js" }}
上述代码是package.json
文件的一个小片段,里面的script
字段是一个对象。每个属性对应一段脚本,比如,build
命令对应的脚本是node build.js。在命令行里
$ npm run build/* 等同于执行:*/$ node build.js
题目8: 使用 webpack 替换 入门-任务15中模块化使用的 requriejs
题目9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用它不仅可以很愉快的编写代码,而且大大提高工作效率。
var gulp = require('gulp')
//js压缩插件
var jsmin = require('gulp-uglify')
//css压缩插件
var cssnano = require('gulp-cssnano')
//img压缩插件
var imgmin = require('gulp-imagemin')
//文件合并插件
var concat = require('gulp-concat')
//html 压缩插件
var minhtml = require('gulp-htmlmin')
gulp.task('cssmin',function(){
gulp.src('src/css/*.css')
.pipe(concat(min.css))
.pipe(cssnano())
.pipe(gulp.dest(dist/css));
});
gulp.tast('jsmin',function(){
gulp.src('src/js/*.js')
.pipe(jsmin())
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('imgmin', function(){
gulp.src('src/img/*')
.pipe(imgmin())
.pipe(gulp.dest('dist/img'));
});
gulp.task('default', ['cssmin','jsmin','imgmin']);