web-dev-qa-db-ja.com

コンポーネントライブラリを構築するためにイジェクトした後のcreate-react-appの構成

React app using create-react-app 。残念ながら、NPMで公開（および他のアプリで再利用）したいコンポーネントライブラリの構築を開始しました。 create-react-appのデフォルト設定は、そのようなコンポーネントライブラリの構築をサポートしていないようです（ 参照これら問題 ）。イジェクトする。

これを他のアプリで再利用できるコンポーネントライブラリにするために、取り出した後に何を構成するかについての指示はありますか（Webpackのものがあると思います）？

reactjsnpmwebpackcreate-react-app
11
Zardoz

コメントを回答に再構成します。

排出しないでください！ CRAは内部に多くのものを隠し、排出するとそれが投げ出されます。ツールのセットアップが完了したら、srcを別のプロジェクトに複製する方が比較的簡単です。

そして、自分でセットアップするのはそれほど難しくありません！これがあなたがする必要があることです：

  1. 基本 babelとwebpackの設定 コードがコンパイルされるようにします。

  2. ReactとReact-DOMがpackage.jsonファイルに外部依存関係として追加され、webpack.config.jsにエイリアスとして追加されていることを確認してください（詳細な説明は ここ 。）これは、最小のバンドルのみを出荷するために重要です。また、Reactは 複数のコピー ではうまく機能しません。

  3. 必要に応じて、他のより重いライブラリについても同じことを行います。マテリアル-UI、ブートストラップ、Lodashなど。

  4. Webpackの構成で、 library exports をどのようにするかを決定しますか？あなたはUMDに長けているはずです。

  5. package.jsonにmain（ およびオプションでmodule）エントリを追加して、npmimportsにコンポーネントのインポート元を知らせます。

  6. 公開 それ。

  7. 完了！

または、これらの超薄型コンポーネントプロジェクトのいずれかを複製して、そこにコンポーネントを配置することもできます-

より完全なスターターキットもありますが、IMOは、それらを抽象化する前に、まず自分で詳細を知ることが重要です。プロセスに慣れたら、テスト統合、react-storybookサポート、優れたnpmパブリッシングサポートなどの基本をはるかに超えているため、キットも活用してみてください。

更新：

CRAの目的は、（初心者にはやや複雑な）ツールのセットアップを行わずに、React開発）への迅速な実験とオンボーディングを可能にすることです。CRAの使用目的は次のとおりです。名前の「アプリ」は、コンポーネントではなくアプリ全体です。ES6などの言語機能に基づいて構築されたものを開発するには、ある程度のツールが必要ですが、アプリは通常、コンポーネントよりも多くのセットアップを必要とします。生成されたコード。CRAは これ以上 あなたのために。

また、アプリで作業している場合は、アプリのサーバー側を制御したいときにイジェクトします。その場合、イジェクト中にCRAによって自動生成された基本的なホスティングコードを取得するため、付加価値があります。

テストのニーズに対応するために、CRAにはJest統合もあります。これは、スナップショットテストなどのReact特定の機能を備えたテストランナーです。繰り返しになりますが、ビルドパイプラインを使用して手動で設定するのはほんの一握りであり、CRAはもう一度この複雑さをすべて隠しているので、テストの作成に集中できます。

9
hazardous

これは非常に簡単です。パッケージを公開する場合、実際にはwebpackは必要ありません。必要がない場合は、そのためだけにインストールしないでください。

ES6を使用する場合：

簡単なスクリプトを使用して、トランスパイル後にbabelがファイルを作成するdistフォルダーを作成できます。

"scripts": {
    // other scripts
    // .. might want to change "rm -rf" below if you're on a PC
    "build:production": "rm -rf es && cross-env NODE_ENV=production node_modules/.bin/babel ./src -d es"
  },

これは何をしますか：

  1. ビルドフォルダーであるesフォルダーを削除します。
  2. ファイルに対してbabelを実行し（ファイルがsrcフォルダーにある場合は、ファイルが存在する場所に変更します）、トランスパイルされたファイルを使用してesフォルダーを作成します。

上記のスクリプトを使用するには、次の依存関係をインストールする必要があります。

babel-cli/babel-core/babel-preset-es2015/cross-env

Babelが機能するように、.babelrcファイルがあることを確認してください。

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

（npm run build:productionを実行した後）あなたがしなければならないのは、実行することだけです：

npm publish

そして、あなたのライブラリはnpmで公開されています。これは、更新する場合に実行するコマンドでもあります。package.jsonのバージョン番号を更新することを忘れないでください。

npmに公開したくないファイルがある場合は、ルートに.npmignore（.gitignoreと同様）というファイルを作成し、除外するすべてのものをリストします。

ES6を使用しない場合：

この場合、何もトランスパイルする必要はありません。上のnpm publishセクションに直接移動して、公開するルートフォルダーで実行してください。

2
Omri Aharon

create-react-appは、アプリの迅速なセットアップと開発を目的としており、実際にはライブラリの開発を目的としていません。一つには、create-react-appはビルド時にindex.htmlファイルを作成しますが、これは通常、ライブラリでは必要ありません。ライブラリには、異なる構成セットが必要です（はるかに少ない）。

私は自分でこの問題に直面し、Reactコンポーネントのボイラープレートを作成して公開するReactコンポーネント： https://github.com/yangshun/react-component-starter 、 Redux など、人気のあるES6ライブラリがどのように作成されたかを参照した後。

長所：

  • create-react-appと同様に、電池が含まれています
  • 開発、リンティング、テスト、配布など、すべての重要な領域がカバーされています。
  • 最小限の構成
  • ES5およびCommonJS形式への変換用のBabel
  • ESLintが含まれ、構成されています
  • Jestテストの例
  • UMDにコンパイルされるWebpack構成
  • コンポーネントの迅速な開発のためのReactストーリーブック
  • コンポーネントと一緒のスタイルシート配布のサポート

短所：

  • 工具の選択に関して高い意見があります。それらはcreate-react-appによって設定された選択に従います。
  • 将来、各パッケージの依存関係を手動で更新する必要があります（とにかくejectを実行した場合、この問題に直面します）

最小限の構成が含まれており、セットアップは簡単です。さまざまなwebpack、Babel、ESLintの構成は非常に理解しやすいはずです。

これがお役に立てば幸いです。改善方法について、お気軽にご提案やご意見をお寄せください。

1
Yangshun Tay