web-dev-qa-db-ja.com

create-react-appにbabel-plugin-styled-componentsをインストールします

Create-react-appアプリケーションでstyled-components-babel-pluginを使用して、chrome開発ツールでコンポーネント名をクラス名として取得しようとしています。しかし、どういうわけか、私はしませんクラス名を変更します。Webサイトで説明されているようにBabelとプラグインをインストールし、次のように.babelrcを作成しました。

{
  "presets": ["env"],
  "plugins": ["babel-plugin-styled-components"]
}

プリセット（react-appを含む）と他のbabel構成の多くの組み合わせを試しましたが、package.jsonでも試しましたが、機能しません。問題は、私がbabelを使用したことがなく、なぜそれが必要なのかほとんどわからないことです。ですから、私がバベル側またはスタイル付きコンポーネント側でエラーを犯したかどうかはわかりません。動作するstyled-componentsbabelプラグインを使用したサンプルプロジェクトはありますか？

reactjsbabelstyled-components
10
Simons0n

Create react appv2はbabelマクロをサポートしています。 styled-componentsマクロには NPMパッケージ があります。パッケージを追加してreactアプリを作成するだけで、完了です。

yarn add styled-components.macro --dev

これを行うには、CRAの排出は必要ありません。

7
vijayst

ダニエルのいくつかのヒントの後、私は別の方法でbabelプラグインをインストールしようとしました。結局のところ、babelプラグインをcreate-react-app（ https://github.com/facebookincubator/create-react-app/issues/2611 ）に追加するには、それを排出しないでください。プラグインを手動でインストールします。それを行うために、私はそれらのコマンドを実行しました：

npm run eject
npm install --save-dev babel-plugin-styled-components

その後、たくさんの新しいファイルを取得し、package.jsonはさらに大きくなりましたが、次のようなbabelのセクションも含まれていました。

  "babel": {
    "presets": [
      "react-app"
    ]
  }

あとは、そこにbabel-pluginを追加して、使用できるようにするだけでした。したがって、styled-componentsプラグインの場合、package.jsonの私のbabelセクションは次のようになります。

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": ["babel-plugin-styled-components"]
  }

これでプラグインが機能し、私は満足しています=）ダニエルに正しい方向を示してくれてありがとう！

5
Simons0n

これを実現するためのはるかに簡単な方法があり、イジェクトや追加のパッケージをインストールする必要はありません。

このようなスタイル付きコンポーネントをインポートする代わりに：

import styled from 'styled-components';

次のようにインポートします。

import styled from 'styled-components/macro';

それがうまくいかない場合は、styled-componentsを更新するか、反応する必要がある可能性があります。詳細については、 styled-componentsのドキュメント を参照してください。

5
Alex Mckay