4

私は Webpack を初めて使用しますが、正直なところ、まだ少し混乱しています。反応ビルドから共有可能な UI コンポーネント ライブラリを作成したいと思います (react-starter-kit をベースとして使用)。NPM モジュールとして別のプロジェクトにインポートしてコンポーネントをインポートできるファイルを出力するように webpack 構成を構成する方法はありますか?

現在のセットアップ元フォルダー:

├── /src/                   # The source code of the application
│  ├── /components/         # React components
│  │   ├── /ComponentName   # Component
│  │   ├── index.js         Exports all components

反応スターターキットのデフォルト設定を使用..デフォルトの webpack.config: https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js

ビルド スクリプトをエントリ ポイントとして /components/index.js として実行すると、結果のスクリプトで必要なものが得られません。

何か案は？

4

1 に答える 1

3

これをReact コンポーネントのボイラープレートでいくつかの方法で処理します。必要に応じて適応できるように、以下の基本的なアイデアをカバーしようとしました。

UMD化されたdistバージョン

output.libraryTargetを に設定しumdます。これにより、さまざまな環境 (AMD、CommonJS、グローバル) からインポートできるラッパーが作成されます。output.libraryライブラリのグローバル名と一致するように設定します。

webpack.config.js

output: {
  path: path.join(__dirname, 'dist'),
  libraryTarget: 'umd',
  library: 'MyAwesomeLibrary'
}

コンポーネントの縮小されていないバージョンと縮小されたバージョンを生成するために、別々のターゲットを設定しました。公開時にこれらをバージョン管理に含めて、人々が簡単に見つけて使用できるようにします。

Babel によるノード バージョン

Node と Webpack を介してパッケージを簡単に使用できるようにするために、Webpack ではなく Babel を使用してコードを処理します。これにより、ファイル構造が損なわれません。別の方法として、生成されdistたものを指定することもできますが、このオプションの方が柔軟性が高いため、このオプションの方が優れていると思います。このようにすると、エントリ ポイントの外に特徴をインポートできます。

これを実現するために、次のように設定しました。

パッケージ.json

"scripts": {
    "dist:modules": "babel ./src --out-dir ./dist-modules"
}

これにより、Babel はソースを取得して に書き込むように指示され./dist-modulesます。.gitignoreディレクトリを作成しました。これは公開されたバージョンにのみ含まれ、postinstall存在しない場合はスクリプトによってオンデマンドで生成されます。これは、npm ではなくバージョン管理を通じてパッケージを使用した場合に発生する可能性があります。

結論

これらが基本的な考え方です。より具体的な詳細については、ボイラープレートを調べてください。

于 2016-04-23T18:54:53.247 に答える