Webpack 解析导入路径的目录（goCardless 作为样板）答案

【问题标题】：Webpack resolve a directory for import paths (goCardless as a boiletplate)Webpack 解析导入路径的目录（goCardless 作为样板）
【发布时间】：2016-05-14 00:34:15
【问题描述】：

目前一个典型的组件看起来像下面的代码。请注意，使用文件的路径已经成为问题和丑陋的。移动文件会导致跨多个组件更新路径时出现大量问题。

当路径更改会破坏一切并导致大量查找和替换路径时，这确实会消除基于组件的体验。

在理想情况下，displayName 将是导入引用并在目录中搜索。

'use strict';

//libs
import React from 'react';

//components
import TopFeatures from '../../headphones/subcomponents/top-features';
import Prices from './prices';
import Image from '../../layout/image';
import InlineRatingElement from '../../reviews/rating';

//helpers
import { getImageUrl } from '../../helpers/app/image';
import { initiateInlineRatings } from '../../helpers/app/inline-ratings';

export default class HDOverview extends React.Component {
  displayName = 'HDOverview'

  static propTypes = {
    vendor: React.PropTypes.string.isRequired
  }

  constructor(props) {
    super(props);
  }

  render() {

    return (
      <div>
        JSX
      </div>
   );
  }
}

我想做这样的事情：

import TopFeatures from 'TopFeatures';//TopFeatures is the displayName
import Prices from 'Prices'; //Prices is the displayName etc.
import Image from 'Image';
import InlineRatingElement from 'InlineRatingElement';

//helpers
import { getImageUrl } from 'ImageHelper';
import { initiateInlineRatings } from 'InlineRatingHelper';

Webpack 在这里有一个关于解析别名的很棒的教程：http://xabikos.com/javascript%20module%20bundler/javascript%20dependencies%20management/2015/10/03/webpack-aliases-and-relative-paths.html

然而，这暗示组件的路径需要记录在一个地方 - 在理想的世界中，有一种方法可以动态检查路径/目录以找到匹配的 displayName。请注意，我们有 200 个组件，因此手动创建该列表是可行的，但规模很大。

环顾四周，我看到有人在使用

require("组件！/layout/image")

但是我们希望坚持导入技术，而不是回到 require。

非常感谢任何建议或意见。

【问题讨论】：

标签： javascript node.js import webpack require

【解决方案1】：

不幸的是，我认为这是node、npm的限制。

有一些变通方法可以让绝对/映射路径在 npm 中工作，但所有这些都有缺点：https://gist.github.com/branneman/8048520

另一种选择是为每个组件提供单独的 npm 包，但这会增加很多开销。

【讨论】：