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

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

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

需要（＆＃34;！组件/布局/图像＆＃34）

然而，我们希望坚持使用导入技术，而不是回到要求。

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

Answer 1

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

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

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

Webpack解析导入路径的目录（goCardless作为boiletplate）

1 个答案: