如何在React public文件夹的JS文件中导入外部模块？

方法1：将JS文件声明为ES模块并使用CDN引入依赖 #

浏览器默认不会把普通JS文件当作ES模块处理，需做两步调整：

• 在HTML中引入该JS文件时，添加type="module"属性：

  <script type="module" src="./your-script.js"></script>
  

• 由于public目录下的文件不会经过React项目的webpack打包，无法直接导入node_modules中的包，需要替换为CDN的ESM版本链接。比如将导入语句改为：

  import OpenIdConnect from 'https://cdn.jsdelivr.net/npm/@luigi-project/plugin-auth-oidc@latest/+esm';
  

  注意替换成对应版本的CDN链接，确保是ESM格式（通常CDN链接末尾带+esm）。

方法2：将JS文件移至src目录（推荐） #

React项目的src目录下的文件会被webpack处理，天然支持ES模块语法：

• 把public里的JS文件移动到src文件夹中，比如src/utils/your-script.js
• 在需要使用的组件或入口文件中通过import引入该脚本，同时可以直接使用npm install安装的依赖：

  // src中的文件可以直接导入npm包
  import OpenIdConnect from '@luigi-project/plugin-auth-oidc';
  

方法3：使用UMD全局变量替代import #

如果不想用ES模块，可以引入包的UMD版本，通过全局变量使用：

• 在HTML中先引入该包的UMD版本CDN链接：

  <script src="https://cdn.jsdelivr.net/npm/@luigi-project/plugin-auth-oidc@latest/dist/plugin-auth-oidc.umd.js"></script>
  

• 然后在你的JS文件中直接使用全局变量：

  // 无需import，直接用全局的OpenIdConnect
  const authPlugin = OpenIdConnect;
  

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