前言
今天遇到了一个小的问题,我们来看一下,情况是这样的:在没遇到过这个坑之前,如果需要引入一个模块,我通常的做法都是在HTML文件中内嵌一个script标签,并通过指定 type="module" 来实现;然而今天我却没有按照往常这样做,而是指定两个js文件,其中一个文件通过 export 暴露出需要的变量和函数,在另一个文件中通过 import 导入,结果就遇到了报错,来给各位看下报错信息:
请各位小伙伴注意报错信息中标红的部分,接下来将我们讲解两种修复此错误的方法。
通过script标签来引入
首先,来看第一种方式,给各位看看我的文件目录信息:
其中,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>```
上述所有工作完成之后,我们来看看控制台结果:
没有问题,结果显示正确,这种方式要注意的一点就是:当我们在HTML文件中引入模块的时候,切记不要忘记指定 type = "module"。
Node.js中的使用
首先,给各位看看我的 node 版本:
接着,我们来看第二种方式,上述 demo.js 中的文件内容我们不做更改,继续使用,我们来新建一个 index.js 文件,其用途是引入 demo.js 文件暴露出的变量和函数,请看 index.js 中的信息:
import {name,sayName} from"./demo"; console.log(name) console.log(sayName())
我们通过如下命令:
node index.js
执行 index.js 文件,发现控制台报错,接下来我将根据控制台报错信息来给小伙伴提供两种解决方案:
01 - 使用 esm 模块
我们来打开终端,通过输入如下命令来安装 esm 模块:
npm install esm
安装成功之后,文件夹中会多出两个文件,如下图所示:
接着我们在终端中执行如下命令:
node -r esm index.js
我们来看看控制台信息:
非常好,程序运行成功!
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 命令即可,请看:
本文最后
以上就是我今天遇到的一个小问题以及我的解决方案,希望能够对小伙伴带来一些帮助。