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

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

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

Homebrewの確認

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インストール

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

Node.jsインストール

.bash_profileにnodevrewを追加

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

ありゃ？３５行目？

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がない。

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ではここにある。

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

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

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って「注目！」でしたっけ。
チュートリアルにはないけどやってみます。

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もないし

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

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

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

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

robamimimnoMacBook-Air:~ robamimim$ nodebrew help
nodebrew 1.0.1

あらら・・・

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

ダウンロードできない。ファイルが作れない。

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

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

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

だめか。。。

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

続きは後ほど。

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

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を加えておく。

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

インストールできたし！

robamimim$ nodebrew use stable
use v10.15.3
robamimim$ node -v
v10.15.3

nodebrew完成！

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


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のインストール

$ 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!

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

$ 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でコンパイルすると動く！

$ ./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"を登録

$ 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時間）