ES6 import 引用文件夹/目录及其处理过程

1、现象  

  看redux的时候发现官网的教程里直接import了一个文件夹,我再三确定没有看错, 是一个 文件夹 (Directory), 它直接 import了一个目录!这个 文件夹/目录 底下还有一个index.js文件。 js文件只能用index.js,换其他名字都会报错。我使用的是webpack + babel-loader来编译它的,也许是webpack或者是babel的某个设定而不是ES6 import本身的,总之这样是可以用的。

  我也发现了这个问题,import是可以导入目录的,我看到的一种情况是这个index.js把文件夹下的其他的js文件导入进来,作为了唯一的对外的接口,我怀疑ES6的import导入文件夹的时候会分析文件夹的依赖关系,找到这个接口,或者默认导入index.js。

2、原理

  这个和 ES6 没有关系,是模块系统的约定以及实现。在 node 文档里面详细描述了处理过程。

  在 Node.js 模块系统中,如果 require 的模块不是核心模块,而且没有 ‘./‘ 之类的开头,那就需要从当前 package 的 node_modules 里面找,找不到就到当前 package 目录上层 node_modules 里面取... 一直找到全局 node_modules 目录。

  这样找到的往往是文件夹,所以接下来就是处理一个文件目录作为 Node 模块的情况。如果文件目录下有 package.json,就根据它的 main 字段找到 js 文件。如果没有 package.json,那就默认取文件夹下的 index.js

  由于 webpack browsersify 等模块打包工具是兼容 node 的模块系统的,自然也会进行同样的处理流程。不同的是,它们支持更灵活的配置。比如在 webpack 里面,可以通过 alias 和 external 字段配置,实现对默认 import 逻辑的自定义。

//webpack.config.js
alias: {
  Icon: path.resolve(__dirname, ‘src/components/Icon.jsx‘,
}

//test.js
import Icon from ‘Icon‘ // -> /path/to/src/components/Icon.jsx

  比如models目录下,index.js引入其他文件夹里的index,该index.js再把文件夹下其他文件引入

原文地址:https://www.cnblogs.com/goloving/p/8889585.html

时间: 2024-10-10 15:08:09

ES6 import 引用文件夹/目录及其处理过程的相关文章

高效系列:bat生成文件夹目录 & 折腾exe及icon配合

有时候我们需要新生成一套文件夹目录,就比如项目管理目录 大概的清单如下: ├─01.项目管理 │  ├─01.立项文档 │  ├─02.策划文档 │  ├─03.管理监控 │  ├─04.配置管理 │  ├─05.质量保证 │  ├─06.验收文档 │  ├─07.项目报告 │  ├─08.评审报告 │  ├─09.变更管理 │  ├─10.结项文档 │  ├─11.会议记录 │  └─12.其它文档 ├─02.需求文档 │  ├─01.用户需求说明书 │  └─02.需求规格说明书 ├─03.

在使用Eclipse时出现的两个问题:“搞定 NiosII 工程文件夹目录路径改变”与“Connected system ID hash not found on target at expected base address”

问题一: “搞定 NiosII 工程文件夹目录路径改变”的过程中,按照<NiosII的奇幻漂流-v2.0.pdf>这本书附录一章<20.2 四步搞定 NiosII 工程文件夹目录路径改变>所说的方法进行问题解决的时候,总是会出现一些小问题,例如有一个问题“xxx.sopcinfo could not be found.”最后只能删掉工程,重建project,copy源码.虽然最后能够解决路径问题,但花费精力过多,无数次的删除原工程下的project,无数次的自己重建,虽然也能解决问

关于ES6 import命令的一个补充

问题 今天查阅资料时发现,无论是阮一峰还是Mozilla网站有关ES6 import命令介绍部分都没有细致地提供这个命令后面可以跟一个文件路径的更多的细节. 其实,import命令一个典型的表达是其后面的from子句中可以直接跟一个路径(也常常跟一个省略.js扩展名的JS模块文件名). 此时,ES6在解析时会到指定路径下查找一个名字为index.js的文件.注意:js文件只能用index.js,换其他名字都会报错!!! 典型应用 有关import命令的上述情况的一个典型应用是,把此文件夹下其他.

C#递归删除文件夹目录及文件

在C#文件操作过程中,有时候需要删除相应目录,如果文件夹中含有其他文件夹或者文件,也需要一并进行删除,此时可能就需要使用递归来删除文件夹目录以及文件,递归过程中,如果遍历的对象是文件夹,则删除文件夹,若是文件,则删除对应文件.Directory.Delete方法可用于删除文件夹,File.Delete方法用于删除文件.具体的代码实现如下:/// <summary>/// 递归删除文件夹目录及文件/// </summary>/// <param name="dir&q

Amd,Cmd, Commonjs, ES6 import/export的异同点

Amd,Cmd, Commonjs, ES6 import/export等均是模块化方案 1.Commonjs使用在Nodejs上,加载模块是同步的. 2.Amd是requirejs在推广过程中对模块定义的规范化产出,异步模块定义,requirejs是对这个概念的实现,好比JavaScript语言是对ECMAScript规范的实现. 3.Cmd是seajs在推广过程中对模块定义的规范化产出,是一个同步模块定义,seajs是cmd概念的一个实现,seajs是淘宝团队提供的一个模块开发的js框架.

用面向对象实现打印文件夹目录等相关操作

package com.study;/** * 用面向对象方法实现打印文件夹目录.输出每个文件和文件夹大小 * 计算此文件夹下共有多少个子文件夹和文件 */ import java.io.File; public class DirLength { private long len; private String path; private File src; public int getFileLength() { return fileLength; } public int getDirL

Mac 中显示资源库(Library)文件夹目录的几种方法

Mac 中显示资源库(Library)文件夹目录的几种方法 Mac中Library目录在10.6.7系统之后默认隐藏的,要想找到此文件夹有如下几种方法: 1. 用命令可以使其显示: 在终端中执行命令: chflags nohidden ~/Library 可显示资源库文件夹 如想隐藏,可以在终端中执行命令: chflags hidden ~/Library 隐藏 2. 在Finder菜单中的偏好设置中设置 在Finder菜单中的偏好设置中选择边栏,勾选上设备中的硬盘. 再打开Finder,Fin

linux系统下修改文件夹目录权限

linux系统下修改文件夹目录权限 文件夹权限问题 Linux.Fedora.Ubuntu修改文件.文件夹权限的方法差不多.很多人开始接触Linux时都很头痛Linux的文件权限问题.这里告诉大家如何修改Linux文件-文件夹权限.以主文件夹下的一个名为cc的文件夹为例. 下面一步一步介绍如何修改权限: 1.打开终端.输入su(没 Linux.Fedora.Ubuntu修改文件.文件夹权限的方法差不多.很多人开始接触Linux时都很头痛Linux的文件权限问题.这里告诉大家如何修改Linux文件

Node.js 文件夹目录结构创建

第一次接触NodeJS的文件系统就被它的异步的响应给搞晕了,后来发现NodeJS判断文件夹是否存在和创建文件夹是还有同步方法的,但是还是想尝试使用异步的方法去实现. 使用的方法:fs.exists(path, callback);fs.mkdir(path, [mode], callback); 实现文件夹目录结构的创建代码实现如下: //创建文件夹 function mkdir(pos, dirArray,_callback){ var len = dirArray.length; conso