ゼロから始めるnode.js

node.jsを学び始めたので、それに関するメモ

ところどころ間違っているかもしれません。

記事の改善については編集リクエストで受け付けます。

環境はmacを前提にしています。


Node.JSとBrowserのVersionの違いを理解する


  • Node.JSはES6,7,8にも対応している。

  • Browserはそれに追いつかず、まだES5しか対応していない。


ES6,7,8をES5に変換したい時

ES6,7,8に書いた内容を、ES5に変換する。→トランスパイルという。(*コンパイルとは違う)

トランスパイルには、webpacketを使用する。


node.jsの内部構造を理解する

node.js概念図.jpg

C言語とPythonとnode.jsを比較すると、こんな感じ。


npmの使い方を理解する


npmとは。

https://team-lab.github.io/skillup-nodejs/2/4.html

のサイトから引用すると、


Node Packaged Modules(npm)とはNode.jsのライブラリやパッケージを管理することができるツールです。 ライブラリやパッケージの管理ツールを主にパッケージマネージャと呼びます。


いわゆる、node.jsの中で使える、便利な機能をインストールしたい時に使うコマンド見たいなもの。ruby on railsでいう、gemみたいな感じ。

$ npm install 'ライブラリ名'

でインストールできる。

$ npm uninstall 'ライブラリ名'

でアンインストールもできる。


環境構築

node.jsのVersionを最新にするためにnというVersion管理ライブラリを使用する

$ npm install -g n

-gはグローバルのg。これをつけると、どのフォルダ上でもnode.jsのversionが最新になる。


フォルダ作成

$ mkdir newApp


移動

$ cd newApp


初期設定

$ npm init

npm initをしておくと、色々、便利となる。

npm initをすると、package.jsonが作成される。

npm install expressなど、何かライブラリをインストールすると、

node_moduelsというフォルダが作成される。

(*Versionによっては、package-lock.jsonも作られる。)

基本的には、このようなツリー構造となる

./newApp

├node_modules/

└package.json


node_modules

$ npm install 'ライブラリ名'をしたライブラリは、node_modulesのフォルダに入る。アプリを作っていると、めちゃくちゃ多くなる。


package.json

newAppの説明書。アプリ名やどんなライブラリをインストールしたかなど。


npm initは何が便利なのか。

$npm i

を打つと、package.jsonに書いてあるライブラリ名をいっきにダウンロードしてくれる。

よって、gitに上げる際に、わざわざ、node_modulesの中身をあげなくても、package.jsonだけをアップロードし、そこで、npm iをすると、時間を短縮できる。


注意

なるべく

$ npm install -g 'ライブラリ名'

のように-gをつける行為は行わない方が良い。

なぜなら、-gをつけてしまうと、package.jsonにインストールしたライブラリ名が書き加えられないから。


コマンドを省略する

package.jsonのscriptsの中に“省略したコマンド名”: “コマンド”と書くと、npm run ”省略したコマンド名”とするとそのコマンドを実行できる。


package.json



"scripts": {
"l": "ls"
}

とすると、lsコマンドが、

$ npm run l

となる。


webpackでトランスパイルをする

webpackをインストール

$ npm install webpack

webpacketコマンドは、ローカルにインストールしたため、node_modules/.binに隠れている。newApp.jsというファイルをトランスパイルして、bundle.jsという名前のファイルを作成する場合、

$ node_modules/.bin/webpack ./newApp.js bundle.js

とする。


webpack.config.jsを使う

毎回毎回 $webpack ‘変更したいファイル名’ ‘変更した後のファイル名’を打つのは少し大変だなぁと思った時は、webpack.config.jsを作成する。


webpack.config.js

const path = require('path’); //pathという特殊な、'npm install'を使用しなくても、初期から入っている、パッケージをimportしている。

module.exports = {
entry: ‘./newApp.js', //変更したいファイル名を入力する
output: {
filename: 'bundle.js’,//変更後のファイル名を入力する
path: path.resolve(__dirname, '
dist)//変更後のファイルを入れておくフォルダ名を入力する。ここではdist
}
};


変更したいファイル名と、変更後のファイル名と、変更後のファイルを入れておくフォルダ名を入力した、webpack.config.jsというファイルをカレントディレクトリにおいておく。そうすると

$ node_modules/.bin/webpackage .

と,

web pack.config.jsが存在する場所を指定してあげると、良い。

また、コツとしては、

node_modules/.bin/webpackをなんども打つのも冗長なので、


package.json



"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"build": "./node_modules/.bin/webpack ."
}

としておくと、

$ npm run build

と打つだけで、トランスパイルをしてくれるので、ちょっとだけ、手を痛めない。