Javascript（ES6）の開発環境、手間取りながらも完成！


せっかく作ったJSを動かしたい！
Javascript（ES6）の開発環境を作るチュートリアルをみながら環境を作っています。
しかしこれがまた、難しいのでした。

ここまでやったの記録です。


##Homebrewの確認
```console
robamimimnoMacBook-Air:~ robamimim$ brew -v
Homebrew 2.0.4
Homebrew/homebrew-core (git revision a290; last commit 2019-03-16)
Homebrew/homebrew-cask (git revision 757155; last commit 2019-03-18)
robamimimnoMacBook-Air:~ robamimim$ 
```

###nodebrewインストール

```console
robamimimnoMacBook-Air:~ robamimim$ brew install nodebrew
Updating Homebrew...
<以下略>
robamimimnoMacBook-Air:~ robamimim$ nodebrew -v
nodebrew 1.0.1
```

##Node.jsインストール

###.bash_profileにnodevrewを追加

```console
robamimimnoMacBook-Air:~ robamimim$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
robamimimnoMacBook-Air:~ robamimim$ source ~/.bash_profile
-bash: eval: line 35: syntax error: unexpected end of file
```

ありゃ？３５行目？

```console
robamimimnoMacBook-Air:~ robamimim$ cat -n .bash_profile 
     1	# added by Anaconda3 5.3.0 installer
     2	# >>> conda init >>>
     3	# !! Contents within this block are managed by 'conda init' !!
     4	__conda_setup="$(CONDA_REPORT_ERRORS=false '/anaconda3/bin/conda' shell.bash hook 2> /dev/null)"
     5	if [ $? -eq 0 ]; then
     6	    \eval "$__conda_setup"
     7	else
     8	    if [ -f "/anaconda3/etc/profile.d/conda.sh" ]; then
     9	        . "/anaconda3/etc/profile.d/conda.sh"
    10	        CONDA_CHANGEPS1=false conda activate base
    11	    else
    12	        \export PATH="/anaconda3/bin:$PATH"
    13	    fi
    14	fi
    15	unset __conda_setup
    16	# <<< conda init <<<
    17	eval "$(rbenv init -)"export PATH=$HOME/.nodebrew/current/bin:$PATH
robamimimnoMacBook-Air:~ robamimim$ 
```

おや？17行目までしかない。

`~/.nodebrew`がない。

```console
robamimimnoMacBook-Air:~ robamimim$ ls $HOME/.nodebrew/current/bin
ls: /Users/robamimim/.nodebrew/current/bin: No such file or directory
robamimimnoMacBook-Air:~ robamimim$ 
robamimimnoMacBook-Air:~ robamimim$ ls $HOME/.nodebrew
ls: /Users/robamimim/.nodebrew: No such file or directory
robamimimnoMacBook-Air:~ robamimim$ 
```

whichではここにある。

```console
robamimimnoMacBook-Air:~ robamimim$ which nodebrew
/usr/local/bin/nodebrew
```


どうしたことか。
Rubyの時も苦戦したけどまたここで！
再起動してみます。

```console
robamimimnoMacBook-Air:~ robamimim$ ls .node*
ls: .node*: No such file or directory
robamimimnoMacBook-Air:~ robamimim$ source ~/.bash_profile
-bash: eval: line 35: syntax error: unexpected end of file
robamimimnoMacBook-Air:~ robamimim$ env | grep node
```

ディレクトリがないんだものね。

ちょっと戻ってインストールログを見直す。

```
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 19 seconds
==> `brew cleanup` has not been run in 30 days, running now...
```

`Caveats`って「注目！」でしたっけ。
チュートリアルにはないけどやってみます。

```console
robamimimnoMacBook-Air:~ robamimim$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs
robamimimnoMacBook-Air:~ robamimim$ ls .nodebrew
default iojs    node    src
```

おっ、`.nodebrew` ができた！
ここに`.nodebrew/current/bin`はまだないけど・・・
`NODEBREW_ROOT`もないし

```console
robamimimnoMacBook-Air:~ robamimim$ ls /usr/local/var/nodebrew
ls: /usr/local/var/nodebrew: No such file or directory
```

とりあえずenvにいれておく

```sh
export PATH=$HOME/.nodebrew/current/bin:$PATH
export NODEBREW_ROOT=/usr/local/var/nodebrew
```

