0

我们有一个包含 5 个包的 yarn 工作区 monorepo，一个是通用的，另外四个是 react-create-app Web 应用程序。我们还使用 craco 来覆盖配置（主要是修复普通应用程序中的 jsx 转译 babel 问题）。

我们在我们的应用程序中使用环境变量时遇到问题。如果我们添加 .env、.env-local 或 .env.development，当我们在任何应用程序中对它们进行控制台时，都不会设置任何变量。进行这项工作是否需要任何特殊考虑？

注意。我们尝试将 .env 文件放在工作区根目录以及单个项目根目录中，但没有成功。

这是craco配置-

 const path = require("path")
const { getLoader, loaderByName } = require("@craco/craco");
const absolutePath = path.join(__dirname, "../xxx-common");
module.exports = {
  webpack: {
    alias: {},
    plugins: [
    ],
    configure: (webpackConfig, { env, paths }) => {
      const { isFound, match } = getLoader(
        webpackConfig,
        loaderByName("babel-loader")
      );
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];
        match.loader.include = include.concat[absolutePath];
      }
      return webpackConfig;
    }
  }

这是工作区根 package.json -

  {
  "name": "xxx-xxx-xxx",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "test-xxx-common": "yarn workspace @digisoft/common test",
    "start-xxx-ui-support": "yarn workspace @blah/support-ui start",
    "build-xxx-ui-support": "yarn workspace @blah/support-ui build",
    "test-xxx-ui-support": "yarn workspace @blah/support-ui test",
    "start-xxx-ui-admin": "yarn workspace @blah/admin-ui start",
    "build-xxx-ui-admin": "yarn workspace @blah/admin-ui build",
    "test-xxx-ui-admin": "yarn workspace @blah/admin-ui test",
    "start-xxx-ui-school": "yarn workspace @blah/school-ui start",
    "build-xxx-ui-school": "yarn workspace @blah/school-ui build",
    "test-xxx-ui-school": "yarn workspace @blah/school-ui test",
    "start-xxx-ui-parent": "yarn workspace @blah/parent-ui start",
    "build-xxx-ui-parent": "yarn workspace @blah/parent-ui build",
    "test-xxx-ui-parent": "yarn workspace @blah/parent-ui test"
  },
  "dependencies": {
    "@types/jest": "^26.0.22",
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "craco": "^0.0.3",
    "ra-data-json-server": "^3.14.1",
    "styled-components": "^5.2.2"
  }
}

这是来自其中一个应用程序的示例 package.json -

{
  "name": "@digisoft/support-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.2.5",
    "@aws-amplify/auth": "^3.4.10",
    "@craco/craco": "^6.1.1",
    "@digisoft/common": "0.1.0",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "amplify-material-ui": "^0.0.46",
    "aws-amplify": "^3.3.3",
    "ra-cognito": "^1.0.4",
    "ra-data-graphql": "^3.8.0",
    "ramda": "^0.27.1",
    "react": "^17.0.2",
    "react-admin": "^3.7.1",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3",
    "recompose": "^0.30.0",
    "redux-form": "^8.3.6"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.4"
  }
}

.env 中的一个例子是 -REACT_APP_foo=bar

任何帮助都非常感谢，在斗智斗勇..

已为我不想添加的任何公司名称添加了 nb..xxx 和 blah

4

0 回答 0