事件的起因

我正在使用Angular作为前端，并使用Scala为AWS搭建后端。由于正在开发的Angular仍然使用npm进行管理，所以我想过一段时间转移到yarn上。

由于突然完全更换项目通常会带来问题，因此我考虑首先熟悉一下，并在使用ng new创建的初始阶段尝试使用yarn管理。

前提条件 tí

macOS Catalina 版本 10.15.6
（很快，Big Sur 就要来了嘛。）

软件包管理：Homebrew已经安装完成。

※我本来想按番号顺序做，但计数出错了，所以只能从上到下逐个地做好了。

安装yarn

安装必要的前提节点

nodeバージョン管理の為にnodebrewをインストール

brew install nodebrew

nodebrewのセットアップ

如果没有这个东西，无法安装nodebrew。

nodebrew setup

zshrcとかbash_profileとかお好きな所に追記して、再読み込み

追加记上

export PATH=$HOME/.nodebrew/current/bin:$PATH

重新加载

source ~/.zshrc

最新バージョンのnodeをインストール

你可以通过使用”nodebrew ls-remote”来寻找版本。

nodebrew install v14.9.0

使用するnodeを選択

nodebrew use v14.9.0

nodeを確認

node -v # v14.9.0

准备工作在安装yarn之前

假设使用yarn公式，假设您使用nvm管理node，那么为了使用nodebrew，需要进行一些准备工作。

简而言之，当安装yarn时，它会去找/usr/local/opt/node中的node，所以只需将nodebrew与其符号链接起来即可。

mkdir /usr/local/opt/node
ln -s ~/.nodebrew/current/ /usr/local/opt/node/

安装Yarn核心

yarnをインストール

为了在nodebrew选择的node版本上进行安装，添加了选项（尽管–ignore-dependencies显示为不支持，但yarn官方命令中有这样的说明，所以忽略忽略）。

brew install yarn --ignore-dependencies

確認

yarn -v # 1.22.5

安装Angular框架

yarn global add @angular/cli

在Angular中创建一个新项目。

新規プロジェクト作成

ng new [適当な名前]
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS
ここの選択肢は、vimのJキーとKキーで操作。(JK(女子校生)って覚えると良いよ(おい))

AngularMaterialをインストール

曾经，我自己编辑typescript和html文件来启用动画效果，并激活Angular Material Icon。但现在似乎它们会自动加载。
我记得曾经安装了hammerjs，但现在似乎不再需要，因为它没有被导入。

cd [適当な名前]
yarn ng add @angular/material # yarnって打つ必要無いっぽい?
? Choose a prebuilt theme name, or "custom" for a custom theme: Deep Purple/Amber  [ Preview: https:/
/material.angular.io?theme=deeppurple-amber ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

确认AngularMaterial是否可以正常运作。

这次使用Mat-Button进行确认

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// 追記
import { MatButtonModule } from '@angular/material/button';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule//追記
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<button mat-button>hoge</button>

总结

我使用macOS作为Windows界和UNIX界之间的桥梁，HomeBrew非常方便。
另外，在撰写这篇文章的同时，虽然与内容无关，但我突然想到如果日本的教育也全部采用macOS或Ubuntu，那么在考试项目中IE11、旧版Edge、Chrom版Edge、Chrome版EdgeIE模式这么多项目就可以减少了，对于一个操作系统来说实在太多了。
也许在GIGA学校计划中仍然存在Windows，这个要求可能是不切实际的。我不清楚。