Real-time motion planner and autonomous vehicle simulator
Real-time motion planner and autonomous vehicle simulator in the browser, built with WebGL and Three.js.
最新版TypeScript+webpack 5の環境構築
これは助かります。
最新版TypeScript+webpack 5の
環境構築まとめ
(React, Vue.js, Three.jsのサンプル付き)
ics.media
TypeScript開発環境をつくる
Web開発、TypeScript開発の環境づくりの一般的、標準的なものがなんなのか
よくわからないままに、ツギハギで会社やWebで情報収集していました。
フューチャーアーキテクトさんのサイトがわかりやすくて勉強になったので
試した時のコマンドメモを残します。
TypeScript、prettier、ESLint、Jestをセットアップ。
複数バージョンのNode.js切り替えれるようにnodenvを使う。
16.2.0を使うように指定する。
nodenv local 16.2.0
npm initする。package.jsonファイルができる。
src, __tests__フォルダを作る。
npm init mkdir src mkdir __tests__
変換先のdistはGitに登録しない。
vi .gitignore dist .DS_Store Thumbds.db
TypeScriptをインストールする。
npm install typescript npm uninstall typescript npm install --save-dev typescript npm install --save-dev ts-node
フォーマッタはprettierをインストールする。
npm install --save-dev prettier
.editorconfigに設定。
vi .editorconfig root = true [*] indent_style = space indent_size = 4 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true
npm run lint:prettier
ESLintをインストールする。
npx eslint --init ✔ How would you like to use ESLint? · problems ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · react ✔ Does your project use TypeScript? · No / Yes ✔ Where does your code run? · browser ✔ What format do you want your config file to be in? · JavaScript ✔ Would you like to install them now with npm? · No / Yes npm install --save-dev eslint-config-prettier
eslint-config-prettierも。
package.jsonの設定。
"scripts": { "test": "jest", "fix": "run-s fix:prettier fix:eslint", ★ "fix:prettier": "prettier --write src", "fix:eslint": "eslint src --ext .ts --fix", "lint": "run-p lint:prettier lint:eslint", ★ "lint:prettier": "prettier --check src", "lint:eslint": "eslint src --ext .ts", },
修正は直列、チェックは並列実行するようにしています。
複数のタスクを並列や並行で実行するには次のコマンドをインストール。
npm install --save-dev npm-run-all
テストにはJestをインストール。
scripts/testディレクトリを作成する。
npm install --save-dev jest ts-jest @types/jest eslint-plugin-jest mkdir -p scripts/test
VSCodeの拡張機能、Prettier、ESLintをインストールする。
esbenp.prettier-vscode
streetsidesoftware.code-spell-checker
dbaeumer.vscode-eslint
ここまで。
入手したリポジトリを自分のGitHubにpush
shallow でcloneする。
git clone --depth 1 https://github.com/tokyo-metropolitan-gov/covid19.git git config -l
自分のGitHubリポジトリにpushする。
GitHub上で「New repository」をクリックしてconvidを作成した。
cloneしたリポジトリのリポジトリurlを変更する。
git remote set-url origin https://github.com/txcdb738/convid19.git git remote -v origin https://github.com/txcdb738/covnid19.git (fetch) origin https://github.com/txcdb738/covnid19.git (push) git branch * development
pushする。
git branch -M main git push -u origin main
shallow update not allowedのエラーになった。
To https://github.com/txcdb738/convid19.git ! [remote rejected] main -> main (shallow update not allowed) error: failed to push some refs to 'https://github.com/txcdb738/convid19.git'
checkoutに--orphanをつけると、履歴が空のブランチ(orphan branch)が作成できる。
tmpという空のブランチを作ってコミットしてから、masterブランチをそれで置き換え、
別のRepositoryにpushすればよいみたい。
git checkout --orphan tmp git commit git checkout -B master git branch -d tmp git push origin master
これを参考にしました。
www.greptips.com
東京都 新型コロナウイルス感染症対策サイト動かすまで(Vagrant)
Webアプリの勉強。東京都 新型コロナウイルス感染症対策サイト を動かしてみる。
https://github.com/tokyo-metropolitan-gov/covid19
git clone使用としたが時間がかかって中断してしまった。
zipでダウンロードで進める。
( gitのunshallowでダウンロードすればよい? )
Vagrantをセットアップ
Vagrantをインストール。
https://www.vagrantup.com
ダウンロードページにしたがってbrewでインストール。
https://www.vagrantup.com/downloads
brew tap hashicorp/tap brew install hashicorp/tap/vagrant
バージョンはVagrant 2.2.16。
VirtualBoxをインストール
VirtualBoxをインストール
https://www.virtualbox.org/wiki/Downloads
Vagrant VMWare Utilityをインストール。
vagrant plugin install vagrant-vmware-desktop
バージョンは1.0.20。
Vagrantを起動。
vagrant upしたがエラーになった。Macの権限設定が原因のようで
次のサイトを参考に設定を変更したら起動できた。
【macOSアップデート】vagrant upできない時に一通り試すと良いかもしれない方法 - Qiita
sudo kmutil load -b org.virtualbox.kext.VBoxDrv
vagrant up
vagrant reload
vagrant provision
vagrant halt
ローカルアクセス。表示できた。
http://localhost:3000
Webサイト開発の色々なライブラリが使われているので
勉強していきたいと思います。
yarnをインストール
yarnをインストールしました。
手順は次のとおりです。
node -v npm -v npm install -g yarn yarn -v yarn init
yarnが実行できるようになりました。