高级5-npm使用、npmscript打造前端工作流、webpa

2018-07-03  本文已影响0人  我七

1: 如何全局安装一个 node 应用?

全局安装:package会被下载到特定的系统目录下,安装的package能够在所有目录下使用
npm install -g <package>
例如:
npm install -g jshint
优点:无论哪个目录都可以正常使用软件包。如果被墙建议打开科学上网工具,或者先安装npm install -g cnpm --
本地安装: package会被下载当前所在目录,只能在当前目录下使用
npm install <package>
例如:
npm install jshint
缺点:只能在对应安装目录下使用,如果其他目录想使用这个软件包那其他目录也要执行npm install jshint此命令。

附加部分:查看npm版本输入 npm -v
更新npm输入sudo npm install npm -g

2: package.json 有什么作用?

如果想发一个包,必须要发package.json,该文件夹告诉npm你这个包当前的版本及其他的相关信息,例如包的名字(别人搜索包时候的名字),在每一次重新发布时候版本号必须更新,main指当前入口,便于他人引用入口。
例如:


3: npm install --save app 与 npm install --save-dev app有什么区别?

npm install --save app 自动把模块和版本号添加到dependencies部分
npm install --save-dev app 自动把模块和版本号添加到devdependencies部分

devdependencies是开发时依赖,比如你模块用了marked测试框架,那么你的模块的开发就依赖 marked,如果别人想为你的模块贡献代码,他就需要安装marked。但是只是使用你的模块的人,就不需要安装marked。

4: node_modules的查找路径是怎样的?

先再本身文件夹查找是否有node_odules文件夹,找不到再到上一级,找到便停止。找不到便继续往上一级查找直到根目录。

5: npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)

npm3与 npm2对比:
npm2安装所有的dependencies都是嵌套的方式,是树形结构。
npm3以平坦的方式安装dependencies,将dependencies安装在同一目录中,解决了npm2带来的冗长浪费空间的安装方式
两者主要的不同是:
不再区分dependencies的主次。
改变了node_modules文件的结构
例:
此时模块A依赖B模块


现某应用依赖模块A。执行npm install
npm3 将模块A和依赖的模块B平铺放入node_modules文件中
npm2是嵌套的模式放入

假设我们还需要依赖模块C,但是模块C依赖是高版本的B模块

然而B v1.0已经作为顶层依赖,我们无法将B v2.0作为顶层依赖,npm3将会默认npm2的嵌套型结构,不同的是将会把B v2.0模块放在所依赖它的C模块下面

在终端我们会看到如下文件结构

依赖关系列表和它们之间的关系可以使用npm ls

查看首要依赖可以使用npm ls --depth=0

yarn优点(来自官网介绍):
1.缓存下载的每个软件包,因此它永远不需要再次下载它。它还将操作并行化以最大限度地利用资源,因此安装时间比以往更快。

2.其代码执行之前使用校验和来验证每个已安装软件包的完整性。

3.使用详细而简洁的lockfile文件和确定性的安装算法,能够保证在一个系统上的安装,也可以在其他系统上以相同工作方式运行。

4.无论安装顺序如何,相同的依赖关系都将以相同的方式安装在每台机器上。

5.如果您之前安装了一个软件包,则可以在没有任何互联网连接的情况下重新安装它。

6.从npm安装任何软件包,并保持软件包工作流程相同。

7.单个请求失败不会导致安装失败。请求在失败时重试。

8.解析不匹配的依赖版本为一个单一的版本来避免导致多个版本。

9.可以高效地队列化请求,使网络利用率最大化

yarn和npm不同点:
1.同一个项目,安装的时候无法保持一致性。由于package.json文件中版本号的特点,下面三个版本号在安装的时候代表不同的含义。

"1.0.3",//安装指定的1.0.3版本
"~1.0.3",//1.0.X中最新版本
"^1.0.3"//安装1.X.X中最新版本

在协同完成项目时由于依赖模块版本的不同会导致bug。

yarn的解决办法
为了保证包版本的错误匹配,精确版本号会被yarn的lock文件记录下来。每次模块的添加,Yarn会创建一个yarn.lock文件。这样就可以保证另一个机器安装的了完全相同的版本的包,并且同时在package.json里仍保存着一个充许的版本段。

在npm里shrinkwrap命令也会产生lock文件,然后npm在读取package.json之前会读取那个文件,跟Yarn读取yarn.lock类似。不同点是Yarn总是会自动的更新yarn.lock文件,而npm需要你自己去手动维护。
yarn.lock 文档

2.npm允许在包安装的时候运行代码,yarn不行