nodebrewは使えるので、とりあえず進んでみる。

```console
robamimimnoMacBook-Air:~ robamimim$ nodebrew help
nodebrew 1.0.1
```

あらら・・・

```console
robamimimnoMacBook-Air:~ robamimim$ nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v10.15.3/node-v10.15.3-darwin-x64.tar.gz
Warning: Failed to create the file                                                                                                                           
Warning: /usr/local/var/nodebrew/src/v10.15.3/node-v10.15.3-darwin-x64.tar.gz: 
Warning: No such file or directory
                                                                                                                                                          0.0%
curl: (23) Failed writing body (0 != 847)
download failed: https://nodejs.org/dist/v10.15.3/node-v10.15.3-darwin-x64.tar.gz
```
ダウンロードできない。ファイルが作れない。

```console
robamimimnoMacBook-Air:~ robamimim$ ls /usr/local/var/nodebrew/src/
ls: /usr/local/var/nodebrew/src/: No such file or directory
robamimimnoMacBook-Air:~ robamimim$ ls /usr/local/var/
homebrew	mysql
```

ファイルもディレクトリもない。
うーん。。。

```console
robamimimnoMacBook-Air:~ robamimim$ nodebrew use stable
No such file or directory at /usr/local/bin/nodebrew line 575.
```

だめか。。。

```console
robamimimnoMacBook-Air:~ robamimim$ node -v
-bash: node: command not found
```

続きは後ほど。

---

パスなしでsetupを呼んでみる。

```console
robamimim$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in /usr/local/var/nodebrew

========================================
Export a path to nodebrew:

export PATH=/usr/local/var/nodebrew/current/bin:$PATH
========================================
```

おや。前回と違う応答。
`.bash_profile`に`export PATH=/usr/local/var/nodebrew/current/bin:$PATH`を加えておく。

```console
robamimim$ nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v10.15.3/node-v10.15.3-darwin-x64.tar.gz
########################################################################################################################################### 100.0%
Installed successfully
```
インストールできたし！

```console
robamimim$ nodebrew use stable
use v10.15.3
robamimim$ node -v
v10.15.3
```
nodebrew完成！

###npmパッケージの管理ファイルを作成
```console

robamimim$ cd es6_sample/
robamimim$ ls
dist  src
robamimim$ npm init -y
Wrote to /Users/robamimim/Documents/JavaScript/es6_sample/package.json:

{
  "name": "es6_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


```
jsonできました！


###babelのインストール

```console
$ npm install --save @babel/core @babel/cli @babel/preset-env

> fsevents@1.2.7 install /Users/robamimim/Documents/JavaScript/es6_sample/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download 
[fsevents] Success: "/Users/robamimim/Documents/JavaScript/es6_sample/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN es6_sample@1.0.0 No description
npm WARN es6_sample@1.0.0 No repository field.

+ @babel/core@7.3.4
+ @babel/cli@7.2.3
+ @babel/preset-env@7.3.4
added 329 packages from 155 contributors and audited 3493 packages in 20.96s
found 0 vulnerabilities

$ 
```

OK!

そのままではエラーになるスクリプトも・・・

```console
$ node src/first.js
/Users/robamimim/Documents/JavaScript/es6_sample/src/first.js:1
(function (exports, require, module, __filename, __dirname) { import name from "./second";
＜以下略＞
```

babelでコンパイルすると動く！

```console
$ ./node_modules/.bin/babel src --out-dir dist
Successfully compiled 2 files with Babel.
$ node dist/first.js
にんじゃわんこ
```

さらに、package.jsonにスクリプト` "build": "./node_modules/.bin/babel src --out-dir dist"`を登録

```console
$ npm run build

> es6_sample@1.0.0 build /Users/robamimim/Documents/JavaScript/es6_sample
> babel src --out-dir dist

Successfully compiled 2 files with Babel.
$ node dist/first.js
にんじゃわんこ
```
babelを使って簡単にコンパイルができるようになりました！

##完成！
`nodebrew`のパスの設定で行ったり来たり悩ました。
もしかしたら`nodebrew setup`を先にしたらすんなり行けるのかもしれません。

```
nodebrew setup
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
source ~/.bash_profile
##nodebrew setup
```
（所要時間 2時間）