如何在没有服务器的情况下在React应用程序中隐藏api密钥？

问题描述

我想将我的api密钥存储到我的React应用程序中的.env文件中。我正在使用自己的Webpack配置文件（没有React-create-app）。因此，我想知道是否有一种方法可以使用dotenv和webpack.definePlugin之类的包或其他类似的替代品来隐藏我的api密钥？

我的webpack.config.js看起来像这样：

const path = require("path");
const dotenv = require('dotenv');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = (env) => {
  const isProduction = env === "production";
  const CSSExtract = new MiniCssExtractPlugin({ filename: "styles.css" });

  return {
    entry: "./src/app.js",output: {
      path: path.join(__dirname,"public","dist"),filename: "bundle.js",},module: {
      rules: [
        {
          loader: "babel-loader",test: /\.js$/,exclude: /node_modules/,{
          test: /\.s?css$/,use: [
            MiniCssExtractPlugin.loader,{
              loader: "css-loader",options: {
                sourceMap: true,{
              loader: "sass-loader",],plugins: [CSSExtract],devtool: isProduction ? "source-map" : "inline-source-map",devServer: {
      contentBase: path.join(__dirname,"public"),/* historyApiFallback tells the dev-server that the routing 
    is handled via client-side code and that it should return index.html for
    all 404 routes. */
      historyApiFallback: true,publicPath: "/dist/",};
};

我的package.json是这样的：

{
  "name": "app","version": "1.0.0","description": "","main": "app.js","author": "","license": "ISC","scripts": {
    "dev:server": "webpack-dev-server --open","build:prod": "webpack -p --env production","test": "jest --config=jest.config.json","_comment-for-start-command_": "start is needed in order to deploy to Heroku. When it finds this script,it runs node server","start": "node server/server.js","_comment-for-heroku-postbuild_": "heroku-postbuild is going to run after Heroku installs all of the depencencies","heroku-postbuild": "npm run build:prod"
  },"dependencies": {
    "express": "^4.17.1","moment": "^2.26.0","normalize.css": "^8.0.1","numeral": "^2.0.6","react": "^16.13.0","react-addons-shallow-compare": "^15.6.2","react-dates": "^21.8.0","react-dom": "^16.13.1","react-icons": "^3.11.0","react-modal": "^3.11.1","react-redux": "^7.2.0","redux": "^4.0.5","regenerator-runtime": "^0.13.7","unsplash-js": "^6.3.0","uuid": "^8.3.1","validator": "^12.2.0","webpack": "^4.44.0"
  },"devDependencies": {
    "@babel/core": "^7.12.3","@babel/plugin-proposal-class-properties": "^7.12.1","@babel/plugin-transform-runtime": "^7.12.1","@babel/preset-env": "^7.12.1","@babel/preset-react": "^7.12.1","@testing-library/react": "^11.0.4","babel-cli": "^6.26.0","babel-core": "^6.26.3","babel-loader": "^8.1.0","babel-plugin-transform-class-properties": "^6.24.1","babel-plugin-transform-object-rest-spread": "^6.26.0","babel-preset-env": "^1.7.0","babel-preset-react": "^6.24.1","babel-test": "^0.2.3","css-loader": "^5.0.0","dotenv": "^8.2.0","enzyme": "^3.11.0","enzyme-adapter-react-16": "^1.15.2","enzyme-to-json": "^3.5.0","jest": "^26.4.0","mini-css-extract-plugin": "^1.2.0","node-sass": "^4.14.1","react-test-renderer": "^16.13.1","sass-loader": "^10.0.4","style-loader": "^2.0.0","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）