反应，webpack：在导入语句中避免“..”答案

【问题标题】：react, webpack: avoid ".." in import statements反应，webpack：在导入语句中避免“..”
【发布时间】：2017-01-11 16:42:56
【问题描述】：

我目前正在学习 react 以及 es6/es7 和 webpack。

主要来自 python 背景，我对 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 中实现这一点的正确方法是什么？是否使用别名？

【问题讨论】：

检查resolve.modulesDirectories webpack 参数。

标签： javascript reactjs ecmascript-6 webpack

【解决方案1】：

我最终遵循了@zerkms 的建议。 resolve.modulesDirectories 是要走的路。

【讨论】：

【解决方案2】：

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

【讨论】：