web-dev-qa-db-ja.com

npmパッケージのサブフォルダーからインポート

React他のいくつかのプロジェクトで使用するためのコンポーネントの小さなライブラリの作成に取り組んでいます。私は（プライベートGitHubリポジトリを使用して）内部でパッケージを公開し、別のプロジェクトに含めています。ただし、 、パッケージのサブディレクトリからインポートしようとすると、パスが一致しないためインポートできません。

パッケージを使用するプロジェクトはすべて、可能な場合はコンポーネントライブラリでのanyビルドを回避しようとしているため、コードをバンドル/トランスパイルするためにwebpackを利用しています。

ディレクトリ構造

_- package.json
- src/
  - index.js
  - Button/
    - index.js
    - Button.jsx
    - ButtonGroup.jsx
  - Header/
    - index.js
    - Header.jsx (default export)
_

package.json

_...
"main": "./src/index.js",
"scripts": "",
...
_

src/Button/index.js

_import Button from './Button';
import ButtonGroup from './ButtonGroup';

export default Button;

export { Button, ButtonGroup};
_

src/index.js

サブディレクトリからのみインポートする場合、このファイルは実際に必要ですか？

_import Button from './Button';
import ButtonGroup from './Button/ButtonGroup';
import Header from './Header';

export { Button, ButtonGroup, Header };
_

その他のプロジェクト

_// This project is responsible for building/transpiling after importing
import { Button, ButtonGroup } from 'components-library/Button';
_

例

Material-UI は、Reactコンポーネントのライブラリであり、次の方法で要求することによって使用されます：_import { RadioButtonGroup } from 'material-ui/RadioButton_。彼らのために働くが、まだ役に立たない。

同様の質問

ご質問

  1. インポートパスの_src/_ディレクトリをスキップできますか？
  2. パッケージのどのタイプのビルドフェーズもスキップできますか（開発者はコミットする前にビルドする必要はありません）。
  3. Material-uiに似たパッケージはこれをどのように処理しますか？
javascriptnode.jsnpmwebpackpackage.json
16
Kendall

答えは、コンポーネントライブラリのインストール方法によって異なります。どちらかを使用した場合npm install <git-Host>:<git-user>/<repo-name>またはnpm install <git repo url>、

  1. import {Button} from 'component-library/Button'そのまま 最初のリンクされた質問 に従います。 Nodeのrequire（）resolution と同様に、Webpackは、component-library内のサブディレクトリを、component-libraryのエントリポイントに関連して解決する必要があります。 webpack.config.resolve プロパティを使用して、解決動作のカスタマイズに関するドキュメントを見つけることができます。 material-ui は、モジュールエントリディレクトリからのサブディレクトリインポートの解決に依存しているようです。

  2. ESモジュールライブラリを配布するために、配布前にビルドする必要はありません。ただし、 create-react-app などのプロジェクトでは、事前に変換されたバージョンが必要になる場合があります。

あるいは、import {Button} from 'components-library'。 Webpackは各indexを介して依存関係をさかのぼって追跡します。

1
Steven Kalt