从root用户导入ES6

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';

这是插件(经过测试并具有清晰的自述文件)

Answer 2

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

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将根据传递的resolve参数配置您的导入路径.

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

Answer 3

反应文档解释了如何做到这一点：https : //create-react-app.dev/docs/importing-a-component/#absolute-imports

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

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

Answer 4

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

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

不幸的是，这不起作用。

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

NODE_PATH=src/

Answer 5

使用webpack,您还可以创建以例如~解析为根的路径,以便您可以使用import Loading from '~/components/Loading';:

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

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

Answer 6

在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 7

如果使用的是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。如果有人）找到了一个跨平台的解决方案来做到这一点，我可以编辑我的答案。）