web-dev-qa-db-ja.com

.babelrcを使用して、antdでbabel-plugin-importを機能させるにはどうすればよいですか？

私は反応、バベル、そしてantdに不慣れです。

私はreactをインストールし、create-react-appを使用してプロジェクトを開始しました。 antd（ant.design）をインストールしました。 babel-plugin-importの使用を提案しているので、それもインストールしました。

私がそれを正しく解釈すると、babel-plugin-importの使用法のドキュメントには、これを.babelrcファイルに入れるように書かれています。

{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "style": true
    }]
  ]
}

動作させるのに問題があります。私のウェブコンソールにはまだ警告があります：

Antdのパッケージ全体を使用しています。アプリバンドルのサイズを小さくするには、 https://www.npmjs.com/package/babel-plugin-import を使用してください。

プロジェクトのディレクトリに.babelrcファイルがなかったので、上記の内容で作成し、サーバーを再起動しました（npmstart）。それは機能しなかったので、myProject/node_modules/babel_plugin_importで作成しましたが、それも機能しません。

そのコードスニペットはどこに行くことになっていますか？

https://github.com/ant-design/babel-plugin-import の下部に

webpack config venderにライブラリを追加すると、babel-plugin-importが機能しなくなります。

しかし、それが何を意味するのかわかりません。

ここで別の質問をしました： create-react-appを介して作成されたアプリでantdを動作させる方法は？ この問題は、create-react-appを介して作成されたプロジェクトと関係があるのでしょうか??

babeljscreate-react-appantd
9
user3141592

[更新2018-02-06：答えはまだ正しいですが、react-app-rewiredを使用するというより良い代替手段があります。これもリンクに記載されています。]

https://ant.design/docs/react/use-with-create-react-app#Import-on-demand の指示に従ってTを実行する必要があります。

Ant .babelrcファイルなどを作成しないでください。 CRAを使用する場合、すべてのbabel構成はwebpack構成ファイル内で処理されます。

まず、作成した構成ファイルをクリーンアップし、babel-plugin-importがインストールされていることを確認します。

次に、アプリを取り出します：npm run eject

これにより、dev/prod環境用の2つのwebpack構成ファイルを含むconfigフォルダーが作成されます。

これらのファイルを開き、手順ページに記載されているように、pluginsプロパティを挿入する必要がある場所を見つけます。

8
Jesper We