超初期設定（オンライン指導）

sumakokima2 commented 5 years ago

手順

開発環境を整えることが本章の目的です。まず、今回勉強するコードのベースとなるファイル群をgitから持ってきます。次にgitの醍醐味であるpackage.jsonの設定をします。このpackage.jsonを基盤に、開発に必要となる初期モジュールを導入していきます。

package.jsonパッケージの依存関係を記述したjsonファイルになります。このファイルに、プロジェクト毎に必要なパッケージの名前とバージョンを記述すれば、npmが自動で必要なパッケージをインストールしてくれます。参考リンク

基本的には$ npm installで一括でできます。

次にwebpackの設定をします。これは、Webアプリケーションに必要なリソースの依存関係を解決し、CSSやJavaScriptなどのアセットを生成するビルドツールです（上記参考リンクを参照）。簡単に言い換えると、 jsやcssデータを、開発時には細分化して書き込めて、表示させる(システム稼働するとき)は、そのときに必要なものだけを使うことができる ということです。

gitクローン

ターミナルからたたくとローカル環境にフォルダとデータが自動生成される $ git clone git@github.com:sumakokima2/resium-sample2.git

*クローンした後は必ずcd resium-sample2でディレクトリを移動してください。

npmをインストールした後最初に使用する初期化処理を意味するコマンド


hh:resium-sample2 haradamakiko$ npm init
This utility will walk you through creating a package.json file.

package name: (resium-sample2) version: (1.0.0) description: entry point: (index.js) test command: git repository: (https://github.com/sumakokima2/resium-sample2.git) keywords: author: license: (ISC) About to write to /Users/haradamakiko/git/resium-sample2/package.json:

{ "name": "resium-sample2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/sumakokima2/resium-sample2.git" }, "author": "", "license": "ISC", "bugs": { "url": "https://github.com/sumakokima2/resium-sample2/issues" }, "homepage": "https://github.com/sumakokima2/resium-sample2#readme" }


### 初期モジュールのインストール
* exampleのpackage.jsonから抽出

`hh:resium-sample2 haradamakiko$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader copy-webpack-plugin eslint eslint-plugin-react html-webpack-include-assets-plugin html-webpack-plugin webpack webpack-cli webpack-dev-server
`

`hh:resium-sample2 haradamakiko$ npm install cesium react react-dom react-hot-loader resium --save`

* --save　はモジュールそものもが必要なもの
* --save-dev　は開発のために必要なもの
* saveをつけると、package.jsonを自動的に更新してくれる

### webpack.config.jsを作成（サンプルコードからコピペ）
* webpackは各プロジェクトごとに必要なモジュールを用意する仕組み。汎用性よりも、バージョン管理などの安定運用のためと、記入言語の多様性による不具合解消を助ける
* .babelrc, .eslintrcも同様に作成（サンプルコードからコピペ）
* babelは言語のマッチング
* eslintは書いたコードの静的検証ツール

### git用sshキーの設定と登録
* sshキーの作成

`hh:resium-sample2 haradamakiko$ ssh-keygen`

Generating public/private rsa key pair. Enter file in which to save the key (/Users/haradamakiko/.ssh/id_rsa): /Users/haradamakiko/.ssh/id_rsa already exists. Overwrite (y/n)? y


* sshキーの確認

hh:resium-sample2 haradamakiko$ cat ~/.ssh/id_rsa.pub

ssh-rsa AAAAB3N...................fritz.box

までをコピーして、gitアカウントに登録

### gitignoreを作成
* gitで管理しないものを登録。
* 例えば、node_modulesはgitサーバが重たくなりすぎるのでローカルで管理する

### yarnの導入
* yarn.lockが作成される
* .lockはバージョン管理に必須なもので、モジュール？のバージョンが自動変更しても、過去のバージョンで固定してくれる

`hh:resium-sample2 haradamakiko$ yarn install`

### webpackの書き換え

"scripts": { "start": "webpack-dev-server --progress", "test": "eslint .", "build": "webpack --mode production" },

devtool: !prod ? void 0 : "eval-source-map", entry: "./src", externals: { cesium: "Cesium", },

new HtmlPlugin({ template: "index.html", }),

, resolve: { extensions: ['.wasm', '.mjs', '.js', '.json', '.ts', '.tsx'] }//tsを使うとき


### 運転確認
`hh:resium-sample2 haradamakiko$ yarn start`

### VSCでgit接続
* add（+ボタン） commit(リストの上側) push（左下雲のマーク）を行う

### tsを使うための設定
* typescriptは、javascriptの上位互換。なので、ts内でjsの記述はできるけど、js内でtsの記述はできない。
* ts内ではjs構文にxmlのような<  />を埋め込むことができる

`hh:resium-sample2 haradamakiko$ npm install --save-dev tslint tslint-config-prettier tslint-plugin-prettier tslint-react typescript @types/cesium @types/react @types/react-dom`

