如何在不导入文件的情况下使文件在应用程序范围内可用？答案

【问题标题】：How can I make a file available app wide without importing it?如何在不导入文件的情况下使文件在应用程序范围内可用？
【发布时间】：2021-12-28 23:00:12
【问题描述】：

我有一个文件，我希望在应用程序范围内可用，如果该文件通常称为 app_wide.js，我会这样做

import util from './app_wide.js'

但是，我是一个小文件，我希望它的导出可以在我的所有文件中使用，而无需显式导入命令。我该怎么做？

我正在使用 Webpack 构建一个 React 应用程序。

【问题讨论】：

这能回答你的问题吗？ Make global function in webpack
我想这会起作用，但它很乱......我必须做window.holder.func1()，而不是holder.func1()。我不确定以这种方式使用全局变量是否也是一种好习惯。
这个怎么样：stackoverflow.com/questions/37656592/…
为什么不想要显式导入？
除了污染全局命名空间或让webpack替换代码字符串之外，没有其他办法。然而，通常情况下，即使是在每个其他模块中使用的 util 函数也会每次都被导入。我使用打字稿路径，所以我可以写import { common } from "@utils"。

【解决方案1】：

例如：

你好.js

const hello = () => {
  console.log('hello');
};

module.exports = hello;

webpack.config.js

plugins: [
      new webpack.ProvidePlugin({
        $hello: path.resolve(path.join(__dirname, './hello.js'))
        // ...
      })
]

App.js

// don't need imported or required hello from 'hello.js'
$hello()

当你使用 typescript 时不要忘记声明类型

你好.d.ts

declare function $hello(): void;

【讨论】：