17-Vite中导入JSON及Glob导入原创

我们来继续的做V功能的介绍，这一章我们来看一下如何的在wait里导入Jason以及globe导入。关于在V里边导入Jason，其实事实上呢，是可以直接的作为一个模块来导入的，同样它还支持句名的导入，这样的情况下我们就可以使用为给我们提供的tree shaking了。关于导入是为了支持的一个特殊的情况。这个导入方式呢，是V的一个功效，它并不是浏览器对于模块天生支持的，它使用的特殊的import.ma的lo函数来进行多个文件的导入，这样的情况下呢，我们可以一下子导入一组文件，对一组文件的模块进行特殊处理了。下面呢，我们来演示一下。回到Vs code的，我们还是在wait basics文了这个项目里边去实验，我们在这项目的game目录下面创建一个文件夹，叫做Jason，在JA森文件夹里我们创建一个新的文件，我们可以取名为德塔点Jason，在这里边呢，我们来写一个杰森字符串，我们先定义一个XX的值呢，可以定义为100这个数值，然后我们再定义一个text，诶，定义一个字符串hello，这个Json文件定义好了以后呢，接下来呢，我们在man JS里边去引入它，我们通过import来导入一个模块，模块的名字叫做data，然后from，应该是当前目录下的Json下的data.jason好，接下来我们来看一下V，把Jason导入进来以后，这个data对象是个什么样的内容，我们可以看l log一下，Data保存一下，然后我们进入到v basics vanilla这个目录下面执行一下P。

Run d，好，然后呢，我们在这个浏览器里边打开我们这个项目，然后我们打开控制台。来看一下，这里打印了一个对象，对象里面包含了text以及X，说明weight已经将我们导入的Jason变成了一个对象了，那我们就可以直接的去解构我们某一个变量，比方说这里我们可以去解构出text，然后我们可以打印这个text保存一下，这样的话我们hello这个字符串也就打印出来了，当然X也可以结构出来，这样做的好处呢？如果我们JS文件的内容特别的多，我们只导出了text。

那么其他的内容wait会通过tree Sha帮助我们把它去掉。关于wait导入Jason是非常简单的，下面呢，我们来看一下wait如何通过import.me.lo函数来从我们的文件系统里面导入多个模块。回到代码，我们现在在我们项目根目录下面创建一个新的文件夹，叫做glo。在这个文件夹下面我们创建两个JS，一个Json JS我们可以取名为1.js。我们通过export对port。

然后导出一个字符串M1，保存一下。然后我们在创建一个新的文件叫M2 m2的内容呢也是export defa，然后导出一个字符串M2，然后我们在这个目录下面再创建一个Jason文件，我们可以取名为叫做G1.jason，然后我们在这里边呢，去随便的编写一个Jason字符串，我们可以写个X100保存一下。接下来呢，我们在慢JS里边通过globe的方式来去导入这一些文件，我们可以把慢JS copy一下，然后粘贴，把这个副本改名为man.Jason。然后我们把这个man GS内容去掉，然后呢，我们定义一个常量cost，名字叫做modus，等于我们去import.met.globe。

这个函数的后面呢，是一个导入的目录的路径，注意这里边的路径呢，我们一定要使用相对或者绝对路径，其他的路径是不能用的，比方说我们可以使用一个点杠，当前目录下的globe下的星，如果我们不写后边的文件的话，来我们看一下效果，我们可以在这下面呢CAno.log以下modules，好，我们看到这里呢，返回的是一个空的对象。如果我们可以在globe的后面写一个星，这样的情况下表示我们要导入globe这个目录下面所有的资源，那么大家看到就返回了一个对象，我们来仔细的观察一下这个对象，对象呢，K就是我们的文件和目录的名字，它的value呢是一个导入函数。那这样的话，我们现在就有了思路，我们可以执行这个导入函数，会返回我们导入的模块。好，那我们现在改造一下代码，我们可以通过object.interest把modus放进去，这样的情况下会返回一个数组，数组里的第一个元素是我们的K，第二个元素是Y6，我们可以打印下，看一下conso log保存好。我们看到打印了三个数组，每个数组的第一个元素就是我们的K，第二个参数就是我们导入模块的函数，那么接下来呢，我们可以把这个数组进行遍历。

