javascript - Webpack 解析导入路径的目录(goCardless 作为样板)

Question

目前，典型的组件将类似于以下代码。请注意，使用文件路径已经变得有问题且丑陋。移动文件会导致跨多个组件更新路径时出现大量问题。

当路径更改可能会破坏所有内容并导致大量查找和替换路径时，这确实会影响基于组件的体验。

在理想情况下，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

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

环顾四周，我看到人们使用

require("components!/layout/image")

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

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

Answer 1

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

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

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