Блог

Я хочу сохранить свой ключ api в файле .env в моем приложении React. Я использую свой собственный конфигурационный файл Webpack (без React-create-app). Итак, мне интересно, есть ли способ скрыть мой ключ api, используя такие пакеты, как dotenv и webpack.DefinePlugin или некоторые другие подобные альтернативы?

Мой 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",
              options: {
                sourceMap: true,
              },
            },
          ],
        },
      ],
    },
    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"
  }
}