Node+Gulp+webpack ゝ一世哀愁。 2021-08-13 14:35 374阅读 0赞 # 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
还没有评论，来说两句吧...