反应，webpack：避免“..”在进口报表 [英] react, webpack: avoid ".." in import statements

问题描述

我正在学习反应，因此es6 / es7和webpack。

从大量的python背景来看，我感到烦恼的是文件夹敏感路径声明导入语句，即在导入语句中使用 ../../ 。这意味着如果我将文件移动到不同的目录，我需要更改文件中声明的import语句。

Python的import语句没有这个问题。我想模仿那个行为
（首先搜索这个路径的特定目录，如果不是搜索这个其他的基本目录）
例如如果我有目录结构

  myApp 
组件
 component1.jsx 
存储
 store1.jsx 
查看
 view1.jsx 
 
 
 node_modules 
反应
 etc 
  

在我的view1.jsx我不想写

 从'../components/component1'导入Component1 
  

我想写

 从'components / component1'导入Component1 
  

或甚至

 从'myApp / components / component1'导入Component1 
  

只是为了确保我没有与我可能正在使用的某些npm软件包的名称冲突。

在网络包中完成此项的正确方法是什么？是否使用别名？

解决方案

我结束了@zerkms推荐。 resolve.modulesDirectories 是要走的路。

I'm currently learning react and thus es6/es7 and webpack.

Coming from a largely python background I'm annoyed by the folder sensitive path declarations for import statements, i.e. the use of ../../ in import statements. This means if I move a file to a different directory, i need to change the import statements declared in the file.

Python's import statement doesn't have this issue. I'd like to mimic that behavior (search first a particular directory for this path, if not search this other base directory) e.g. if i have the directory structure

myApp
    components
        component1.jsx
    stores
        store1.jsx
    views
        view1.jsx


node_modules
    react
    etc

in my view1.jsx I don't want to write

import Component1 from '../components/component1'

I want to write

import Component1 from 'components/component1'

or maybe even

import Component1 from 'myApp/components/component1'

just to make sure I don't have name collisions with some npm package I may be using.

What is the correct way of accomplishing this in webpack? Is it using alias?

解决方案

I ended up following @zerkms recommendation. resolve.modulesDirectories is the way to go.

这篇关于反应，webpack：避免“..”在进口报表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！