とりあえずこの辺り使ってやってみたいなと思ったのをざっと書き出し。
- webpack
- yarn
- react
- typescript
- scss
この辺り通りにやればできるかな https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
- jQuery使わない
- js書かない？
- DOM操作しない？
- とりあえず今時のフロントエンド覚える
- jQuery便利
- 一応全部typescriptだったけどtsも色々なバージョンで書きかたの違いがあって相変わらずの気持ち悪さは拭きれなかった。。この辺りは言語進化が早すぎる業界なのでもうこれ！と決めてしまった方がいいのだろうけどその言語さえもアップデートで仕様かわるからうーん。。
- DOM操作しまくったわ。
- 結局適材適所で、いつもやってるような毎度オリジナル仕様での単発逃切り開発にReactのメリットはそんなになかったな。。この辺りは使いこなせてない感の方が強いけども。
- でもtsでの使い回しクラスとかができたので今後直近でweb開発するタイミングがあればその辺りは書かなくていいしもうちょい楽そう。
- あとwebpackとか仕組み全部包括したreactのcreate-react-app -ts いいすね。とりあえずあれ用のシーン遷移できる簡易フレームワークはできた。
- でも1年も経てばまた使えなくなる（流行りが変わってる）のでまたその時覚えたらいんじゃないかな。
- 久しぶりのweb楽しかったよ！
yarn https://yarnpkg.com/lang/en/
$ npm install -g yarn
https://qiita.com/morrr/items/558bf64cd619ebdacd3d
| npm | yarn | 機能 |
|---|---|---|
npm init |
yarn init |
管理を開始(インタラクティブ) |
npm init -y |
yarn |
管理を開始(即時) |
npm install |
yarn install |
記録されたパッケージをインストール |
npm install --save [package@version] |
yarn add [package@version] |
インストール + 記録 |
npm install --save-dev [package] |
yarn add --dev [package] |
開発環境にのみインストール + 記録 |
npm install --global [package] |
yarn global add [package] |
グローバルにインストール |
npm uninstall --save [package] |
yarn remove [package] |
パッケージと記録を削除 |
npm uninstall --save-dev [package] |
yarn remove [package] |
開発環境のパッケージと記録を削除 |
npm update --global |
yarn global upgrade |
グローバルのパッケージ全体を更新 |
rm -rf node_modules && npm install |
yarn upgrade |
ローカルのパッケージ全体の更新 |
npm update [package] |
yarn upgrade [package] |
ローカルのパッケージの更新 |
npm cache clean |
yarn cache clean |
キャッシュクリア |
npm info [package] |
yarn info [package] |
パッケージ情報の表示 |
npm outdated |
yarn outdated |
古いパッケージ一覧の表示 |
npm run [script] |
yarn run [script] |
package.json内のscriptに定義されたスクリプトを実行 |
npm search [package] |
なし？yarn info [package]で一応調べられる |
パッケージのバージョン一覧の取得 |
| yarn | 機能 |
|---|---|
yarn check |
package.jsonの内容を検証する |
yarn create [kit] [project] |
[kit]に規定の方法でプロジェクトを新規作成する。(react-appなど) |
yarn licenses ls |
インストール済みパッケージのライセンス一覧を表示 |
yarn versions |
関連するミドルウェアのバージョン表示 |
yarn why [package] |
パッケージがインストールされた経緯を表示 |
とりあえずいつも使うパッケージをつくるとこから。（何回使うかも分からないけど）
$ mkdir template
$ cd template
$ mkdir src
$ mkdir build
$ yarn init -y
package.json ができる。中身。
{
"name": "template",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
$ yarn add global webpack typings
$ yarn add react react-dom
$ yarn add --dev typescript @types/react @types/react-dom
$ yarn add --dev awesome-typescript-loader source-map-loader node-sass css-loader sass-loader style-loader postcss-loader autoprefixer file-loader url-loader ts-loader
$ yarn add --dev babel-core babel-loader babel-preset-es2015 babel-preset-react
$ yarn add --dev webpack-dev-server
$ yarn add --dev extract-text-webpack-plugin
なんかいろんなところで書かれてるけどちゃんと動くのがない。。
https://medium.com/@fay_jai/getting-started-with-reactjs-typescript-and-webpack-95dcaa0ed33c ここのが一番最小構成で tsconfig.jsonを以下修正でとりあえずコンパイルいけた。 これをベースに書き換えてった方が早そう。
"exclude": [
"node_modules/**/*",
この後、色々やりたいことの兼ね合いで 構成検討しなおし→設定ファイル書き方調べる、変える→構成検討しなおし→... をぐるぐるし続ける
もう TypeScript-React-Starter 使おう。。 Facebookがreactのテンプレ作ってくれてるのでこれで一瞬でできる。 https://github.com/facebookincubator/create-react-app
もう以下だけでreactのtempleteはおk
Please specify the project directory:
$ create-react-app <project-directory>
For example:
$ create-react-app my-react-app
$ cd my-react-app
$ yarn start
で勝手にローカルサーバ立ち上がって終了。。さっきまでの旅はなんだったのか。
んでこれをtypescriptでやる。 因みに typescript ブラウザで試せるとこ http://www.typescriptlang.org/play/
ここ見てやればおk https://github.com/Microsoft/TypeScript-React-Starter
create-react-app を ts オプションつけたらいけるぽい。ほう。。
$ create-react-app my-app --scripts-version=react-scripts-ts
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd sketch_ts
yarn start
Happy hacking!
とりあえずこのreadmeを一通りやればわかるだろう。。
ここも見てみながら https://qiita.com/m0a/items/d723259cdeebe382b5f6
困った時のICSさん！！！！ https://ics.media/entry/16329#webpack-ts-three
ここ見て自分でやるしかないのか。。 https://qiita.com/takaki@github/items/da1bbf102df198cd5a75
てかここ読めばおk。 https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614
https://qiita.com/Chrowa3/items/a566489392fc1c969b88 http://typescript.ninja/typescript-in-definitelyland/typescript-basic.html TypeScript Ninjaさんのとこちゃんと読みたいな〜
tweenjsのモジュールいっぱいあってtypesとの組合せどれか全然わからんかった、、 結局これ使った https://github.com/tweenjs/tween.js/
yarn add @tweenjs/tween.js @types/tween.js
yarn add three @types/three
yarn install
しなおしたらいけた。。
expo/create-react-native-app#135 oh, Fucking Dropbox...
https://qiita.com/yakimeron/items/7a4f8d9e70a4a2b1b96b
yarn ejectで設定ファイル書き出してpath.js内のデフォルト部分書き換える。
function getServedPath(appPackageJson) {
const publicUrl = getPublicUrl(appPackageJson);
const servedUrl =
envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './'); ←ここ
return ensureSlash(servedUrl, true);
}
プロパティへの.アクセスがダメらしい、、
console.log(this.geometry.attributes['position']); // ok
console.log(this.geometry.attributes.position); // ng
https://www.npmjs.com/package/react-load-script これでいけるのかな。。
yarn add react-load-script
結局かーい
yarn add jquery @types/jquery
import * as $ from "jquery";