ES6中模块导入遇到的问题及其解决办法

简介: 今天遇到了一个小的问题,我们来看一下,情况是这样的:在没遇到过这个坑之前,如果需要引入一个模块,我通常的做法都是在HTML文件中内嵌一个script标签,并通过指定 type="module" 来实现;然而今天我却没有按照往常这样做,而是指定两个js文件,其中一个文件通过 export 暴露出需要的变量和函数,在另一个文件中通过 import 导入,结果就遇到了报错,来给各位看下报错信息:

前言


今天遇到了一个小的问题,我们来看一下,情况是这样的:在没遇到过这个坑之前,如果需要引入一个模块,我通常的做法都是在HTML文件中内嵌一个script标签,并通过指定 type="module" 来实现;然而今天我却没有按照往常这样做,而是指定两个js文件,其中一个文件通过 export 暴露出需要的变量和函数,在另一个文件中通过 import 导入,结果就遇到了报错,来给各位看下报错信息:


微信图片_20220611020219.png


请各位小伙伴注意报错信息中标红的部分,接下来将我们讲解两种修复此错误的方法。


通过script标签来引入


首先,来看第一种方式,给各位看看我的文件目录信息:


微信图片_20220611020223.png


微信图片_20220611020227.png


其中,demo.js 文件中包含我们需要暴露的变量和函数,在index.html 文件中,我们需要通过内嵌script标签来引入。

请看 demo.js 文件:


exportlet name = "shipudong"
exportlet sayName = function () {
    console.log('我的名字叫做hahaCoder')
}


请看 index.html 文件:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="module">
    import * as demo from './demo.js'
    console.log(demo)
    console.log(demo.name)
    console.log(demo.sayName())
</script>
</body>
</html>```


上述所有工作完成之后,我们来看看控制台结果:


微信图片_20220611020232.png


没有问题,结果显示正确,这种方式要注意的一点就是:当我们在HTML文件中引入模块的时候,切记不要忘记指定 type = "module"


Node.js中的使用


首先,给各位看看我的 node 版本:


微信图片_20220611020236.png


接着,我们来看第二种方式,上述 demo.js 中的文件内容我们不做更改,继续使用,我们来新建一个 index.js 文件,其用途是引入 demo.js 文件暴露出的变量和函数,请看 index.js 中的信息:


import {name,sayName} from"./demo";
console.log(name)
console.log(sayName())



微信图片_20220611020239.png


我们通过如下命令:


node index.js


执行 index.js 文件,发现控制台报错,接下来我将根据控制台报错信息来给小伙伴提供两种解决方案:


01 - 使用 esm 模块


我们来打开终端,通过输入如下命令来安装 esm 模块:


npm install esm


安装成功之后,文件夹中会多出两个文件,如下图所示:


微信图片_20220611020243.png


接着我们在终端中执行如下命令:


node -r esm index.js


我们来看看控制台信息:


微信图片_20220611020247.png

非常好,程序运行成功!


02 - 修改 package.json 文件


接下来我们来看第二种方法,我们修改 package.json 文件,修改后的文件信息如下所示:


{
  "name": "javascript2",
  "version": "1.0.0",
  "dependencies": {},
  "type": "module",
  "scripts": {
    "start": "node demo.js"
  }
}


修改完配置信息之后,我们通过执行如下命令查看控制台信息:


node demo.js


非常好,程序运行成功!


最后我们来补充一点,其实还有一种更为简单的方法来避免这个报错信息:我们只需要将文件中所有的 js 文件后缀名改成 .mjs ,接着在终端中执行 node 命令即可,请看:


微信图片_20220611020251.png


本文最后


以上就是我今天遇到的一个小问题以及我的解决方案,希望能够对小伙伴带来一些帮助。

相关文章
|
JSON 数据格式 Python
学到了,学到了导入模块还能这么操作
学到了,学到了导入模块还能这么操作
|
Python
导入名为'materials'的模块时出现了错误
导入名为'materials'的模块时出现了错误
100 2
|
JavaScript
面试题-TS(五):TypeScript 中的模块是什么?如何导入和导出模块?
在TypeScript中,模块(Modules)是一种用于组织和管理代码的概念。模块提供了一种封装代码的方式,允许我们将相关的功能和数据组织在一起,实现代码的可重用和可维护。
ts解决依赖引入报错:无法找到模块“xxxxxx”的声明文件的报错问题
ts解决依赖引入报错:无法找到模块“xxxxxx”的声明文件的报错问题
1674 0
|
前端开发 JavaScript
模块打包中CommonJS与ES6 Module的导入与导出问题详解
文章全面解析了CommonJS模块系统的模块定义、导出、导入的操作和注意事项。同时,它也简要地提到了ES6 Module的相关概念,包括命名导出、默认导出、命名导入、默认导入、混合导入和复合写法。
454 0
VSCode找不到自定义模块ModuleNotFoundError
VSCode找不到自定义模块ModuleNotFoundError
365 0
5.ES6模块导出导入
5.ES6模块导出导入
68 0
|
JavaScript
【ES6】模块化语法(默认、按需导入import导出export的操作)
ES6模块化语法(默认、按需导入导出的操作)
【ES6】模块化语法(默认、按需导入import导出export的操作)
|
JavaScript 前端开发 开发者
ES6模块化与导出(export)导入(import)的用法
1.ES6模块化的介绍 在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。 但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化 标准,例如: ⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化 ⚫ CommonJS 适用于服务器端的 Javascript 模块化 太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!
236 1
ES6模块化与导出(export)导入(import)的用法
|
移动开发 前端开发 JavaScript
RequireJS导入CMD模块
RequireJS导入CMD模块
120 0