本文介绍了在数据量较大时如何将数据存储在外部JS文件中并通过ES6的exports & import进行导入。然而，这种方式在非模块化环境中会导致错误。作者提供了在未使用构建工具（如webpack）时，如何在HTML和原生JS中直接获取外部JS文件中数据的方法，包括返回数组和对象两种方式，适用于学习和小规模测试场景。
Code is never die !
通常如果数据过多，我们会将数据单独拉出来存储到一个单独的js文件中，然后通过外部js引入进来使用数据。
目前比较简单而且用的比较多的是ES6语法规范的exports&import方法。
使用方法是：
// 外部定义dataList.js
exports.dataList = {
uname = 'Rain',
uage = '18',
year = '2021-04-22 09:30',
hometown = 'China',
}
使用数据的index.html文件
<script>
import { dataList } from './data.js';
console.log(dataList);
</script>
当然在项目中使用完全没有任何问题，但是当你测试或者单独两个文件这样使用的话就会出现问题，因为这种方法是ES6语法规范下的方法，在普通的JS中是使用的JavaScript语法，所以肯定会出现“不适”的问题出现，就是下面这个啦！
“无法在模块外部使用import语句”，意思就是说导入文件是ES6模块化语法，而浏览器并不支持ES6语法。就是这个问题导致的错误。
看到网上很多人给出的解决方法是：在script 标签中加入type="module"属性
然而，不管是看评论还是自己亲身测试发现，然而并没有什么用处，依然会报错！！！
其实刚刚开头也说了在项目中使用较多，为什么在项目中可以正常使用呢？其实这里所说的意思是，默认你的项目配置了webpack包，然后在webpack配置文件中初始化配置一下：module.exports = { mode: 'development' // mode 用来指定构建模式 } 然后是启动webpack项目打包，将原本的js文件改为dist目录下的main.js文件使用，这里就可以正常使用exports&import方法！
这是在项目中使用，当然不会有什么问题，但有人说了我自己测试一些数据，或者自己学习练习，小demo中使用，难道还得打包…那岂不是大材小用，这里讲一下原生js、html的方法：在html的js中获取外部js中的多个变量值。
首先上代码：
HTML文件部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 引入定义数据的js文件 -->
<script src="./data.js"></script>
<script>
// 直接使用js文件方法获取数据
var dataList = dataList();
console.log(dataList);
</script>
</body>
</html>
所引用的data.js文件
function dataList() {
var uname = 'Rain';
var uage = '18';
var year = '2021-04-22 09:30';
var hometown = 'China';
// 这里可以return两种类型数据：对象 数组 （按需求）
return { uname, uage, year, hometown };
// return [uname, uage, year, hometown];
}
展示下控制台分别打印的数据情况以及测试情况（大家见图即理解）
①返回数组
②返回对象
如上图大家所见，可以对数据进行遍历等等等操作，方便大家测试，当然在正式项目中也可以使用呀，个人感觉不是特别麻烦，主要是不会报错啦！！！
Ending： 坚持写下去，前端的魅力无法言说，努力做自己认为对的事！
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
