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を介して作成されたプロジェクトと関係があるのでしょうか??

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