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

最新推荐文章于 2024-04-27 14:28:12 发布
最新推荐文章于 2024-04-27 14:28:12 发布
阅读量7.4k 收藏 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. 没有找到该文件，报错

列队猫
关注
  • 8
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
import...from... 和 require 如何找到模块位置？
郊眠寺
01-05 1445
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
rollup-plugin-root-import:添加通过根路径导入模块的功能，例如Meteor
05-17
汇总插件根导入添加通过根路径导入模块的功能，例如 。 // import a module relative to a specified root directoryimport UserModel from '/models/user' ;// illustrative - if we were in /views/user, we can ...
import(‘@/路径‘)和import(‘../路径‘)区别
HISTRORY的博客
06-09 1366
import('@/路径')表示从当前项目的根目录开始寻找模块，@符号表示根目录的别名，通常是在webpack等打包工具中定义的。一般来说，import('@/路径')用于导入项目中的公用模块，而import('../路径')则用于导入当前模块的相关模块。import('@/路径')和import('../路径')都是ES6模块化中的导入语句，但是它们的路径表示方式略有不同。import('../路径')表示从当前模块所在的目录开始寻找模块，../表示上级目录，可以使用相对路径来导入模块。
【js文件路径】
最新发布
qq_43298353的博客
04-27 259
2.相对路径（相对于html文件的位置）
JS的相对路径和import
zhansan的博客
12-03 969
详谈 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 ...
vue引入少写路径
seimeii的博客
12-10 306
第一步 新建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 3490
定义模块ES6之后，使用模块语法（import/export）时，每个文件都会成为它自己的模块，带有一个私有全名空间。顶层的函数和变量不会污染全局全名空间。要为其他模块暴露函数，类，和变量以便import的话，可以用export关键字。// not exported function somethingPrivate() { console.log('TOP SECRET') } expor
JSP引入JS/CSS路径到底怎么写才好
诺浅的专栏
05-08 5542
如何在JSP页面引入一个JS或者CSS 以下所有的例子中的页面我们设定为a.jsp 方案一，错误的使用相对路径或绝对路径引入 相对路径 <script type="text/javascript" src="js/doctorstation/jquery-1.12.4.min.js"></script> 或者 <script type="text/ja...
eslint-plugin-absolute-import:强制在导入中使用绝对路径
05-08
eslint插件绝对导入 该插件旨在支持lints of ES2015 +（ES6 +）导入/导出语法，并防止文件路径和导入名称拼写错误的问题。 ES2015 +静态模块语法打算提供的所有优点，已在您的编辑器中进行了标记。规则静态分析禁止...
import-from:像`require（）`一样从一个给定的路径导入一个模块
05-26
进口于像从给定路径导入模块安装 $ npm install import-from用法 const importFrom = require ( 'import-from' ) ;// There is a file at `./foo/bar.js`importFrom ( 'foo' , './bar' ) ;原料药importFrom...
import-remote:导入远程模块
05-13
import-remote 说明 一个远程加载JS模块的库。支持webpack4/5。 它的初衷是： 希望像html-webpack-plugin插件生成HTML入口文件那样生成一个JS入口文件； 插件的配置参数基本和html-webpack-plugin保持一致，以便只需...
babel-plugin-root-import：添加通过根路径导入模块的机会
01-30
Babel插件增加了使用import和require的机会，并带有基于root的路径。 例 // Without this plugin... import SomeExample from '../../../some/example.js' ; const OtherExample = require ( '../../../other/...
js相对路径写法
我会好好努力的
05-31 1万+
"/" 表示根目录开始 "./" 表示同级目录开始 "../" 表示上一级目录开始；
import搜索路径
weixin_30922589的博客
07-04 47
当你导入一个模块，Python的解释器对模块位置的搜索顺序如下： 1、当前目录 2、如果不在当前目录，Python则搜索PYTHONPATH下的每一个目录。 3、如果上述两个都找不到，Python会察看安装默认路径 因此，优先搜索的路径是当前目录，其次是搜索PYTHONPATH下的每个目录，最后是察看Python的安装路径 转载于:https://www.cnblogs.com/WinBe...
总结js中关于路径的写法
Rance_King的博客
03-23 6594
在js中，经常会出现的一个问题就是路径写不对的问题，尤其是相对路径理解不到位的问题。在此进行总结： 首先，相对路径最重要的一点是看：引用者是谁， 经常会搞错路径的原因就在引用者上，因为对于一张背景图片或者字体来讲，引用它的有可能是html标签中的style，有可能是css文件，所以对于引用者不同，路径的写法也有不同。 单独写一个/指的是根目录； ./指的是同级别的目录，如果写././指的与./是...
Java代码,JS,HTML中请求路径的写法
weixin_45896980的博客
02-23 845
概述:***请求路径***指的就是客户端发请求时请求资源的地址格式规范 *请求路经写法可以分为***绝对路径***和***相对路径 规范一:html中同级资源路径的地址写法 规范二:html中上级资源路径的写法 规范三:JS和Java中路径的写法 在JS和Java中可以动态的获取项目路径,从而解决了硬编码的问题,所以绝对路径是JS和Java中路径写法的最佳选择,下面看俩例子 Java中路径...
js文件的引用路径 绝对路径的写法
热门推荐
04-21 2万+
ES6导入失败的原因一（包名未加.js后缀）
weixin_46037494的博客
06-13 94
ES6导入包报错
python导入文件时，文件需要在哪个指定路径吗？如何将自己写的word文件导入python
05-01
Python 导入文件时，需要将文件放在 Python 可以搜索到的路径下。Python 会根据 sys.path 中设置的路径搜索模块或文件。常见的路径包括当前工作目录、PYTHONPATH 环境变量路径、Python 安装目录下的 site-packages 文件夹等。 在 Python 中打开 Word 文件，可以使用第三方库 python-docx。可以使用 pip 安装： ``` pip install python-docx ``` 然后在 Python 中导入库： ``` import docx ``` 使用 docx.Document() 方法打开 Word 文件，例如： ``` doc = docx.Document('example.docx') ``` 其中 example.docx 是你要打开的 Word 文件名，需与 Python 文件在同一文件夹下。如果文件不在同一文件夹下，可以提供文件的绝对路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

列队猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值