【js】import导入模块时路径的写法：路径和后缀究竟需要写吗？

最新推荐文章于 2024-09-30 17:44:50 发布
最新推荐文章于 2024-09-30 17:44:50 发布
阅读量7.8k 收藏 13
点赞数 8
分类专栏： JS 文章标签： npm import nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43915356/article/details/116741856
版权

文章目录

前言

在学习webpack的时候发现有时候import需要写相对路径，有时候却只写个名字就可以，甚至后缀名写不写貌似也没有个定论

其实使用import命令引入模块和 ES6 没有关系，是依赖于当前环境的模块系统的约定以及实现

比如webpack在nodejs环境中使用，node 文档里面详细描述了处理过程：

当模块拥有路径也拥有后缀时

  1. 此时require方法根据模块路径查找模块，如A路径，直接引入对应文件

当模块拥有路径但没有后缀时

  1. 如果模块后缀省略，先找同名JS文件
  2. 如果没有找到再找同名JS文件夹
  3. 如果找到了同名文件夹，找文件夹中的index.js
  4. 如果文件夹中没有index.js就会去当前文件夹中的package.js文件中查找main选项中的入口文件执行
  5. 如果指定的入口文件不存在或者没有指定入口文件就会报错，模块没有找到

当模块没有路径且没有后缀时（只有名字）

在这里插入图片描述

  1. 此时Node.js会假设它是系统模块并进行查找

  2. 如果没有找到，则认为是第三方模块，node.js会去node_modules文件夹中查找，若当前目录没有node_modules文件夹，会去父目录node_modules文件夹中去找，一直找到全局 node_modules 目录

  3. node.js在node_modules文件中首先看是否有该名字的JS文件

  4. 如果没有，node.js在node_modules文件中再看是否有该名字的文件夹

  5. 如果是文件夹看里面是否有index.js

  6. 如果没有indexis查看该文件夹中的package.json中的main选项确定模块入口文件执行

  7. 没有找到该文件，报错

