" 阅读本文大概需要 5 分钟 "
前言
今天遇到了一个小的问题，我们来看一下，情况是这样的：在没遇到过这个坑之前，如果需要引入一个模块，我通常的做法都是在HTML文件中内嵌一个script标签，并通过指定 type="module" 来实现；然而今天我却没有按照往常这样做，而是指定两个js文件，其中一个文件通过 export 暴露出需要的变量和函数，在另一个文件中通过 import 导入，结果就遇到了报错，来给各位看下报错信息：
请各位小伙伴注意报错信息中标红的部分，接下来将我们讲解两种修复此错误的方法。
通过script标签来引入
首先 ，来看第一种方式，给各位看看我的文件目录信息：
其中， demo.js 文件中包含我们需要暴露的变量和函数，在 index.html 文件中，我们需要通过内嵌script标签来引入。
请看 demo.js 文件：
export let name = "shipudong"export let 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 命令即可，请看：
本文最后
以上就是我今天遇到的一个小问题以及我的解决方案，希望能够对小伙伴带来一些帮助。
- End -
往期推荐
🔗
[
【带你成为pyq最靓的仔】朋友圈九宫格（一）之图片切割篇
[
【往事清零，未来可期】研究生入学前的50天，我干了什么“见不得人”的勾当
[
DNS污染以及使用镜像源中遇到的问题
[
matplotlib中文乱码的两种解决方案
[
毕业设计（基于TensorFlow的深度学习与研究）之总结概述篇
本站文章搜索推荐
长按关注
本文分享自微信公众号 - hahaCoder（hahaCoder）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