3.npm安装包是顺序执行,yarn可以并行安装

4.npm安装依赖包是树形结构


yarn安装包是这种字段

5.yarn add [–dev]
跟 npm install 类似,yarn add 让你添加并且安装一个依赖。如命令名所示,它会添加一个依赖并自动的保存相应的包到package.json,跟npm的--save标记一样。Yarn的--dev标记添加一个开发依赖,就象npm的--save-dev标记一样。

yarn add [package]
npm install [package]

6.yarn upgrade
这个命令将包升级到package.json规则指定的版本范围的最新版,而不是yarn.lock所定义的完全一致的版本。想要在npm达成一致的效果,你需要运行下面的命令:

rm -rf node_modules
npm install

这个命令不要跟npm update混淆了,npm update会升级所有的包到最新的版本。
yarn upgrade [package]

ps:如果安装包实在很慢时还是使用yarn安装会快一些

6: webpack是什么?和其他同类型工具比有什么优势?

一款模块加载器兼打包工具,有半个前端工作流功能,也是可以将模块打包到一起,能把各种资源JS/CSS/图片等都作为模块来使用和处理。

优势如下:
1.是以 commonJS 的形式来书写脚本,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。

2.可以将代码拆分成多个区块,每个区块包含一个或多个模块,它们可以按需异步加载,极大地减少了页面初次加载时间。

  1. 本身只能处理原生的 JS 模块,但是 loader 转换器可以将各种类型的资源转换成 JS 模块。这样,任何资源都可以成为 webpack 可以处理的模块。

  2. 有智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。

  3. 有功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 webpack 插件,来满足各式各样的需求。

6.使用异步 I/O 和多级缓存提高运行效率,使得它能够快速增量编译。

7:npm script是什么?如何使用?

npm 允许在package.json文件里面,使用scripts字段定义脚本命令。

{
  "scripts": {
    "build": "node build.js"
  }
}

使用npm run命令可以执行脚本

npm run build
# 等同于执行
node build.js

这些定义在package.json里面的脚本,就称为 npm 脚本。
查看当前项目的所有 npm 脚本命令,可以使用不带任何参数的npm run命令:
npm run

npm默认的脚本值有

"start": "node server.js":
#执行使用npm start
"install": "node-gyp rebuild":
#执行使用npm install

"test": "echo \"文字"
#执行使用npm test

8: 使用 webpack 替换 入门-任务15中模块化使用的 requriejs

代码地址
webpack封装预览地址

该链接建议使用chrome浏览器打开会快一些,接口也可以顺利加载
如果新闻部分未显示建议您点击chrome浏览器右上方的加载不安全脚本按钮

9:gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp:

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');

var clean = require('gulp-clean'),
    cssnano = require('gulp-cssnano'),
    concat = require('gulp-concat'),
    autoprefixer = require('gulp-autoprefixer');

var uglify = require('gulp-uglify')

图片压缩

gulp.task('dist:imgs', function(){
    gulp.src('src/imgs/*')
    .pipe(imagemin())//压缩图片
    .pipe(gulp.dest('dist/imgs'))//所有图片输出到dist文件中的imgs文件夹内
}) 

css压缩合并

gulp.task('dist:css', function(){
    gulp.src('dist/css/*').pipe(clean());//dist中css文件清空
    return gulp.src('src/**/*.less')//再将src中以less为结尾的文件拷贝过去
    .pipe(less())//将less文件转为css
    .pipe(cssnano())//压缩css文件
    .pipe(concat('merge.css'))//将所有css文件集成一个名为merge.css文件
    .pipe(autoprefixer({//自动添加一个前缀,看需求写
        browsers:['last 2 versions'],
        cascade: false
    }))
    .pipe(gulp.dest('dist/css'))//merge.css被传入到dist/css文件夹中
})

js压缩合并

gulp.task('dist:js', function(){
    gulp.src('dist/js/*').pipe(clean());//dist中js文件清空
    return gulp.src('src/**/*.js')//再将src中以js为结尾的文件拷贝过去
    .pipe(uglify())//压缩js
    .pipe(concat('merge.js'))//将所有jd文件集成一个名为merge.js文件
    .pipe(gulp.dest('dist/js'))//merge.js被传入到dist/js文件夹中
}) 
//git bash简单方法调用
gulp.task('bulid', ['dist:imgs','dist:css','dist:js'])
//在git bash中输入gulp build就可调用以上三个任务

10: 开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

npm install hunger-weather -g
weather

包下载地址

安装后的效果如下:

上一篇 下一篇

猜你喜欢

热点阅读