vue3+vite - 报错TypeError: Failed to fetch dynamically imported module: xx，vue3项目报错无法获取动态导入的模块，vite报错！
高级前端工程师
07-06 2306
vue3，vite，vite-plugin-vue，nuxt3，报错，TypeError: Failed to fetch dynamically imported module，无法获取动态导入的模块，vue3打包报错，vue3编译运行报错，如何解决错误，vite build打包以后报错Failed to fetch，Vue3报错详细解决，Vue3+TS错误解决，换浏览器，清缓存，退出登录重新登陆，文件路径没写对，要么是没加组件名的后缀vue，路径写错了，加了setup语法糖导致的这个报错，eslint，
python导入自定义模块_python引入不同文件夹下的自定义模块方法
weixin_39795065的博客
11-23 1042
python引入不同文件夹下的自定义模块方法初学Python，这个问题搞了我好久，现在来分享下我的解决思路，希望可以帮到大家。先说下python引入模块的顺序：首先现在当前文件夹下查找，如果没有找到则查找Python系统变量中的模块。所以说，当我们引入同一个文件夹下的自定义模块时，可以很顺利的引入而不会报错。那么问题来了，不同文件夹下的呢？也用一样的方法吗？举个栗子：现在我们想在subPack1文...
js es6 中 import 和 export的用法
孙朝阳的博客
02-05 5013
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。—— ECMAScript 6 入门 阮一峰 用法示例如下： //导出 ept.js(导出模块所在文件) export var name = "scy"; //对应导入 import {name} from './ept.js'; //导
详谈 import 路径
Leon的博客
12-17 1万+
import路径 import {test} from './test'; 花括号 import {test} from './test'; import test from './test'; 如果有默认导出export default则可以省略花括号，且import的模块名是随意的，如： // a.js export default 'test'; // b.js import a ...
Python：import语句的详细解析（绝对路径导入和相对路径导入）
最新发布
前进，才知道自己的渺小
09-30 1916
import语句是Python中一个很重要的机制，允许在一个文件中访问另一个文件的函数、类、变量等，本文就将进行详细介绍。
JS的相对路径和import
zhansan的博客
12-03 1048
vue引入少写路径
seimeii的博客
12-10 340
第一步 新建index.js文件 import GroupMonitoring from './GroupMonitoring.vue'; export default GroupMonitoring; 第二步 引入路径 为了少写一层路径 import Login from 'Login'就行了 不然要写成 import Login from 'Login/Login' ...
JavaScript import/export
gnimgnot
11-17 3529
定义模块ES6之后，使用模块语法（import/export）时，每个文件都会成为它自己的模块，带有一个私有全名空间。顶层的函数和变量不会污染全局全名空间。要为其他模块暴露函数，类，和变量以便import的话，可以用export关键字。// not exported function somethingPrivate() { console.log('TOP SECRET') } expor
JSP引入JS/CSS路径到底怎么写才好
诺浅的专栏
05-08 5645
如何在JSP页面引入一个JS或者CSS 以下所有的例子中的页面我们设定为a.jsp 方案一，错误的使用相对路径或绝对路径引入 相对路径 <script type="text/javascript" src="js/doctorstation/jquery-1.12.4.min.js"></script> 或者 <script type="text/ja...
CommonJS 和 ES6 Module 究竟有什么区别？
qq_43623970的博客
06-27 437
CommonJS 和 ES6 Module 究竟有什么区别？ 作为前端开发者，你是否也曾有过疑惑，为什么可以代码中可以直接使用 require 方法加载模块，为什么加载第三方包的时候 Node 会知道选择哪个文件作为入口，以及常被问到的，为什么 ES6 Module export 基础数据类型的时候会有【引用类型】的效果？ 带着这些疑问和好奇，希望阅读这篇文章能解答你的疑惑。 CommonJS 规范 在 ES6 之前，ECMAScript 并没有提供代码组织的方式，那时候通常是基于 IIFE 来实现“模块化
前端模块化(CMJ和ESM)
darabiuz的博客
01-18 2845
12 es6模块化 在ES6出现之前，JS不像其他语言拥有“模块化”这一概念，比如python的import，就连css也有@import，于是为了支持JS模块化，我们使用类、立即执行函数或者第三方插件(RequireJS、seaJS)来实现模块化，在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。es6成为浏览器和服务器通用的模块解决方案。 一个文件就是一个模块, 模块中的数据都是私有的，ES6模块化模块和NodeJS中一样, 可
【JavaScript系列】深入javascript的主流的模块规范
saucxs
07-02 387
一、前言 目前主流的模块规范： 1、UMD通用模块 2、CommonJs 3、es6 module 二、UMD模块（通用模块） (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = fact...
js相对路径写法
我会好好努力的
05-31 1万+
"/" 表示根目录开始 "./" 表示同级目录开始 "../" 表示上一级目录开始；
javascript 中的import
听海边涛声
04-30 676
javascript 中的import
import搜索路径
weixin_30922589的博客
07-04 57
当你导入一个模块，Python的解释器对模块位置的搜索顺序如下： 1、当前目录 2、如果不在当前目录，Python则搜索PYTHONPATH下的每一个目录。 3、如果上述两个都找不到，Python会察看安装默认路径 因此，优先搜索的路径是当前目录，其次是搜索PYTHONPATH下的每个目录，最后是察看Python的安装路径 转载于:https://www.cnblogs.com/WinBe...
总结js中关于路径的写法
Rance_King的博客
03-23 6965
在js中，经常会出现的一个问题就是路径写不对的问题，尤其是相对路径理解不到位的问题。在此进行总结： 首先，相对路径最重要的一点是看：引用者是谁， 经常会搞错路径的原因就在引用者上，因为对于一张背景图片或者字体来讲，引用它的有可能是html标签中的style，有可能是css文件，所以对于引用者不同，路径的写法也有不同。 单独写一个/指的是根目录； ./指的是同级别的目录，如果写././指的与./是...
Java代码,JS,HTML中请求路径的写法
weixin_45896980的博客
02-23 899
概述:***请求路径***指的就是客户端发请求时请求资源的地址格式规范 *请求路经写法可以分为***绝对路径***和***相对路径 规范一:html中同级资源路径的地址写法 规范二:html中上级资源路径的写法 规范三:JS和Java中路径的写法 在JS和Java中可以动态的获取项目路径,从而解决了硬编码的问题,所以绝对路径是JS和Java中路径写法的最佳选择,下面看俩例子 Java中路径...
js文件的引用路径 绝对路径的写法
热门推荐
04-21 2万+
【js文件路径】
qq_43298353的博客
04-27 578
2.相对路径（相对于html文件的位置）
Python模块导入详解：路径搜索与命名规则
在导入模块时，需要注意的是模块文件名和导入时的引用名之间的区别。比如，`b.py`的实际文件名并不影响导入时的使用，我们通常使用`import b`而不是`import b.py`。此外，Python的标准库提供了许多预定义的模块，如`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

列队猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值