Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kihaku_dol

JavaScript初心者がNEM Library使ってWebアプリを作りたい、から環境構築した(その2)

Last updated at Posted at 2018-04-19

前回は、VSCode、Node.js、yarnの導入までをしました。
今回は、フォルダ構成、初期ファイル配置、babel、webpack、webpack-dev-serverの導入までをします。

ワークスペースの作成

VCだとプロジェクトでしょうか。

ワークスペース全体のフォルダ(例：myproject)を作ります。
フォルダを作ったら、VSCodeを起動し、左ペインから「フォルダーを開く」から開きます。
ファイル->ワークスペースを保存を開き、ワークスペースを保存します。
私はよくわからないので、作ったmyprojectフォルダ内に、プロジェクト名(myproject)でワークスペースファイルを保存しました。(myproject.code-workspace)

ワークスペースの初期設定(package.jsonの作成)

F1キーでクイックオープンからYarn: Initialize Yarn Packageを実行します。
色々入力を聞かれますが、すべてEnterでOKです。

以下のようなフォルダ構成になりました。
package.jsonはVCでのプロジェクトファイルのような感じですかね。

myproject
 ├myproject.code-workspace
 └package.json

フォルダ構成

以下のようなフォルダを作っておきます。
参考：https://saitoxu.io/2017/03/20/es6-tutorial.html

myproject
 ├dist
 ├lib
 ├src
 ├myproject.code-workspace
 └package.json

distがwebで実行用、libがnodeで実行用、srcはソースコードになっています。
こんな使い方をする人はいないようですが、あちこち調べているうちにこうなりました。
JavaScript初心者の私には意外と便利だったりします。

srcでコードを書き、babelでトランスパイルしたものをlibに出し、nodeで実行します。
ブラウザなしで動作確認できます。(console.log()も出力してくれます)
ただし、windowやdocument(DOM)はないため、動作しないっぽいです。
window

ブラウザを通して実行する場合には、webpack + babelでトランスパイルしたものをdistに出し、webpack-dev-serverでhtmlから読みながら動作させ、逐次修正できるようです(まだ、やっていません)。
windowやdocument(DOM)の動作はこちらで確認ですね。
VSCodeでデバッグするにはsource-map(VCでのシンボルファイルだと思う)が必要で、これはwebpackのオプションで作成します(詳細は別途)。

index.htmlの作成

ブラウザを通して確認する場合の、index.htmlをdistに作成します。
Bundle(コンパイル)後のファイルはmain.jsとします。
distにできたmain.jsを参照して動作するイメージです。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <script src="main.js"></script>
  </body>
</html>

index.html内のscript呼び出しは、とりあえず最低限にしておきます。
dllmainっぽいです。

動作確認用にmain.jsを追加します。
distにファイルを新規作成し、以下を記載します。

main.js
window.document.write("Hello JS World!");

この状態で、index.htmlをブラウザで開くと、「Hello JS World!」と表示されています。
VSCodeのmarketplaceで、View in Browserをインストールしておくと、index.htmlファイルを右クリックし「View in Browser」からブラウザ表示できます！

myproject
 ├dist
 │  ├index.html
 │  └main.js
 ├lib
 ├src
 ├myproject.code-workspace
 └package.json

babelのインストール

トランスパイル(ソースコードの.jsからいろいろなブラウザで実行できるような.jsにコンパイル)用のbabelをインストールします。
Webアプリ界隈は規格・仕様の変更が非常に速いため、いちいちそれ向けのコードを書いていられません。
このあたりを吸収してくれるのがbabelのようです。

F1キーでクイックオープンから、Yarn: Add and Save dev. Dependencyを実行します。
image.png
babel-cli babel-core babel-loader babel-preset-envをインストールします。
参考：https://qiita.com/y-temp4/items/9be4b041565a4bb24dab
参考：https://babeljs.io/docs/usage/cli/

インストールすると、以下のように変わります。

  1. rootディレクトリにnode_modulesが追加され、この中にモジュールが保存されている
  2. rootディレクトリにyarn.lockが追加されている。
  3. package.jsonにdevDependenciesが追加され、インストールしたモジュール名とバージョンが書かれている
package.json
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1"
    }

次に.babelrcを作成します。
rootフォルダにファイルを新規作成し、ファイル名を.babelrcとします。
内容は以下を記載して保存します。

.babelrc
{
    "presets": [
        ["env", {"modules": false}]
    ]
}

{"modules": false}にしないと、WebpackのTreeShake機能が有効にならないようです。
https://ics.media/entry/16028

package.jsonに2点追記します。
1.mainにindex.jsを追記します。(すでにあれば不要です)
2.scriptsにbuildを追記します。(scripts内にtestがすでにあると思います)
scriptsに追加したコマンドはターミナルから、yarn run コマンドで実行できるようになります。
ここでは、'yarn run build'になります。

