Node+Gulp+webpack

Node

传统js开发的弊端:文件依赖,命名冲突

模块的导入导出方法
能够使用基本的系统模块
能够使用常用第三方包
能够说出模块加载规则
知道pack.json的作用

:问一

exports和module.exports 、 export和export default

Node使用CommonJS规范,定义每个模块的内部,module变量代表当前模块,exports是module的属性,表示对外的接口。加载某个模块,实际上是加载该模块的module.exports属性。
Node为每个模块提供了一个exports变量指向module.exports,这等同于每个模块头部有这样的一行代码:var exports = module.exports

ES6使用export和import来导出/导入模块。
3.1 export与export default均可用于导出常量/函数/文件/模块等;
3.2 在一个文件或模块中,export/import可以有多个export default只有一个
3.3 通过export方式导出,在导入时需要加{},export default不需要;
3.4 export能导出变量/表达式,export default不可以。
CommonJS模块输出是一个值的拷贝,ES6模块输出是值的引用
CommonJS模块是运行时加载,ES6模块是编译时输出接口
CommonJS模块无论require多少次,都只会在第一次加载时运行一次,然后保存到缓存中,下次在require,只会去从缓存取。

module.exports与exports ,是CommonJS的规范,被使用于Node.js中。export与export default ,是ES6规范,被使用于``React或Vue```中。

:问二:
node中的系统模块:文件模块(读写文件),路径模块(不同操作系统的分隔符不一样),
问三:第三方包
nodemon,nrm,

gulp:
项目上线,js,html,css代码的压缩合并
语法转化
公共文件抽离
修改文件,浏览器自动刷新
 - gulp.src() 获取任务要处理的文件
 - gulp.dest() 输出文件
 - gulp.task() 建立gulp任务
 - gulp.watch()监控文件变化
gulp常用插件
  • gulp-htmlmin
  • gulp-csso
  • gulp-babel
  • gulp-less
  • gulp-uglify 压缩混淆js
  • gulp-file-include 公共文件包含
  • browsersync 浏览器实时同步
package.json

npm init -y

项目依赖:

开发和上线都需要依赖的第三方包:

dependencies:
开发依赖 npm i 包名 --save-dev
devDependencies
Node中的模块加载机制

面试

  1. node有哪些特征,与其他服务器端对比

特征:单线程、事件驱动、非阻塞I/O

node 无法直接渲染静态页面,提供静态服务

node 没有根目录的概念

node 必须通过路由程序指定文件才能渲染文件

node 比其他服务端性能更好,速度更快

2、CommonJS中require/exports和ES6中import/export区别

CommonJS模块的重要特性是加载时执行,及脚本代码在require的时候,就会全部执行。一旦出现某个模块被“循环加载”就只输出已经执行的部分,还没有执行的部分是不输出的

ES6模块是动态引用,如果使用import从一个模块加载变量,那些变量不会缓存,而是成为一个指向被加载模块的引用,impor/export最终都是编译为require/exports来执行的

3、谈谈对node.js npm webpack的理解

webpack能够把.vue后缀名的文件打包成浏览器能够识别的js,而这个.vue文件装换需要打包器vue-loader;这个vue-loader打包器是可以从npm上面下载,npm下载文件之后;webpack打包文件的时需要node环境去运行

4、使用npm有哪些好处?

通过NPM,你可以安装和管理项目的依赖,并且能够指明依赖项的具体版本号,可以通过package.json文件来管理项目信息,配置脚本

5、AMD CMD规范的区别

CommonJS和AMD都是JavaScript模块化规范

CMD依赖就近,而AMD依赖前置

CMD是延迟执行的,而AMD是提前执行的

AMD的API默认是一个当多个用,CMD的API严格区分,推崇职责单一

6、如何判断当前脚本运行在浏览器还是node环境中

通过判断 Global 对象是否为 window ,如果不为window ,当前脚本没有运行在浏览器中

7、简述同步和异步的区别,如何避免回调地狱

同步方法调用一旦开始,调用者必须等到方法调用返回后,才能继续后续的行为

异步方法调用一旦开始,方法调用就会立即返回,调用者就可以继续后续的操作。而异步方法通常会在另外一个线程中,整个过程,不会阻碍调用者的工作

避免回调地狱:

1)Promise

2)async/await

3)generator

4)事件发布/监听模式

8、几种常见模块化规范的简介

CommonJS规范主要用于服务端编程,加载模块是同步的,这并不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的

AMD规范在浏览器环境中异步加载模块,而且可以并行加载多个模块。不过,AMD规范开发成本高,代码的阅读和书写比较困难

CMD规范与AMD规范很相似,都用于浏览器编程,依赖就近,延迟执行,可以很容易在Node.js中运行(依赖SPM 打包,模块的加载逻辑偏重)

ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案

9、app.use和app.get区别

app.use(path,callback)中的callback既可以是router(路由)对象又可以是函数

app.get(path,callback)中的callback只能是函数

10、说一下事件循环eventloop

1)所有同步任务都在主线程上执行,形成一个执行栈

2)当主线程中的执行栈为空时,检查事件队列是否为空,如果为空,则继续检查;如不为空,则执行3

3)取出任务队列的首部,加入执行栈

4)执行任务

5)检查执行栈,如果执行栈为空,则跳回第 2 步;如不为空,则继续检查

11、node怎么跟MongoDB建立连接

1)引入mongoose

2)使用mongoose.connect()方法连接到MongoDB数据库

3)监听连接是否成功

4)然后通过node,书写接口,对数据库进行增删改查

gulp面试

官网中这样写道:gulp是自动化构建工具。虽然经常有在用gulp,看了之后还是懵懵的。看了一下别人的理解,这样说道:

Gulp 是基于node.js的一个前端自动化构建工具,开发这可以使用它构建自动化工作流程(前端集成开发环境)。 使用gulp你可以简化工作量,让你把重点放在功能的开发上,从而提高你的开发效率和工作质量。 例如:你可以用gulp可以网页自动刷新,和MVVM开发模式很相似,如果你对vue.js有所了解的话,那么你一定不会陌生。你也可以使用gulp对sass进行预处理、代码检测、图片优化压缩、只需要一个简单的指令就能全部完成。

webpack和gulp的区别

  1. Gulp侧重于前端开发的整个过程的控制管理(像是流水线),我们可以通过给gulp配置不同的task(通过Gulp中的gulp.task()方法配置,比如启动server、sass/less预编译、文件的合并压缩,公共文件抽离,浏览器自动刷新等等)来让gulp实现不同的功能,从而构建整个前端开发流程

  2. Webpack有人也称之为模块打包机,由此也可以看出Webpack更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块,最初Webpack本身就是为前端JS代码打包而设计的,后来被扩展到其他资源的打包处理。Webpack是通过loader(加载器)和plugins(插件)对资源进行处理的。

  3. webpack的基本原理

4. 入口entry:告诉webpack从哪个文件开始构建,这个文件将作为webpack依赖关系图的开始
5.  出口output:告诉webpack在哪里输出构建后的包,包名称等
6. loader:loader让webpack处理非js文件,webpack本身只理解js
7. plugin:可以处理多种任务,从打包优化压缩,一直到重新定义环境中的变量
8. mode模式:告诉webpack使用响应的模式  production development
发布了142 篇原创文章 · 获赞 77 · 访问量 14万+

猜你喜欢

转载自blog.csdn.net/qq_38845858/article/details/103247755
今日推荐