[独学IT] TypeScriptしようとしたらlzmaがないと怒られた

概要(用語)
環境構築
1. node
Typescript
Webpack
1. lzmaがないと怒られた

概要(用語)

webpack

Typescript ・・・javascriptに型定義を加えた言語

ビルド・・・TSをコンパイルしてjsに、それをwebpackでバンドルしてbundle.jsにすることで、ブラウザ上で動くようにする

環境構築

node

nodeがインストールされているか確認する

MacにNode.jsをインストール - Qiita

MacにNode.jsの環境を構築するメモ。その前に※以下の方法もオススメです！MacにNode.jsをインストール（anyenv + nodenv編）上記の場合はプロジェクト毎（フォルダ毎…

$ node -v

versionが表示されない場合は、installする

$ brew -v
$ brew install nodebrew
$ nodebrew ls
$ nodebrew use v16.6.2
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
$ source ~/.zshrc

Typescript

まずはnpmの初期化をしてpackage.jsonが作成されることを確認

$ npm init

ひたすらEnterを押す

$ npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server

typescriptをグローバルインストール(tscコマンドをのちに使いたいので)

npm install -g typescript

typescript ・・・TypeScriptの構文をJavaScrtipt構文に変換するコンパイラ

$ tsc --init

でtsconfig.jsonファイルが作成される。
次にtsconfig.jsonファイルを開いて、設定を行う。

target コンパイル後のjavascriptのバージョン

strict TypeScriptの基本的なチェックを全て行うか

jsx jsxをどうコンパイルするか

baseurl import分のベースパスで絶対パスで記述できるようにする

outDir “./dist”

Webpack

module.exports = {
  // devServer設定
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    ...
  },
};

lzmaがないと怒られた

pyenv環境でpythonを使っているとerrorが出るので、こちらを参考に対策

$ brew install xz
（アン）インストールするpythonのversionは使っている環境に合わせて変更する
$ pyenv uninstall 3.9.0
$ pyenv install 3.9.0