package.json
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "babel src -d lib"
    },

srcにindex.jsを作成します。

index.js
console.log("Hello World");

ターミナルからyarn run buildします。
問題なければ、libフォルダにindex.jsが生成されます。
node lib/index.jsを実行します。
ターミナルに「Hello World!」と表示されます。

myproject
 ├dist
 │  ├index.html
 │  └main.js
 ├lib
 │  └index.js
 ├node_modules
 │  └省略
 ├src
 │  └index.js
 ├.babelrc
 ├myproject.code-workspace
 ├package.json
 ├yarn-error.log
 └yarn.lock

yarn-error.logはエラーが発生するとできます。

webpackのインストール

色々なモジュール(.js)やCSS等から構成されるもろもろを1つの.jsにまとめる(バンドルする)ツールのようです。
VCだと、DLLやiniを個別に分割せず、1つのEXEにする感じだと思います。

F1キーでクイックオープンから、Yarn: Add and Save dev. Dependencyを実行します。
webpack webpack-cliをインストールします。
インストールすると、package.jsonのdevDependenciesに、インストールしたモジュール名とバージョンが書かれます。

package.json
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14",
    }

webpackの設定ファイルwebpack.config.jsを作成します。
root以下に新規ファイルを作成します。
参考：https://qiita.com/one-kelvin/items/b810aafb6b5ef90789a3

webpack.config.js
const path = require('path');

module.exports = {
  entry: __dirname + "/src/index.js", 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};

webpack + babelで実際にトランスパイルしてみます。
ターミナルでyarn run webpackを実行します。
成功すると、dist/main.jsが変わっていることがわかります。

dist/index.htmlをブラウザで開くと、何も表示されていませんが、F12キー等で開発者向けウインドウを開き、表示をコンソールにし、ページのリロードをすると、「Hello World」が出力されます。

myproject
 ├dist
 │  ├index.html
 │  └main.js
 ├lib
 │  └index.js
 ├node_modules
 │  └省略
 ├src
 │  └index.js
 ├.babelrc
 ├myproject.code-workspace
 ├package.json
 ├webpack.config.js
 ├yarn-error.log
 └yarn.lock

webpack-dev-serverをインストールする

ブラウザで動作確認するときに、.jsを変更し、webpackでトランスパイルし、ブラウザを開きなおす、ことを毎回するのは非常に面倒です。
そこで、webpackのwatch機能を使って、ファイルを監視し、変更があればトランスパイルし直し、これを開発用サーバー上で更新する、ような仕組みのwebpack-dev-serverを使います。

F1キーでクイックオープンから、Yarn: Add and Save dev. Dependencyを実行します。
webpack-dev-serverをインストールします。
インストールすると、package.jsonのdevDependenciesに、インストールしたモジュール名とバージョンが書かれます。

package.json
    "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14",
        "webpack-dev-server": "^3.1.1"
    }

webpack.config.jsにdevServerの設定、hotのPlugin設定、modeの設定を追加します。
追加後は以下のようになります。

webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: __dirname + "/src/index.js", 

  mode: 'development', 

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },

  devServer: {
    contentBase: 'dist',
    open: true,
    historyApiFallback: true,
    port: 8081,
    inline: true,
    hot: true
  },

  plugins : [
    new webpack.HotModuleReplacementPlugin()
  ],
  
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }
};
  },

ターミナルからyarn run webpack-dev-serverで実行します。
ブラウザでlocalhost:8081を開いたら、F12キー等で開発者向けウインドウを開き、表示をコンソールにし、ページのリロードをすると、「Hello World」が出力されます。
その状態で、src/index.jsをconsole.log("Hello JS World");に変更します。
そうすると、ブラウザのコンソールに「Hello JS World」が表示されます。

Debug環境の構築

本筋とずれてきたので、Win10 + VSCode + webpack-dev-serverでのデバッグ環境は省略。
ざっくりとやること。

  1. webpack.config.jsへの追加
  2. package.jsonに以下
    • 追加 scriptsに"start" : "webpack-dev-server -d"
  3. launch.json作成と設定

今回はここまでです。
またしても、NEM Libraryにたどり着きませんでした。。。
次回はNEM Libraryのインストールからです。

NEMトランザクションのメッセージでHello Worldを送り、それをHTMLに表示したいと思います。

JavaScript初心者がNEM Library使ってWebアプリを作りたい、から環境構築した(その1)
JavaScript初心者がNEM Library使ってWebアプリを作りたい、から環境構築した(その2)
JavaScript初心者がNEM Library使ってWebアプリを作りたい、から環境構築した(その3)

変更履歴
2018/05/10 .babelrcの記載を修正、リンク先を追加

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?