题目1: 如何全局安装一个 node 应用?
npm install [pkg]
题目2: package.json 有什么作用?
package.json
文件,定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称,版本等数据)。npm install
命令根据这个配置文件,自动下载所需的模块,也就是配置项目所需的运行和开发环境。
题目3: npm install --save app 与 npm install --save-dev app有什么区别?
--save
参数表示将模块写入dependencies
属性,--save-dev
表示将模块写入devDependencies
属性。
dependencies
字段指定了项目运行所依赖的模块,devDependencies
指定项目开发所需要的模块。
题目4: node_modules的查找路径是怎样的?
当js文件运行时,引入文件,会现在当前项目目录下寻找node_modules文件夹,在该文件夹中寻找引入的模块,读取该模块的package.json文件,找到入口的main字段。如果没有找到node_modules文件夹,则继续往上层目录寻找,直到找不到,报错。
题目5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)
npm2 安装依赖的时候比较简单直接,直接按照包依赖的树形结构下载填充本地目录结构。
针对 npm2 的问题,npm3 加了点算法,直白的解释就是:npm install 时会按照 package.json 里依赖的顺序依次解析,遇到新的包就把它放在第一级目录,后面如果遇到一级目录已经存在的包,会先判断版本,如果版本一样则忽略,否则会按照 npm2 的方式依次挂在依赖包目录下
yarn 革命性的更改在于其改变了构建的步骤,其它有点都是新构建方式的副产物,yarn 构建步骤如下:
- Resolution: 向仓库请求依赖关系
- Fetching: 看看本地缓存了没有,否则把包拉到缓存里
- Linking: 直接全部从缓存里构建好目录树放到 node_modules 里
为了防止拉取到不同的版本,Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块,Yarn 就会创建(或更新)yarn.lock 这个文件。这么做就保证了,每一次拉取同一个项目依赖时,使用的都是一样的模块版本。
题目6: webpack是什么?和其他同类型工具比有什么优势?
webpack是一个模块加载器兼打包工具。它的作用是把互相依赖的模块处理成静态资源。
Webpack 优势:
- 代码分割: 在Webpack的依赖树里有两种类型的依赖:同步依赖和异步依赖。异步依赖会成为一个代码分割点,并且组成一个新的代码块。在代码块组成的树被优化后,每个代码都会在一个单独的文件夹里。
- 加载器:Webpack原生是只能处理JavaScript的,而加载器的作用把其他的代码转换成Javascript代码,这样一来所有种类的代码到能组成一个模块
- 智能解析: Webpack的智能解析器能处理肌肤所有的第三方库
- 插件系统:Webpack有丰富的插件系统,大部分功能都是基于这个插件系统
题目7:npm script是什么?如何使用?
nom scripts 指的是package.json中的scripts字段。scripts指定了运行脚本命令的npm命令行缩写。如:
"scripts": {
"start": "node index.js",
}
运行 npm run start 便可以执行命令。
题目9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是一个项目构建工具,核心是流式操作。
```
var gulp = require('gulp');
// 引入组件
var minifycss = require('gulp-minify-css'), // 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(argument) {
gulp.src('src/css/*.css')
.pipe(concat('merge.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(minifycss())
.pipe(gulp.dest('dist/css/'));
});
gulp.task('js', function(argument) {
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(argument){
gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs'));
});
gulp.task('clear', function(){
gulp.src('dist/*',{read: false})
.pipe(clean());
});
gulp.task('build', ['html', 'css', 'js', 'img']);
```
网友评论