Javascript ES6从根目录导入

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

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

现在，在我的

index.ios.js

中，我可以简单地执行以下操作：

从“/组件/加载”导入加载

但是，当我开始创建更多具有更深层目录结构的组件时，它开始变得混乱：

从“…/../../../../../components/Loading”导入加载

我知道首选的解决方案是为一些东西制作专用的npm模块，但对于一个小项目来说，这太过分了

您可以在浏览器上执行
global.requireRoot
类型解决方案，但如何通过导入实现这一点？
与React有相同的问题。
所以我为babel编写了一些插件，可以从根的角度导入模块-路径并不短-但是导入的内容很清楚

因此，不是：

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

您可以使用：

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

如果您正在使用Webpack，您可以通过resolve属性对其进行配置，以解析导入路径中的错误

网页1

网页2

之后你可以使用

import configureStore from "store/configureStore";

而不是：

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

Webpack将从传递的解析参数配置导入路径

你可以用System.js loader做同样的事情，但是它有自己的配置参数（可以是map或path。请在System.js文档中查看）（如果你想用的话。它主要用于Angular 2的情况。但是我建议：即使你在使用ng2，也不要使用standard System.js。Webpack更好）.
使用webpack，您还可以创建以开头的路径，例如
~
解析到根目录，因此您可以使用
从“~/components/Loading”导入加载：

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

诀窍是使用javascript括号语法来分配属性。
在Webpack 3中，配置略有不同：

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


我刚刚签出一个React项目，该项目已有6个多月的历史，由于某些原因，我的导入不再有效。我尝试了第一个答案：

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

不幸的是，这不起作用

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

NODE_PATH=src/

如果您使用的是Create React应用程序，则可以在
config/webpack.config.dev.js
和
config/webpack.config.prod.js
中向
resolve.modules
添加
path.appSrc

发件人：

致：

然后，您的代码将工作：

import Loading from 'components/Loading';

如果正在使用，只需更改环境变量以包含项目的根

在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库是因为它可以在unix和windows上运行。语法为
cross-env var=value命令

现在，我们可以从'src/my/module'导入模块，而不是从'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应用程序将节点\模块/中的文件夹优先于节点\路径中的内容，这就是为什么我们将节点\路径设置为“.”而不是“/src”。使用“.”要求所有绝对导入都以“src/”开头，这意味着永远不会有名称冲突，除非您使用的是名为src的节点模块

（注意：上面描述的解决方案替换了变量NODE_PATH。理想情况下，如果它已经存在，我们会附加到它。NODE_PATH是一个“：”或“；”分隔的路径列表，具体取决于它是unix还是windows。如果有人找到了跨平台解决方案，我可以编辑我的答案。）react文档解释了如何执行此操作：

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

{
“编译器选项”：{
“baseUrl”：“src”
},
“包括”：[“src”]
}
这似乎与React或ES6没有任何特别的关系。Alias，你找到解决方案了吗？我没有。。。我找到的唯一答案似乎是“更好地构建应用程序”，但这并不总是一个选项。我只是使用了require…在这里使用require与使用import有什么不同？可能可以尝试
NODE\u PATH='./app'npm start
，然后要求
从“组件/加载”导入加载之类的内容，但我自己没有尝试过…如果示例
import
语句使用op问题中的路径/文件。这似乎不适用于css或图像文件。我的资产位于
src/assets
中，我从react中得到一个Module not found错误，该错误表示我正在尝试导入src目录之外的内容。谢谢你！难以置信的有用：）这一个非常有用如何使eslint不抱怨找不到导入？（注意：试图在Nodejs应用程序中使用它，而不是作出反应）我怀疑括号在这里起什么作用。括号用于允许将变量作为键传递。只需在键周围加上引号就可以了。它是
从'components/foo.js'导入'foo'。再加上这个。
NODE_PATH=src/

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

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

import Loading from 'components/Loading';

"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"
},