Open sumakokima2 opened 5 years ago
4-2. resiumのインストール 4-3. 地球儀の表示 4-4. ピンを表示
本項では、npm/yarnを通してpackage.jsonやwebpackの設定をしつつresiumをインストールすることを目指します。さらに、サンプルコードにある地球儀の表示とピンの表示まで実行してしまいます。（地球儀とピンについては詳細は別に書きます。）
今回はgithubを通して開発を進めることにします。 開発にはVIsual Studio Codeを用いることにします。
ローカルディレクトリの作成 お好きな場所に作業用ディレクトリを作成します。 ターミナルから、cd "ディレクトリ名"によって、ディレクトリの中に移動します。 （上のディレクトリに移動するときはcd ..。現在地の中にあるファイルの確認にはlsを入力します。）
cd "ディレクトリ名"
cd ..
ls
githubプロジェクトの作成とpackage.jsonの確認 まず、githubの個人アカウントから一つプロジェクトを作ることから始めます。 プロジェクトをgithubの基本に倣って作成すると、画面にSSHキーgit@github.com:sumakokima2/resium-sample2.gitが表示されます。
git@github.com:sumakokima2/resium-sample2.git
まず、resiumのサンプルコードにあるpackage.jsonから読み取れるように、resiumを使うためには17この開発用モジュール "devDependencies": {と、5つの表示用（？）モジュール"dependencies": {をインストールする必要があります。今回は確認のみにして、次の段階に進みます。
"devDependencies": {
"dependencies": {
package.json
{ "name": "resium-example", "version": "0.0.1", "private": true, "scripts": { "start": "webpack-dev-server --progress", "test": "eslint .", "build": "webpack --mode production" }, "devDependencies": { "@babel/core": "^7.2.2", "@babel/preset-env": "^7.2.3", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "copy-webpack-plugin": "^4.6.0", "eslint": "^5.12.0", "eslint-plugin-react": "^7.12.3", "html-webpack-include-assets-plugin": "^1.0.6", "html-webpack-plugin": "^3.2.0", "webpack": "^4.28.4", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" }, "dependencies": { "cesium": "^1.53.0", "react": "^16.7.0", "react-dom": "^16.7.0", "react-hot-loader": "^4.6.3", "resium": "^1.2.1" } }
git clone git@github.com:sumakokima2/resium-sample2.git
hh:resium-sample2 haradamakiko$ npm init
This utility will walk you through creating a package.json file.
このとき以下のようなpackage.jsonの基盤設定をする必要があります。 今回は特に難しい設定はせずにpackage nameのみ、適当に書き換えてあとはenterしてしまって構いません。
package name
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:
なお、今後はここにこれから作成するプロジェクトに必要なモジュールがまとめられます。
補足)hh:resium-sample2（←現在ディレクトリ） haradamakiko（←PC内ユーザ）$ （←接頭語）npm init（←命令）
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を自動的に更新してくれる 1. webpack.config.js、.babelrc、 .eslintrcを作成（サンプルコードからコピペ） ありがたいことに、サンプルコードから全部コピペできます。 ローカルディレクトリ内に、（テキストエディタでも構いません）新たにデータを作って保存します。 補足）・webpackは各プロジェクトごとに必要なモジュールを用意する仕組み。汎用性よりも、バージョン管理などの安定運用のためと、記入言語の多様性による不具合解消を助ける。 ・.babelrc, .eslintrcも同様に作成（サンプルコードからコピペ） ・babelは言語のマッチング ・eslintは書いたコードの静的検証ツール 1. webpackの書き換え とはいえ、サンプルコードのままだと不具合が起きてしまいます。 なので、以下のように3箇所を変更してください。
"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", }),
補足）私の場合、もう一箇所、書き換える必要がありました。
new CopyPlugin([ { from: node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}, to: "cesium", }, ]),
私のような超初心者の場合、部分的に書かれても、それがどこにどうやってあるのかわからないと思うので、以下に全文を書きます。 webpack.config.js
"use strict";
const path = require("path");
const webpack = require("webpack"); const HtmlPlugin = require("html-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const HtmlIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");
module.exports = (env, args) => { const prod = args.mode === "production"; return { context: __dirname, devServer: { hot: true, port: 3000, }, devtool: !prod ? void 0 : "eval-source-map", entry: "./src", externals: { cesium: "Cesium", }, mode: prod ? "production" : "development", module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: "babel-loader", }, ], }, output: { path: path.join(__dirname, "build"), }, plugins: [ 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()]), ] }; };
node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}
1. gitignoreを作成 gitで管理しないものを登録。なぜなら、全てをgitで管理してしまうと、gitが重くなりすぎてしまうからです。一般に、node_modulesはgitサーバが重たくなりすぎるのでローカルで管理することが推奨されています。 `.gitignore`ファイルを作成し、中に`node_modules`とだけ書けばオッケーです。 1. yarnの導入 ここでnpmと似たような働きをしてくれるyarnを導入します。 今後の運転確認で私の場合はyarnを使いたいので今インストールします。 `hh:resium-sample2 haradamakiko$ yarn install` インストールすると、yarn.lockが自動的に作成されます。 .lockはバージョン管理に必須なもので、モジュール？のバージョンが自動変更しても、過去のバージョンで固定してくれるというメリットがあります。これを無視して常に新しいモジュールを使うようにした場合、モジュールの状況によっては制作物がうまく動かないといった不具合が生じる恐れがあります。 なお、yarn.lockについては特になにも書き込んだりする必要はありません。 1. 運転確認 ここまでで、本項の目的は達成できているはずです。 以下のコードをターミナルに入力して、運転確認をしてみましょう。 無事に地球儀が表示されれば目標達成です。 `hh:resium-sample2 haradamakiko$ yarn start` *** #### 構成 - リスト1 - リスト1_1 - リスト1_1_1 - リスト1_1_2 - リスト1_2 - リスト2 - リスト3 *** #### 用語確認 **Describe the solution you'd like** A clear and concise description of what you want to happen. *** #### 手順 1. 番号付きリスト1 1. 番号付きリスト1-1 1. 番号付きリスト1-2 1. 番号付きリスト2 1. 番号付きリスト3 *** #### 詰まったところ **Additional context** Add any other context or screenshots about the feature request here. *** #### 課題 **Additional context** Add any other context or screenshots about the feature request here.
清書は後々するとして、前回のメモを文章化しました。
sumakokima2
commented
5 years ago
Wikiの項目
4-2. resiumのインストール 4-3. 地球儀の表示 4-4. ピンを表示
本項では、npm/yarnを通してpackage.jsonやwebpackの設定をしつつresiumをインストールすることを目指します。さらに、サンプルコードにある地球儀の表示とピンの表示まで実行してしまいます。（地球儀とピンについては詳細は別に書きます。）
前提条件
今回はgithubを通して開発を進めることにします。 開発にはVIsual Studio Codeを用いることにします。
ローカルディレクトリの作成 お好きな場所に作業用ディレクトリを作成します。 ターミナルから、
cd "ディレクトリ名"によって、ディレクトリの中に移動します。 （上のディレクトリに移動するときはcd ..。現在地の中にあるファイルの確認にはlsを入力します。）githubプロジェクトの作成とpackage.jsonの確認 まず、githubの個人アカウントから一つプロジェクトを作ることから始めます。 プロジェクトをgithubの基本に倣って作成すると、画面にSSHキー
git@github.com:sumakokima2/resium-sample2.gitが表示されます。まず、resiumのサンプルコードにあるpackage.jsonから読み取れるように、resiumを使うためには17この開発用モジュール
"devDependencies": {と、5つの表示用（？）モジュール"dependencies": {をインストールする必要があります。今回は確認のみにして、次の段階に進みます。package.json
git clone git@github.com:sumakokima2/resium-sample2.githh:resium-sample2 haradamakiko$ npm initすると、This utility will walk you through creating a package.json file.といったメッセージが表示されます。先述したサンプルコードにもあるpackage.jsonが自動作成されます。このとき以下のようなpackage.jsonの基盤設定をする必要があります。 今回は特に難しい設定はせずに
package nameのみ、適当に書き換えてあとはenterしてしまって構いません。なお、今後はここにこれから作成するプロジェクトに必要なモジュールがまとめられます。
補足)hh:resium-sample2（←現在ディレクトリ） haradamakiko（←PC内ユーザ）$ （←接頭語）npm init（←命令）
hh:resium-sample2 haradamakiko$ npm install cesium react react-dom react-hot-loader resium --save
"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", }),
new CopyPlugin([ { from: node_modules/cesium/Build/Cesium${prod ? "" : "Unminified"}, to: "cesium", }, ]),
"use strict";
const path = require("path");
const webpack = require("webpack"); const HtmlPlugin = require("html-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const HtmlIncludeAssetsPlugin = require("html-webpack-include-assets-plugin");
module.exports = (env, args) => { const prod = args.mode === "production"; return { context: __dirname, devServer: { hot: true, port: 3000, }, devtool: !prod ? void 0 : "eval-source-map", entry: "./src", externals: { cesium: "Cesium", }, mode: prod ? "production" : "development", module: { rules: [ { test: /.js$/, exclude: /node_modules/, use: "babel-loader", }, ], }, output: { path: path.join(__dirname, "build"), }, plugins: [ 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()]), ] }; };