React JS：无需导入即可使用辅助函数？能否全局定义共用函数？

问题1：在React JS中，是否可以不导入辅助函数就直接使用它？ #

• 取决于函数的作用域：
  • 如果函数处于全局作用域（比如挂载在window对象上，或是在模块系统外定义的全局函数），可以直接调用，无需导入。
  • 如果函数是在其他ES模块文件中通过export导出的，必须通过import语句导入才能使用——React项目默认采用ES模块系统，每个文件都是独立的模块，模块间的变量/函数相互隔离，不导入无法跨模块访问。

问题2：能否在单个文件中全局定义函数，让所有组件无需导入就能使用？ #

可以实现，但不推荐，具体说明如下：

实现方式 #

1. 挂载到window对象
   在helper.js中将函数挂载到全局window对象：

   // helper.js
   window.formatDate = function(date) {
     return new Date(date).toLocaleDateString();
   };
   

   然后在项目入口文件（如index.js）中导入一次该文件：

   // index.js
   import './utils/helper.js';
   

   之后所有组件都可以直接调用formatDate()，无需重复导入。

2. 通过构建工具插件自动注入
   如果使用Webpack，可以配置ProvidePlugin自动将函数注入到所有模块的作用域中，无需手动挂载window：

   // webpack.config.js
   const webpack = require('webpack');
   module.exports = {
     // 其他配置项
     plugins: [
       new webpack.ProvidePlugin({
         formatDate: './utils/helper.js'
       })
     ]
   };
   

不推荐的原因 #

• 全局变量极易引发命名冲突，若其他第三方库也使用同名函数，会导致难以排查的bug。
• 代码可读性与可维护性差：其他开发者看到函数调用时，无法快速定位函数的定义位置与逻辑。
• 不利于构建优化：Tree Shaking无法识别未使用的全局函数，会将其打包进最终产物，增加项目体积。

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