使用导入的 javascript 函数 ES6 访问主文件中的全局变量

Question

我正在使用Vue.js但只是JS文件而不是vue文件，我正在将组件导入到我的主要app.js中，如下所示：

import autoPosts from './components/autoPosts.js';

它导入它很好，但我正在尝试访问这些全局变量。在人们因为使用全局变量而摧毁我之前，你能告诉我这是否可能吗？

const apiRoot    = location.origin + '/wp-json/wp/v2/';
const acfApiRoot = location.origin + '/wp-json/acf/v3/';
import autoPosts from './components/autoPosts.js';

它不会读取该组件中的apiRoot或acfApiRoot，无论我在变量之前还是之后都包含它。

它工作的唯一方法是将组件文件中的变量声明为autoPosts.js

Answer 1

仅仅因为app.js是主模块并不意味着其中声明的变量成为全局变量。但是无论如何都不应该使用全局变量。而是创建另一个模块

// config.js
export const apiRoot    = location.origin + '/wp-json/wp/v2/';
export const acfApiRoot = location.origin + '/wp-json/acf/v3/';

您可以在需要常量的地方导入：

// components/autoPosts.js
import { apiRoot, acfApiRoot } from '/config.js';
…

Answer 2

只是使用

const apiRoot = 'whatever';

不会使其成为全局变量，并且由于未导出而不可访问。

要使用全局变量，请将其添加到窗口;

window.apiRoot = 'whatever';

并且可以从任何其他具有简单变量名称的类访问它

console.log(apiRoot); // outputs 'whatever'

Answer 3

它不能使用窗口吗？

window.apiRoot = location.origin + '/wp-json/wp/v2/';