从webpack配置中删除模式[重复]

7xzttuei  于 2023-10-19  发布在  Webpack
关注(0)|答案(1)|浏览(180)

此问题已在此处有答案

Passing environment-dependent variables in webpack(17回答)
2个月前关闭。
webpack.config.js中:

  1. module.exports = {
  2. entry: {
  3. index: "./src/index.js",
  4. content: "./src/content.js"
  5. },
  6. mode: "production", // How do I access this value from the React code?
  7. devtool: 'inline-source-map',
  8. ...

根据mode'development'还是'production',我需要为PayPal使用不同的客户端ID(沙盒或真实的)。我希望避免重复。那么,我如何从我的React代码中访问该值?

yb3bgrhw

yb3bgrhw1#

您可以通过将模块导出扩展为箭头函数来访问该模式。这是第二个参数(args)的一部分,我们可以解构它。使用webpack define来更改环境变量。

  1. const PAYPAL_CLIENT_VARS = {
  2. production: "a",
  3. development: "b"
  4. };
  5. const bakeEnvironmentValues = (values, mode) => {
  6. return values[mode];
  7. };
  8. module.exports = (env, { mode }) => {
  9. // Useful for setting devTool, don't want to type this conditional everywhere
  10. const isDevMode = mode === 'development';
  11. return {
  12. ...webpack config go here,
  13. mode,
  14. plugins: [
  15. new webpack.DefinePlugin({
  16. PAYPAL_CLIENT: JSON.stringify(
  17. bakeEnvironmentValues(PAYPAL_CLIENT_VARS, mode)
  18. )}),
  19. ]
  20. }
  21. }

然后,您可以通过在客户端JS中的任何位置引用SOME_ENV(或任何您称之为的东西)来访问该环境变量。

展开查看全部

相关问题