reactjs - 如何从 Vercel 上部署的 Next.js (CRA) 应用程序的浏览器中删除源代码？

Question

我正在开发一个 Next.js 应用程序(使用 create-react-app)，并且我希望我的代码不会在浏览器中显示(浏览器 -> 源)。

我设置了环境变量 GENERATE_SOURCEMAP = false 并且在本地这个解决方案非常适合我(开发和构建)。

当我将应用程序部署到 Vercel 托管并设置环境变量时，该解决方案不起作用，即。我的代码在浏览器中可见。

我认为 Vercel 用“”包装所有环境变量，因此这可能导致问题。

如何解决这个问题？

Answer 1

当您想要上传项目的源映射以在 Sentry 中获取可读代码时，就会出现此问题。我之前遇到过这个问题，通过使用webpack-delete-sourcemaps-plugin工具解决了这个问题。将此代码添加到您的 next.config.js 文件中:

const { DeleteSourceMapsPlugin } = require('webpack-delete-sourcemaps-plugin');


{
  // ...
  webpack: (config, { isServer }) => {
    devtool: 'hidden-source-map', // optional, see the #hidden-source-map section for 
    config.plugins.push(new DeleteSourceMapsPlugin({ isServer, keepServerSourcemaps: true }))
    return config
  }
}

如果您在 webpack.config.js 文件中使用 react-app，请添加以下行:

module.exports = {
   devtool: 'hidden-source-map', // optional, see the #hidden-source-map section for more info
  // ...
  plugins: [
    new DeleteSourceMapsPlugin()
  ]
}