`yarn add --dev @types/webpack-env`

`yarn add --dev ts-loader`

`hh:resium-sample2 haradamakiko$ yarn add --dev ts-loader`

* tslint.json,を新規作成。exampleコードからコピペ。

{ "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], "rules": { "interface-name": false, "jsx-boolean-value": [true, "never"], "jsx-no-multiline-js": false, "no-console": false, "ordered-imports": false, "object-literal-sort-keys": false, "prettier": { "severity": "warning" } }, "rulesDirectory": ["tslint-plugin-prettier"] }


//tsconfig.jsonを新規作成。exampleコードからコピペ。

{ "compilerOptions": { "allowSyntheticDefaultImports": true, "esModuleInterop": true, "jsx": "react", "lib": ["es2015", "es2016", "es2017", "es2018", "dom"], "module": "commonjs", "moduleResolution": "node", "noImplicitReturns": true, "pretty": true, "rootDir": ".", "sourceMap": true, "strict": true, "target": "es5", "baseUrl": ".", "paths": { "": ["src/types/"] } } }

### webpackの書き換え、追加

{ test: /.tsx?$/, exclude: /node_modules/, use: [ ...(prod ? [] : [ { loader: "babel-loader", options: { babelrc: false, cacheDirectory: true, plugins: ["react-hot-loader/babel"], }, }, ]), "ts-loader", ], },


* 書き換え

resolve: { extensions: ['.wasm', '.mjs', '.js', '.json', '.ts', '.tsx'] }, （編集済み）

sumakokima2 commented 5 years ago

Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = index.html [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 492 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] ℹ ｢wdm｣: Failed to compile.

sumakokima2 commented 5 years ago

visualcodeの変更がデータに反映されていないというバグによるもの。

sumakokima2 commented 5 years ago

Refused to apply style from 'http://localhost:3000/cesium/Widgets/widgets.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. Cesium.js:1 Failed to load resource: the server responded with a status of 404 (Not Found) log.js:24 [HMR] Waiting for update signal from WDS... react-hot-loader.development.js:2432 React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work. patch @ react-hot-loader.development.js:2432 external"Cesium":1 Uncaught ReferenceError: Cesium is not defined at eval (external"Cesium":1) at Object.cesium (main.js:2522) at webpack_require (main.js:724) at fn (main.js:101) at Module.eval (app.js:6) at eval (app.js:54) at Module../src/app.js (main.js:2488) at webpack_require (main.js:724) at fn (main.js:101) at eval (index.js:6) on_content_end.js:54 on_content_end ==>response to loadPagePattern, href=http://localhost:3000/, pattern.id=undefined on_content_end.js:80 before call TMExt.initTooltip on_content_end.js:85 after call TMExt.initTooltip :3000/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found) client:79 [WDS] Hot Module Replacement enabled. client:153 [WDS] Warnings while compiling. warnings @ client:153 client:162 unable to locate '../node_modules/cesium/Build/CesiumUnminified' at '/Users/haradamakiko/git/node_modules/cesium/Build/CesiumUnminified' warnings @ client:162 localhost/:1 Refused to apply style from 'http://localhost:3000/cesium/Widgets/widgets.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

sumakokima2 commented 5 years ago

正解 [ new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify("/cesium"), }), new CopyPlugin([ { from: node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}, to: "cesium", }, ]), new HtmlPlugin({ template: "index.html", }), new HtmlIncludeAssetsPlugin({ append: false, assets: ["cesium/Widgets/widgets.css", "cesium/Cesium.js"], }), ...(prod ? [] : [new webpack.HotModuleReplacementPlugin()]), ]

sumakokima2 commented 5 years ago

間違い [ new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify("/cesium"), }), new CopyPlugin([ { from: ../node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}, to: "cesium", }, ]), new HtmlPlugin({ template: "index.html", }), new HtmlIncludeAssetsPlugin({ append: false, assets: ["cesium/Widgets/widgets.css", "cesium/Cesium.js"], }), ...(prod ? [] : [new webpack.HotModuleReplacementPlugin()]), ]

sumakokima2 commented 5 years ago

new CopyPlugin([ { from: ../node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}, to: "cesium", }, ]),

のディレクトリ設定が間違っていました。上記のメソッドで実行してエラーが発生した場合、

1.モジュールの不足 2.サンプルファイルの微調整のミス 3.エントリーポイントとパス

の3点をまず見てみるとよいかもしれません。

今回3回目ですが、通常ひっかかるモジュールの不足は一発オッケー。サンプルファイルとの調整の時に、webpackとpackage.jsonの比較をきちんと行わなかったため、webpackで大きなミスが発覚しました。最後に、エントリーポイントを.srcにするか.src/index.jsにするかは作ったファイルの構成に依存します。どうしたら正解かイメージできないときは、両方やってみましょう。

sumakokima2 / resium-sample2

超初期設定（オンライン指導） #1

手順

gitクローン