如何在React项目public文件夹的自定义脚本中导入Node模块

问题根源 #

public文件夹里的脚本是直接在浏览器环境中运行的，不会被React的打包工具（webpack）处理，默认不支持ES模块的import语法，也没法直接导入专为Node.js或打包工具设计的模块。

具体解决办法 #

• 给脚本标记为模块类型：在public/index.html里引用自定义脚本时，给script标签加上type="module"属性：

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

  注意：这种方式仅适用于本身就是浏览器兼容的ESM/UMD格式的模块，依赖Node专属API（如fs、path）的模块依然无法使用。

• 改用CDN引入依赖：如果目标模块有CDN分发版本，直接在html里用script标签全局引入，然后在自定义脚本里使用全局变量。比如引入lodash：

  <!-- 在index.html中添加 -->
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <!-- 自定义脚本中直接调用全局变量 -->
  <script>
    const result = _.cloneDeep(someData);
  </script>
  

• 把脚本移到src目录：如果没有必须放在public的硬性要求，将自定义脚本移到src文件夹下，webpack会自动处理模块导入，你可以正常使用import语法，再在React组件或入口文件中引入该脚本。

• 单独打包脚本：必须放在public的话，用打包工具（如esbuild、rollup）把脚本和依赖打包成浏览器可直接运行的文件，再放到public里。比如用esbuild：

  # 先安装esbuild：npm install esbuild --save-dev
  npx esbuild public/your-custom-script.js --bundle --outfile=public/bundled-script.js
  

  之后在html里引用打包后的bundled-script.js即可。

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