在这后边我们通过for each来遍历，那很显然在这个回调函数里边，我们就可以拿到每个元素，在每个元素的导入的过程中，我们可以给它解构出来，比方说第一个元素的名字我们给它起个别名叫K，第二个元素的名字我们可以给它起个别名叫做value，那么接下来呢，我们就可以consulto log一下K和value了，保存一下，我们来看一下效果，跟刚才的结果呢是一样的，那么接下来我们可以去调用一下我们这个所谓的模块导入函数，调用方法呢，就是我们可以通过value函数的调用来返回一个promise，这个promise的话，那当然我们要问一下，在这个返回结果里边，我们能拿到这个模块module，然后呢，我们可以去打印一下这个模块了，Colo一下module post。

存，这样话呢，我们就拿到了这个每个模块，每个模块里边有个default，所以呢我们可以去打印一下model.default保存，这样的话就可以把我们每个模块的结果给打印出来了，那同时呢，我们也可以把模块的名字放在这前边，比方说我们写个K保存一下，好，这样的话呢，我们就可以对每个模块进行单独使用了。这里有一个点需要注意的是，我们这个模块其实实上呢都是由wait来去帮助我们完成的，事实上这个globe并不是我们浏览器里自带的，如何验证呢？现在我们可以打开source这个文件夹，在这里边呢，我们可以找到man.JS，我们来仔细的观察一下这个man.JS的浏览器端的代码，我们就知道了，我们看到其实事实上呢，它是定义了一个modus的变量，里边呢，可以通过我们刚才看到的K和Y6单独的进行定义，然后呢，再通过我们刚才写的代码来进行单独的。

展示，也就是说这个工作呢，其事实上是由weight来帮助我们完成的，我们可以进一步的来去验证，在globe里边还给我们提供了另外一个方法，叫做globe e，好保存一下，现在呢，我们打开conso，现在我们来看一下这个value的值，因为这个E呢，返回的就不是我们真正的异步的模块了，所以我们这个代码要注释一下，然后我们在上边呢，我们可以cancel.log一下K和value保存一下，好我们看一下这个结果呢，就不再是刚才的那个模块导入的异步函数了，而是具体的一个模块了，那就说现在我们可以直接使用这个模块下面的default了，那我们可以在这里面写一个value.default。

保存一下，好，我们的结果呢就出来了，我们再次打开sources看一下mad JS，你会发现这个代码呢，其实实上它是帮助我们把每个模块都导入进来，起了一个别名，然后呢，我们再通过这个别名来进行处理，这就说明我们的V在中间一直在工作，帮我们解决一些问题。接着呢，我们再去研究一下导入的这个glo的语法，我们可以打开conso在这里头，其实事实上呢，我们也可以去入一个星点J保存一下，大家发现现在呢，我们只把JS模块给导入进来了，当然了我们也可以写星点Jason，那如果是我们这里边去使用其他的一些正则可不可以呢？事实上是支持的，比方说我们在星的后面加一个中括号，然后我们写个一保存一下，大家发现这里边呢，只导入了G1.jc，那如果是我们把扩展名改成GS，就会导入1.gs，那如果是我们把扩展名改成星，那这样的话呢，就会把G1.j和me点给导入进来了，那就是说这里我们是可以随意的定义一些正则的，那么关于这个globe函数的细节呢，大家可以参照这个fast globe，因为wait就使用的fast globe来去完成这个任务的，那么具体的细节呢，大家可以看看它的官网，这里边介绍了一些基础的语法。

以及高级的一些语法，这里呢，我们就不再详细的赘述了。最后一点，官网上提到我们不能在这个globe语法里面去使用变量，比方说我们把这个变成一个变量的格式是不允许的，比方说写一个XX可能代表是一个字符串globe，这是不允许的，所以呢，我们一定要使用一个句化的一个字符串。

好，关于V导入Jason以及格lo导入，我们就介绍这么多，大家加油。