反应，网络包装：避免＆＃34; ..＆＃34;在导入语句中

Question

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

来自很大程度上的python背景，我对import语句的文件夹敏感路径声明感到恼火，即在import语句中使用../../。这意味着如果我将文件移动到另一个目录，我需要更改文件中声明的import语句。

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

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


node_modules
    react
    etc

在我的view1.jsx中我不想写

import Component1 from '../components/component1'

我想写

import Component1 from 'components/component1'

或者甚至

import Component1 from 'myApp/components/component1'

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

在webpack中完成此操作的正确方法是什么？它是否使用别名？

Answer 1

我最终关注@zerkms推荐。 resolve.modulesDirectories是要走的路。

Answer 2

我写了一个加载器来完成这个，https://www.npmjs.com/package/future-require-loader。它将自动加载一个路径，其中三个下划线围绕部分文件路径___filename.js___。它还允许文件夹路径：___folder/filename.js___。它将尝试匹配包含字符串的第一个文件路径，因此如果可能存在冲突，您将需要包含文件夹。