Question

我目前正在玩React Native。我试图构建我的应用程序，但它开始变得混乱进口。

--app/
    -- /components
        -- Loading.js
    -- index.ios.js

现在，在我的index.ios.js我能够做到：

import Loading from './components/Loading';

但是，当我开始创建更多组件时，如果目标结构更深，那么它就会变得混乱：

import Loading from '.../../../../components/Loading';

我理解首选的解决方案是为事物制作私有的npm模块，但这对于一个小项目来说太过分了。

您可以在浏览器上执行global.requireRoot类型解决方案，但如何通过导入实现此功能？

Answer 1

与React有同样的问题。所以我为babel编写了一些插件，它可以从根视角导入模块 - 路径不短 - 但它清楚你导入的内容。

所以而不是：

import 'foo' from '../../../components/foo.js';

您可以使用：

import 'foo' from '~/components/foo.js';

Here is the Plugin (tested and with a clear README)

Answer 2

如果您使用的是Webpack，则可以通过解析属性对其进行配置，以解析导入路径。

Webpack 1

resolve: {
  root: [
    path.resolve(__dirname  + '/src')
  ]
}......

Webpack 2

resolve: {
  modules: [
    path.resolve(__dirname + '/src'),
    path.resolve(__dirname + '/node_modules')
  ]
}.....

之后你可以使用

import configureStore from "store/configureStore";

而不是：

import configureStore from "../../store/configureStore";

Webpack将根据传递的解析参数配置导入路径。

你可以用System.js加载器做同样的事情，但是它有自己的配置参数（它可以是 map 或 path 。在System.js文档中查看它）（如果你想使用它。它主要用于Angular 2的情况。但我建议：即使你正在使用ng2，也不要使用标准的System.js.Webpack要好得多。）

Answer 3

使用webpack，您还可以将以~开头的路径解析为root，这样您就可以使用import Loading from '~/components/Loading';：

resolve: {
  extensions: ['.js'],
  modules: [
    'node_modules', 
    path.resolve(__dirname + '/app')
  ],
  alias: {
    ['~']: path.resolve(__dirname + '/app')
  }
}

诀窍是使用javascript括号语法来分配属性。

Answer 4

在 Webpack 3 中，配置稍有不同：

import webpack from 'webpack';
import {resolve} from 'path';

...

module: {
    loaders: [
        {
            test: /\.js$/,
            use: ["babel-loader"]
        },
        {
            test: /\.scss$|\.css$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        }
    ]
},
resolve: {
    extensions: [".js"],
    alias: {
        ["~"]: resolve(__dirname, "src")
    }
},

Answer 5

如果您使用的是Create-React-App，则只需更改环境变量NODE_PATH即可包含项目的根。

在您的config.json中，执行以下更改以在运行react-scripts命令之前设置此变量：

"scripts": {
  "start": "cross-env NODE_PATH=. react-scripts start",
  "build": "cross-env NODE_PATH=. react-scripts build",
  "test": "cross-env NODE_PATH=. react-scripts test",
  "eject": "react-scripts eject"
},

我们正在使用npm库cross-env，因为它可在Unix和Windows上运行。语法为cross-env var=value command。

现在，我们可以import module from '../../my/module'来代替import module from 'src/my/module'

有关实施的更多详细信息

请务必注意，cross-env的范围仅限于其执行的命令，因此cross-env var=val command1 && command2仅在command1期间设置了var。如果需要，请通过cross-env var=val command1 && cross-env var=val command2

对此进行修复

create-react-app将node_modules /中的文件夹优先于NODE_PATH中的文件夹，这就是为什么我们将NODE_PATH设置为“”的原因。而不是“ ./src”。使用“。”要求所有绝对导入均以“ src /”开头，这意味着永远都不会出现名称冲突，除非您使用的是名为src的node_module。

（注意：上述解决方案替换变量NODE_PATH。理想情况下，如果变量已经存在，我们将其追加。NODE_PATH是路径的“：”或“ ;;”分隔列表，取决于它的Unix或Windows。如果有人找到了跨平台的解决方案，我可以编辑答案。）

Answer 6

react文档说明了如何执行此操作： https://create-react-app.dev/docs/importing-a-component/#absolute-imports

只需在项目根目录中添加jsconfig.json：

{
   "compilerOptions": {
      "baseUrl": "src"
   },
  "include": ["src"]
}

Answer 7

我刚刚检查了一个超过6个月的React项目，由于某些原因我的导入工作不再有效。我尝试了第一个答案：

import 'foo' from '~/components/foo.js';

不幸的是，这不起作用。

我在项目的根目录中添加了一个.env文件，与我的package.json处于同一级别。我在该文件中添加了以下行，这修复了我项目中的导入。

NODE_PATH=src/

Answer 8

如果您使用的是Create React App，则可以将paths.appSrc和resolve.modules中的config/webpack.config.dev.js添加到config/webpack.config.prod.js。

发件人：

resolve: {
    modules: ['node_modules', paths.appNodeModules].concat(...

收件人：

resolve: {
    modules: [paths.appSrc, 'node_modules', paths.appNodeModules].concat(...

您的代码将起作用：

import Loading from 'components/Loading';

从root用户导入ES6

8 个答案: