import与require

最新推荐文章于 2024-12-23 09:08:01 发布
原创 最新推荐文章于 2024-12-23 09:08:01 发布 · 621 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细对比了JavaScript中import与require两种模块加载方式的特点与应用场景。import属于ES6标准，支持静态分析；require遵循CommonJS规范，适用于运行时加载。

今天的面试觉得前面回答的还挺好的，到了import与require这里有些懵逼，老实说在使用的时候是真的没有考虑过这么多，一懵逼就乱说，可以说如果今天挂掉了，就是这里垮掉了。

首先问了我，import与require都是什么加载方式？

 什么东西？这什么玩意？加载方式，我就 记得把他import进去和require进去就好了啊。

然后，面试官看我一脸懵逼就问我说，那这两个都是怎么引入的？

我说就import和require一下。。。

面试官说：那在哪里引入呢？

我说：在页面最上方，嗯，script标签的最上方。

他说，那你说，他们是什么加载方式？

我：。。。。



整个过程其实复杂又曲折，感觉面试官是真的在很有耐心的在引导我回答，可是，真是全是我没有听过的名词，我真的不知道。

然后回答的都是错的，感觉我面试要挂了。哎！！！


好了，日记就不写了。现在好好看看这他妈的究竟是什么：

加载方式 规范 命令  特点
运行时加载 CommonJS/AMD require 社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
编译时加载 ESMAScript6+ import 语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。
require是在运行时加载，所以，他可以一边运行，一遍请求和加载，所以，他可以写在文件的中间，而import是在编译时加载，所以，他写在页面的开头，样他就在整个页面加载之前，他需要的东西全部import进来，否则会编译不通过的。


那么问题来了 ，他们究竟是怎样的引入过程，这样就很容易理解了

以下是我的个人理解，今天面试完，面试官问我你还有什么想问的时候，其实我是想要问这个的，那个我怕他觉得我没救了就问了其他的问题：（如果是错误的，后期会修改的）：

import是页面的最上方的加载，是一种静态的加载，那么他会把父级的模块引入到该文件中，像是src的样子，而require是时一种动态的加载，他是在使用的时候在去请求引入的资源，他是动态的，像是href的样子，是作为一种中间的链接，并不写入文件中。


关于import和require的来源相信大家都很清晰，require是commonJS规范的语法，而nodeJS是基于commonJS的，所以在node中使用的是require。ES6是生于node之后，在ES6中import和export是一对的。


在有的后期框架中，require和import是可以混合用的。


至于如何使用，看：

import和require的用法

他说的真的很清晰。


秋招真的很累，现在手上有一个offer，可是真的不想去。并非自持清高而是我觉得我并不差。



