如何导入ES6模块中的函数用于Vanilla Javascript测试？

实现步骤 #

1. 给模块文件添加导出规则 #

先修改Modules/File.js和Modules/File2.js，把你需要测试的函数用ES6语法导出，示例如下：

// Modules/File.js 示例，替换为你实际的函数
export function isValidNumber(value) {
  return typeof value === 'number' && !Number.isNaN(value);
}

// Modules/File2.js 示例，替换为你实际的函数
export function isNonEmptyArray(value) {
  return Array.isArray(value) && value.length > 0;
}

2. 修改app.js导入函数并挂载到全局 #

调整app.js代码，导入两个模块的函数后挂载到你要保留的$myapp全局变量上：

// 注意相对路径要和你实际的项目结构匹配，这里是app.js在根目录的写法
import { isValidNumber } from './Modules/File.js';
import { isNonEmptyArray } from './Modules/File2.js';

(function () {
  'use strict';

  var $myapp = {};
  self.$myapp = $myapp;

  // 原有方法保留
  $myapp.isValidString = function (value) {
    return typeof value === 'string' || value instanceof String;
  }

  // 把导入的模块方法挂载到全局对象
  $myapp.isValidNumber = isValidNumber;
  $myapp.isNonEmptyArray = isNonEmptyArray;
})();

3. 调整test.html的脚本引入配置 #

因为使用了ES6模块，所有相关脚本都要加type="module"属性，且要保证加载顺序为app.js优先于test.js，避免全局变量未初始化的问题：

<!-- test.html 中的脚本引入部分 -->
<script type="module" src="./app.js"></script>
<script type="module" src="./test.js"></script>

4. 编写对应测试用例 #

之后你就可以在test.js中直接调用$myapp下挂载的所有方法写测试，示例：

// 在你原有test.js中新增测试用例即可
it('test number validation', function () {
  assert($myapp.isValidNumber(100) === true)
})

常见坑提醒 #

本地测试时不要直接用file协议打开test.html，会触发浏览器跨域规则阻止模块加载，建议用静态服务打开，比如VS Code的Live Server插件即可。

内容的提问来源于stack exchange，提问作者pc4