Skip to main content Skip to docs navigation

コントリビュート Contribute

ドキュメントのビルドスクリプトとテストを使用してBootstrapの開発を支援します。

ツールのセットアップ

Bootstrapはnpm scriptsを使用してドキュメントをビルドし、ソースファイルをコンパイルします。package.jsonには、コードのコンパイル、テストの実行などのためのこれらのスクリプトが含まれています。これらは、リポジトリとドキュメント以外での使用を意図したものではありません。

ビルドシステムを使用し、ドキュメントをローカルで実行するには、BootstrapのソースファイルのコピーとNodeが必要です。次の手順に従えば、準備完了です:

  1. 依存関係を管理するために使用するNode.jsをダウンロードしてインストールします。
  2. Bootstrapのソースをダウンロードするか、Bootstrapのリポジトリをフォークしてクローンします。
  3. ルート/bootstrapディレクトリに移動し、npm installを実行して、package.jsonにリストされているローカル依存関係をインストールします。

完了すると、コマンドラインから提供されるさまざまなコマンドを実行できるようになります。

npmスクリプトの使用

package.jsonには、プロジェクトを開発するための多数のタスクが含まれています。npm runを実行して、ターミナルですべてのnpmスクリプトを確認してください。主なタスクには次のものが含まれます:

タスク説明
npm startCSSとJavaScriptをコンパイルし、ドキュメントをビルドし、ローカルサーバーを起動します。
npm run distコンパイル済みファイルを含むdist/ディレクトリを作成します。SassAutoprefixer、およびterserを使用します。
npm testnpm run distを実行した後、ローカルでテストを実行します
npm run docs-serveドキュメントをビルドし、ローカルで実行します。

npmでスタータープロジェクトを使ってBootstrapを始めましょう! Sass & JSサンプルテンプレートリポジトリに移動して、自分のnpmプロジェクトでBootstrapをビルドしてカスタマイズする方法を確認してください。Sassコンパイラ、Autoprefixer、Stylelint、PurgeCSS、Bootstrap Iconsが含まれています。

Sass

BootstrapはDart Sassを使用して、SassソースファイルをCSSファイルにコンパイルします(ビルドプロセスに含まれています)。独自のアセットパイプラインを使用してSassをコンパイルする場合も、同じようにすることをお勧めします。以前はBootstrap v4でNode Sassを使用していましたが、LibSassとその上に構築されたパッケージ(Node Sassを含む)は現在非推奨になっています。

Dart Sassは丸め精度10を使用しており、効率上の理由からこの値の調整は許可されていません。縮小化などの生成されたCSSのさらなる処理中にこの精度を下げることはありませんが、そうすることを選択した場合は、ブラウザの丸め処理の問題を防ぐために、少なくとも6の精度を維持することをお勧めします。

Autoprefixer

BootstrapはAutoprefixer(ビルドプロセスに含まれています)を使用して、ビルド時に一部のCSSプロパティにベンダープレフィックスを自動的に追加します。これにより、CSSの重要な部分を一度だけ記述でき、v3で見られるようなベンダーmixinの必要性がなくなるため、時間とコードを節約できます。

Autoprefixerを通じてサポートされるブラウザのリストは、GitHubリポジトリ内の別のファイルで管理しています。詳細については、.browserslistrcを参照してください。

RTLCSS

BootstrapはRTLCSSを使用してコンパイル済みCSSを処理し、RTLに変換します。基本的には、水平方向を認識するプロパティ(例:padding-left)をその反対のものに置き換えます。これにより、CSSを一度だけ記述し、RTLCSS controlおよびvalueディレクティブを使用してわずかな調整を行うだけで済みます。

ローカルドキュメント

ドキュメントをローカルで実行するには、Astroを使用する必要があります。Astroは、MarkdownとReactコンポーネントの組み合わせでドキュメントをビルドできる最新の静的サイトジェネレーターです。開始方法は次のとおりです:

  1. 上記のツールのセットアップを実行して、すべての依存関係をインストールします。
  2. ルート/bootstrapディレクトリから、コマンドラインでnpm run docs-serveを実行します。
  3. ブラウザでhttp://localhost:9001を開くと、完了です。

Astroの使用方法の詳細については、そのドキュメントをお読みください。

トラブルシューティング

依存関係のインストールに問題が発生した場合は、以前のすべての依存関係バージョン(グローバルおよびローカル)をアンインストールしてください。その後、npm installを再実行してください。