Import与Require
Dove言和
11-27 846
一、基本语法 require用于读取并执行js文件，并返回该模块的exports对象。若无指定模块，会报错。 Node使用CommonJS模块规范，require属于node的内置命令。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。 // example.js var invisible = function () { console.log("i...
JavaScript之import&require总结
抽象的螺旋
05-10 850
我们在写js代码时，为了方便维护，会使用高内聚低耦合的方式把不同的功能写入不同的文件中，但是不同的文件如何交互呢？这个时候我们的import、require就可以出场了，它们就是为了解决在A文件中引入B文件中的内容的。因此我们可以大胆的猜测，有import应该就有export，这是因为js语言不是面向对象的语言，无法像java那样直接导入其他类文件就好，需要显示的指出哪些对象要导出。
require与import的使用容易混淆
TTST_HTSN的博客
04-10 947
首先我们要明白require与import的基本语法： require的基本语法：在导出的文件中定义module.export,导出的对象的类型不予限定（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require()方法引入对象即可，换一种说法就是require相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，...
import、require、export、module.exports 混合使用详解
油墨香^-^的博客
03-30 3175
摘要：本文对比了CommonJS和ES6模块系统的差异，分别展示了两种模块规范的导入导出语法。重点介绍了混合使用场景下的互操作方案，包括ES6导入CommonJS、CommonJS动态导入ES6模块等。提供了package.json配置建议、文件扩展名规范和最佳实践，如保持一致性、双模式包设计和渐进式迁移策略。同时针对常见问题给出解决方案，推荐新项目优先使用ES6模块，现有项目逐步迁移，避免混合语法。通过理解这些概念，开发者可以灵活应用不同模块系统。（149字）
java require_干货:import和require如何在项目中混用
weixin_32308039的博客
02-24 1519
前言自从js出了es6之后，小伙伴们都在项目中愉快的用起了import,export default,但是，当我们用import方式引入npm第三方模块的时候，却会发现，npm包导出的方式大多是采用了commonjs规范的require,module.exports。这中间babel究竟是如何处理的呢？相信很多小伙伴都有很多问好！那么接下来，我们就来看看这里面的奥秘吧！module.exports...
面试：require 和 import 的区别？
qq_46580571的博客
08-03 386
require 和 import 的区别
【JS面试题】require 和 import 区别
Milk~每天分享一点点，技术进步一点点
08-11 755
require 和 import 区别 在研究react和webpack的时候，经常看到在js文件中出现require，还有import，这两个都是为了JS模块化编程使用。CSS的是@import 1.ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。 // CommonJS模块 let { stat, exists, readFile } = require('f
前端开发中 import 与 require 的深度辨析
yan1915766026的博客
12-23 1684
在前端开发的模块化进程中，import 和 require 都有着不可替代的地位和作用。import 以其静态编译特性、丰富的导入语法和强绑定机制，在现代前端框架和构建工具中大放异彩，为实现高效的代码组织、优化和静态类型检查提供了有力支持。而 require 凭借其简单易用、运行时加载以及在 Node.js 后端开发中的广泛应用，在特定场景下依然是不可或缺的模块加载方式。展望未来，随着前端技术的不断发展，模块化的需求将更加精细化和多样化。
JavaScript中使用import 和require打包后实现原理分析
10-18
在打包工具的作用下，无论是import还是require导入的模块，最终都会被转换成webpack定义的__webpack_require__函数调用的形式，以保证代码在浏览器端能够正常运行。 具体来说，在webpack的打包结果中，我们可以看到...
Javascript(es2016) import和require用法和区别详解
10-19
在ES2016中，主要使用import和require两种方式来实现模块的导入和导出，这两者之间有一些重要的用法和区别。 首先，我们需要了解export和import的基本用法。在ES2016中，export可以将一个变量、函数、类或对象导出...
require，import区别
weixin_34269583的博客
08-02 583
require，import区别 遵循的模块化规范不一样 模块化规范：即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScript 是那么的裸奔呢——全局变量就是它的模块化规范。 require/exports 出生在野生规范当中，什么叫做野生规范？即这些规范是 JavaScript 社区中的开...
require和import的区别
风流倜傥唐伯虎的博客
08-13 493
首发于JavaScript 写文章 require和import的区别 秦一 热爱生活的平凡人 88 人赞同了该文章 当前端应用越来越复杂时，我们想要将代码分割成不同的模块，便于复用、按需加载等。 require 和 import 分别是不同模块化规范下引入模块的语句，下文将介绍这两种方式的不同之处。 1. 出现的时间、地点不同 年份 出处 require/exports 2009 CommonJS import/export 2015 E
import和require的区别
qq_36605557的博客
06-06 297
https://www.cnblogs.com/sunshq/p/7922182.html
引用文件，require，require_once,incloud,incloud_once各自用途及区别
qq_39028239的博客
12-06 2058
引用文件时指将另一个源文件的全部内容包含到当前源文件中进行使用，减少代码的重用性，incloud require incloud_once require_once这四种语句的区别 incloud 使用incloud引用文件时，只有代码执行到incloud语句时才将外部文件引用进来并读取文件内容。当所引用的外部文件发生错误时，系统只给出一个警告，而整个PHP文件则继续向下执行。 requir
require 和 include的区别
dsa159245的专栏
11-27 406
require  这个函数通常放在PHP程序最前面 。 PHP程序在执行前，就会先将require指定的文件读取，使它成为PHP程序的一部分。常用这个函数引入PHP文件。        include 这个函数一般使用在流程控制的时候使用。可以先判断是否需要读取指定文件，再决定是否读取文件。执行的时候才读取。 一下为补充 1.include有返回值，而require没有.
(function (exports, require, module, __filename, __dirname) ... SyntaxError: Unexpected token *
forward_huan的博客
07-22 2371
运行环境 node: v10.15.3 npm: 6.4.1 使用VSCode的Code Runner插件运行 运行的代码 import * as date_fns from "date-fns" console.log(date_fns.isValid(new Date("abc"))) console.log(date_fns.isValid(new Date("2020-06-28 17:26:03"))) 异常信息 d:\Project\TypeScript\markdown\Date\us
Node.js常见面试题
weixin_44767973的博客
01-18 7873
因为所有的NodeJS文件在执行的时候都会被包裹到一个函数中，this都被修改为module.exports。（详细请看之前的Node模块原理分析【详细】那篇文章）。和浏览器中一样NodeJS中也有事件循环（Event Loop），但是由于代码执行的宿主环境和应用场景不同，所以两者的事件循环也有所不同。扩展阅读：在NodeJS中使用libuv实现了Event Loop。源码地址：https://github.com/libuv/libuv什么是包？
用法：node模块都具备的方法（exports、module、require、__filename、__dirname）
weixin_30826095的博客
07-26 518
凡是玩弄nodejs的人，都明白，每一个模块都有exports、module、require、__filename、__dirname的方法 清楚了解方法的用法后，玩转node就等于清楚了日常讲话的内容 (function(exports,require,module,__filename,__dirname){ //打印一出，所有模块的类型和值一目了然 console...
require方法加载规则
Fairy的博客
03-25 923
一.优先从缓存加载规则 二.路径形式的模块： ./ 当前目录，不可省略 ../上一级目录，不可省略 /xxx d:/a/foo.js几乎不用 .js后缀名可以省略 三.核心模块的本质文件： 核心模块文件已经被编译到了二进制文件中，我们只需要按照名字来加载就可以了 require（'fs'） require（'http'） 四.第三方模块： ...
typescript 中 require 与 import
最新发布
06-15
### TypeScript 中 `require` 和 `import` 的区别及使用场景 在 TypeScript 中，模块导入可以通过两种主要方式实现：`require` 和 `import`。这两种方式在语法、功能和适用场景上存在显著差异。 #### 1. `require` 的特点与用法 `require` 是一种基于 CommonJS 模块系统的导入方式，主要用于 Node.js 环境中的模块管理[^1]。它通过动态加载模块的方式，返回一个模块对象。以下是其基本用法： ```typescript const module = require('module-name'); ``` - **动态加载**：`require` 支持在运行时动态加载模块。 - **兼容性**：适用于旧版 JavaScript 和 Node.js 环境，但在现代浏览器环境中不被支持。 - **局限性**：无法直接用于 ES6 模块系统，且不具备静态分析能力，这可能影响代码优化和工具支持。 #### 2. `import` 的特点与用法 `import` 是 ES6 标准中引入的模块导入语法，推荐在现代 TypeScript 和 JavaScript 开发中使用[^2]。它的语法更加直观，支持静态分析，从而提升性能和工具链的支持。以下是常见的 `import` 用法： - **默认导入**： ```typescript import myModule from 'module-name'; ``` - **命名导入**： ```typescript import { myFunction, myVar } from 'module-name'; ``` - **通配符导入**： ```typescript import * as myModule from 'module-name'; ``` - **侧效应用导入**（仅执行模块副作用而不导入任何内容）： ```typescript import 'module-name'; ``` #### 3. `export =` 和 `import = require()` 的特殊用法 `export =` 和 `import = require()` 是 TypeScript 提供的一种特殊语法，用于与 CommonJS 和 AMD 等旧模块系统的兼容性[^2]。例如： ```typescript // module.ts export = { myVar: 123, myFunction() { console.log('Hello, world!'); } }; // main.ts import module = require('./module'); console.log(module.myVar); // 输出 123 module.myFunction(); // 输出 "Hello, world!" ``` 这种语法允许导出任意类型的实体（类、函数、对象等），但并不符合 ES6 模块的标准。 #### 4. 区别总结 | 特性 | `require` | `import` | |--------------------|-------------------------------|------------------------------| | 模块系统 | CommonJS | ES6 | | 静态分析支持 | 不支持 | 支持 | | 动态加载支持 | 支持 | 不支持 | | 使用场景 | Node.js 环境 | 现代前端开发 | | 工具链优化 | 较差 | 更优 | #### 5. 推荐使用场景 - **`require`**：适用于需要与旧版 Node.js 模块或 CommonJS 系统兼容的场景。 - **`import`**：推荐在现代 TypeScript 和 JavaScript 开发中使用，特别是在需要静态分析、代码分割和树摇动优化的情况下。 ```typescript // 示例：使用 import 导入模块 import { myFunction } from './module'; myFunction(); // 调用模块中的函数 ```
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值