Chrome v65环境下如何从HTML文件访问ES6模块导出的函数？

首先得明确：ES6模块默认拥有独立的模块作用域，和全局作用域是隔离的——模块里导出的函数、变量不会自动挂载到window对象上，这也是模块设计的核心特性之一。所以你现在直接在HTML里（比如浏览器控制台、普通脚本）是拿不到consoleLogger的，得通过下面几种方式来实现：

方法1：将模块函数暴露到全局作用域 #

如果只是想快速在全局环境（比如控制台）调用模块里的函数，可以在模块脚本里主动把函数挂载到window对象上。修改你的main.js：

import { consoleLogger } from './base.js';

// 把函数暴露到全局
window.consoleLogger = consoleLogger;

consoleLogger('Some message');

这样修改后，你在浏览器控制台直接输入consoleLogger('测试全局调用')，或者在普通脚本（比如你的utils.js）里，就能正常调用这个函数了。

方法2：将普通脚本转为模块，通过导入使用 #

如果不想污染全局作用域，更规范的做法是把你的utils.js也改成ES6模块，然后直接在里面导入需要的函数。

首先修改utils.js：

// 直接导入模块里的函数
import { consoleLogger } from './base.js';

function sayMyName(name) { 
  console.log(name); 
  // 现在可以在utils里直接使用consoleLogger
  consoleLogger(`Hello, ${name}`);
}

然后修改HTML里的utils.js脚本标签，加上type='module'：

<script src='./main.js' type='module'></script>
<script src='./utils.js' type='module'></script>

这样两个模块之间可以通过ES6的import语法互相引用，完全不需要依赖全局作用域。

方法3：在模块内绑定DOM交互（适合页面操作场景） #

如果是想在HTML的用户交互（比如按钮点击）中调用模块函数，最佳实践是在模块脚本里直接监听DOM事件，不需要暴露到全局。

比如修改你的main.js：

import { consoleLogger } from './base.js';

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', () => {
  // 假设HTML里有一个id为callLogger的按钮
  const btn = document.getElementById('callLogger');
  btn.addEventListener('click', () => {
    consoleLogger('按钮被点击了！');
  });
});

然后在HTML的<body>里添加按钮：

<button id="callLogger">调用consoleLogger</button>

这种方式既保持了模块的封装性，又能实现页面交互调用模块函数的需求。

补充说明 #

你用的Chrome v65已经完全支持ES6模块的基础特性，但要注意几个细节：

• 模块脚本必须通过type='module'声明，否则浏览器会当作普通脚本解析。
• 模块脚本的加载是异步的，所以如果有依赖顺序，要确保模块之间通过import正确关联，或者使用async/defer属性。

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