2

我在 Windows 10 环境中的同一个包中有一个弹出的 create-react-app 客户端应用程序和一个服务器端应用程序。

我的目录结构如下：

app
 |--------- server.js
 |--------- package.json
 |--------- start-client.js
 |--------- start-server.js
 |
 |------ client
             |---- config
             |---- public
             |---- scripts
             |---- src
                     |---- components
                     |---- common <== Common files for both server and client
                     |--- etc...

如上所述，服务器和客户端需要使用公共文件，这就是我的问题开始的地方。这些通用文件是.js（通用例程）和.json（语言文件）文件，需要由解决方案的服务器和客户端上的模块导入。

如果我把我的公用文件放在服务器（app/common）下面，我的客户抱怨它不能导入它，因为它超出了app/client/src目录：

Module not found: You attempted to import ../../../../../common/common which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.

如果我将文件放在客户端目录结构（app/client/src/common）上，运行服务器时会出现以下错误（npm run server变成babel-node start-server.js）

D:\DEV\app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:328
        throw e;
        ^

Error: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing preset: "D:\\9. DEV\\WORKSPACE\\momejected\\client\\node_modules\\babel-preset-react-app\\index.js")
    at Object.<anonymous> (D:\DEV\app\client\node_modules\babel-preset-react-app\index.js:47:9)
    at Module._compile (module.js:570:32)
    at Module._extensions..js (module.js:579:10)
    at Object.require.extensions.(anonymous function) [as .js] (D:\DEV\app\node_modules\babel-register\lib\node.js:152:7)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at D:\DEV\app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:296:17
    at Array.map (native)
    at OptionManager.resolvePresets (D:\DEV\app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (D:\DEV\app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (D:\DEV\app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (D:\DEV\app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at compile (D:\DEV\app\node_modules\babel-register\lib\node.js:103:45)

这是package.json服务器的：

{
  "name": "appserver",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "concurrently \"babel-node start-server\" \"babel-node start-client\"",
    "server": "nodemon --exec \"babel-node start-server.js\"",
    "client": "nodemon --exec \"babel-node start-client.js\"",
    "schema": "\"babel-node scripts/update-client-schema.js\"",
    "mongoose": "\"cd models && babel-node build-mongoose-schemas.js\"",
    "lint": "eslint ."
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.25.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2016": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.17.2",
    "express": "^4.15.3",
    "express-graphql": "^0.6.6",
    "graphql": "^0.10.3",
    "graphql-relay": "^0.5.2",
    "mongoose": "^4.11.1",
    "morgan": "^1.8.2",
    "path": "^0.12.7",
    "validator": "^9.1.1"
  },
  "devDependencies": {
    "concurrently": "3.1.0",
    "eslint": "^3.19.0",
    "eslint-config-airbnb": "14.1.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "4.0.0",
    "eslint-plugin-react": "6.9.0",
    "fs-extra": "^4.0.1",
    "node-fetch": "^1.7.1",
    "nodemon": "^1.11.0"
  },
  "babel": {
    "presets": [
      "es2015",
      "stage-0",
      "es2017"
    ],
    "plugins": [
      "transform-runtime"
    ]
  }
}

问题：

a) 我应该把我的公共文件放在哪里。在 (app/client/src) 上（客户端目录结构）还是在 app/common 上（服务器目录结构）？

b）如果我决定保留文件app/client/src/common（服务器目录结构），我怎样才能使 babel_node 正常工作（它抱怨它不知道环境变量）

c）如果我决定将文件保留在 上app/common，我如何从反应组件访问它？

4

0 回答 0