カテゴリー別アーカイブ: JavaScript

ES2015の環境作成(Babel、watchify)


ES2015でJavaScriptを書こうと思い環境構築を始めましたが、
新旧情報があり何をすれば良いのかいまいちわからなかったので、
手順を残します。

2016/06/15時点の情報です。

npmはすでにインストール済みの状態で始めます。

1. workディレクトリを作成する。

$ mkdir work
$ cd work

2. npmで初期化する。

$ npm init
全部エンターで作成してみる。
変更したい所があれば随時変更する。
package.jsonが作成されます。

3. 必要なライブラリをインストールする。

$ npm install –save-dev watchify
$ npm install –save-dev babelify
$ npm install –save-dev exorcist
$ npm install –save-dev babel-preset-es2015

4. .babelrcを作成する。

$ vi .babelrc
下記の設定を記述する。
{
“presets”: [“es2015″]
}

5. watchifyを起動する設定を記述する。

毎回watchifyコマンドで起動してもよいのですが、
npmコマンドで簡単に起動できるように設定ファイルに記述します。

$ vi package.json
以下のwatchの記述を追加する。
scripts: {
test: echo \”Error: no test specified\” && exit 1,
“watch”: “watchify -t babelify ./index.js -o ‘exorcist ./build.js.map > ./dist/index.js’ -d”
}

出力用のディレクトリも作成しておきます。
$ mkdir dist

入力用のファイルを作成しておきます。中はからでもOKです。
$ touch index.js

入出力用のファイル、ディレクトリが無いとwatchify起動時にエラーになります。

6. watchifyを起動する

$ npm run watch

これでindex.jsを保存するたびにトランスパイルされたJavaScriptが生成されます。

以上です。


Safariでdivのdatasetを249回ループすると値がundefinedになる。


今回はAndroidではなくJavaScriptです。

divのdatasetをループで値を参照した時の挙動がChromeとSafariで異なっていました。

やったこと

divを配列で249個用意し、最後のdivだけdatasetにデータを入れておきます。
(あんまりやることはないと思いますが、、、)
そしてfor文で全divに対してdatasetの値を出力しました。

結果

期待値としては、248回undefined、最後1回が値が出るはずです。
Chrome(49.0.2623.108)・・・248回undefined、最後にデータ(期待通り)
Safari(9.0.3)・・・249回undefined

サンプル

配列の最後だけデータを入れると動作がおかしいですが、
最後より前にデータを入れると期待通り出力されました。

サンプル2

結果2

Safari(9.0.3)で動かすと
246回undefined
123
undefined
123
と出力されました。

原因は分かりませんが、このような動作をしていました。

Safari 9.0 の JS で「同じ関数を繰り返し実行しただけで返り値が変わる」という強烈なバグが発見されてる

Qiitaに投稿されている現象も報告されていますが、関係あるかは調べられていません。。