Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
1

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.

@robamm_pg(ろばみみ)

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

Last updated at Posted at 2019-03-18

せっかく作った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時間）

3
1
3

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
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?