在 Create React App 中设置导入的全局服务答案

【问题标题】：Set a global service for import in Create React App在 Create React App 中设置导入的全局服务
【发布时间】：2019-01-30 13:32:47
【问题描述】：

是否可以以某种方式将 jsx 文件声明为全局文件或导入目录？例如，而不是：

import { Navigation } from '../../../../../../helpers/NavigationService';

只做：

import { Navigation } from 'NavigationService';

我在 webpack 配置中看到了它是可能的，但是我在 create-react-app 中没有看到这个文件。我可以以某种方式使用 package.json 吗？

【问题讨论】：

afaik 如果不弹出项目，目前这是不可能的。有人建议在 package.json 中进行配置，但尚未被接受，目前尚不清楚是否会这样做。
另一种可能的方法是将您的“帮助程序”提取到一个单独的包中，然后使用 npm/yarn 安装它。

标签： javascript reactjs webpack import create-react-app

【解决方案1】：

有三种方法可以解决您的问题：

NODE_PATH（

您可以定义一个环境变量 NODE_PATH=src/，然后您可以像 import { Navigation } from 'helpers/NavigationService'; 那样导入您的服务。它会起作用，但这不是我认为最好的。

没有深度嵌套：没有嵌套，意味着首先没有深度嵌套的问题。您可以尝试使用类似于以下的文件层次结构：

src/
  /helpers
  /components/
    /componentA/
      componentA
      relatedComponent
      otherRelatedComponent <- no need for nesting
    /componentB/
  ...

单一回购方法：

拥有一个内部帮助程序包并像 import { Navigation } from 'myproject-helpers/NavigationService'; 一样将其导入可能是一个不错的折衷方案

【讨论】：

我可以在我的 create-react-app 项目中构建这样的包吗？就像定义应该像 node_modules 一样构建和添加的包作为导入，比如 moment、redux？
@mikes 是的，这是一个使用 lerna 的示例（+ yarn 工作区，虽然不是必需的）github.com/fazouane-marouane/cra-yarn-workspace/tree/patch-1/… 我可能会制作另一个版本，并在未来有时将其保持在最低限度，但这是一个好的开始。

【解决方案2】：

您可以在.env 文件中设置NODE_PATH='src'，改为使用全局导入，这是我的解决方案，无需弹出。

.env:

NODE_PATH='src'

创建一个文件夹src/services，在里面创建NavigationService，我的例子：

// src/services/NavigationService.js

export class NavigationService {
  static runIt() {
    console.log("Running");
  }
}

在App.js文件中，现在可以直接导入导航服务，使用全局导入，如下：

// src/App.js

// ... import React and others

import { NavigationService } from "services/NavigationService";

class App extends Component {
  componentDidMount() {
    NavigationService.runIt();
  }

   // ... render method
}

如果使用 VsCode，要获得代码补全，请创建 jsconfig.json 文件，内容如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "services/*": ["./src/services/*"]
    }
  }
}

希望对你有帮助！

【讨论】：