JS--ES6--import一个文件夹自动引入index.js

末蓝、 2023-09-28 20:16 9阅读 0赞

原文网址：[JS--ES6--import一个文件夹自动引入index.js\_IT利刃出鞘的博客-CSDN博客][JS--ES6--import_index.js_IT_-CSDN]

## 简介 ##

**说明**

本文介绍JavaScript（ES6）在导入一个文件夹时自动引入index.js的特性。

**注意**

有人说：导入文件夹自动导入index.js不是JavaScript的特性，而是Node.js的特性。同时，Webpack支持Node，所以如果用了Webpack也可以自动引入index.js。

目前我不确定导入是JS的特性还是Node.js的特性。文章最后我写了测试程序，测试成功。但我是用Webstorm打开谷歌浏览器测试的，不确定是不是Webstorm内部是Node.js做的服务器，所以不敢下结论。

## JS导入文件的方式 ##

**法1：导入js文件（带后缀的全称）**

import router from './router/index.js'

**法2：导入js文件（去掉后缀）**

import router from './router/index'

**法3：导入文件夹（自动导入index.js）**

如果导入的是一个文件夹，它默认会去找这个文件夹下边的index.js

import router from './router'

## 示例 ##

### 代码 ###

代码结构

![36f61e05f2364e8cb7a6883f219e2e97.png][]

demo.html

<!doctype html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>This is title</title>
    </head>
    
    <body>
    
    <div class="container">
        这是div元素
    </div>
    
    <script type="module">
    import abc from "../js"
    
    console.log(abc.name);
    
    </script>
    </body>
    </html>

index.js

export default {
        name: 'Tony'
    }

### 测试 ###

用WebStorm打开html。

![d8bf3fee7ea34df5abb10d6536696f5a.png][]

[JS--ES6--import_index.js_IT_-CSDN]: https://knife.blog.csdn.net/article/details/126338292
[36f61e05f2364e8cb7a6883f219e2e97.png]: https://img-blog.csdnimg.cn/36f61e05f2364e8cb7a6883f219e2e97.png
[d8bf3fee7ea34df5abb10d6536696f5a.png]: https://img-blog.csdnimg.cn/d8bf3fee7ea34df5abb10d6536696f5a.png