たいちの何か

趣味を中心に車・クラウド・サーバーなどの話を勝手気ままに書いています

MacにSharePoint Framework(SPFx)環境を構築する

Macbook pro (2019)にSPFx開発環境を構築した際のメモです。 私の端末スペックなどは下記の記事を参照ください。

edge.hateblo.jp

前提

SPFx環境の準備はMicrosoft Docsを見ながら進めれば基本的な環境設定は完了します。しかし、MacではWindowsほど簡単に行かないところがあったので、足りないところを以下に追記しています。1

docs.microsoft.com

補足1:Node.jsのインストール

Docsでは、"Node.JSのインストールをします"とNode.js公式サイトに飛ばされてしまいます。

リンク先からNode.jsのインストーラーを取得するのもありなのですが、SPFxがサポートするNode.jsバージョンに縛りがある2ので、バージョンの切り替えがやりやすいようにパッケージマネージャ経由でインストールをします。

  1. Homebrewのインストール
  2. nodebrewのインストール
  3. Node.jsのインストール

Homebrewのインストール

HomebrewはMac用のパッケージマネージャで、ツールのインストールや依存性の確認などを行ってくれいます。nodebrewもhomebrew経由でインストールしました。

brew.sh

  • インストール

http://brew.sh/index_ja.html にあるスクリプトを実行します。3

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

インストール後は以下のコマンドでHomebrewのバージョンの確認ができます。

brew -v
Homebrew 2.2.17
Homebrew/homebrew-core (git revision 8395d1; last commit 2020-05-23)
Homebrew/homebrew-cask (git revision cdc53; last commit 2020-05-23)

nodebrewのインストール

Node.jsのバージョン管理ツールです。複数のバージョンのNode.jsをインストールしたり、切り替え等々ができるので、SPFx以外で使うときも気軽にバージョンを切り替えることができます。

  • インストール

Homebrewを使ってnodebrewをインストールします。

brew install nodebrew

インストール後は以下のコマンドでバージョンの確認ができます。

nodebrew -v
nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backword compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

Node.jsのインストール

Node.jsは以下のコマンドでインストールすることができます。

nodebrew install-binary {version}

{version}に指定する値がわからない場合は、以下のコマンドを実行して、利用可能なNode.jsのバージョンを調べます。

nodebrew ls-remote

SPFxはNode.js v8かv10のみサポートしているため、使いたい方の最新のバージョンを確認します。

バージョンを指定せずに実行すると、最新のものがインストールされてしまったりするので、必ずバージョン指定でインストールします。

f:id:taitioooo:20200527232441p:plain
nodebrew ls-remote

インストールが完了したら、インストールされたバージョンを確認します。ちなみに私の環境は、3種類入っており、今は10.20.1が有効になっています。

nodebrew ls

f:id:taitioooo:20200527232919p:plain
nodebre ls

v8もしくはv10がCurrentに指定されていない場合は、以下のコマンドを使って有効化します。

nodebrew use v10.xx.xx

有効化が終わったらコマンドラインからNode.jsを起動できるようにするために、パスを通します。

Bashの場合

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

zshの場合

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile

最後にコマンドラインから以下のコマンドを打って結果が表示されれば完了です。実行する前に、コマンドラインを一度閉じるか、Sourceコマンドで再読み込みを行っておく

node -v

  1. Windows前提で話が始まっているようで、Macユーザーの自分は出だしで躓いてしまいました。

  2. 最新のNode.jsが使えません。2020/5月時点でNode.js 12が最新ですが、SPFxでは 8か10のみがサポートされています。インストールの流れは以下のとなります。

  3. 2020/5時点

Copyright © 2014 - taitioooo. All Rights Reserved.