Browserify)Tweetこんにちは、フロントエンドのリハビリ中@yoheiMuneです。今日はES2015(ES6)から言語レベルでサポートされたモジュール定義について、ブラウザで利用するための方法をブログに書きたいと思います。目次ES6のimport/exportはまだブラウザで使えないES6から利用可能なimportとexportによるモジュール定義と利用ですが、残念ながらまだブラウザでは使うことができません。"react"Chromeだと以下のようなエラーが発生します。次世代JavaScriptのコンパイラ、Babelに入門」でES6をES5にコンパイルする方法を紹介しましたが、残念ながらimportとexportは使える状態にはコンパイルされません。'./hello.js';hello();Babelでコンパイルすると以下のようになります。_hello.hello)();上記のようにexportsとrequireを用いた方式(Nodeの方式)にコンパイルされてしまいます。この状態でブラウザで使おうとすると以下のようにエラーとなってしまいます。definedということで、EcmaScript6のインポートとエクスポートを使う場合には追加のコンパイルが必要となります。Babelを用いてコンパイルするES6のimportとexportをブラウザで使えるようにする方法は幾つかありますが、ここでは手軽なBrowserifyを用いた方法を紹介します。Browserify自体の紹介は以下でブログを書きましたので参照いただけますと幸いです。gulpからBrowserifyを利用する、watchでコンパイルする具体的にはBrowserifyのトランスフォーム(transform)という機能で、Babelifyを用いて変換を行います。Babelifyをインストールします。babelifyそして以下のようにBrowserifyを実行します。my-file.jsすると以下のように変換され、ブラウザから利用することができるようになります。_hello.hello)();},{"./hello.js":1}]},{},[2]);また、gulpで以下のように実装することでgulp経由でコンパイルすることもできます。browserifytransformを指定する以外は普通のビルドですね!エラーが発生したら僕がやった時には最初以下のようなエラーが発生しました。module'どうもよくよく調べたところ、Babelのpresetでes2015を指定し忘れたのが原因のようでした。babel-preset-es2015また、以下の.babelrcを準備することで無事に動きました。]}隠れた設定ファイルが必要なあたり、Babelのはまりどころの1つですね。今回の内容を実装するために以下の記事を参照しました。ありがとうございます。to-R最後にES2015スタイルでコードを書けるってなかなか素敵ですね。良い仕様は早めに取り込んで実装の品質アップを図りたいものです。最後になりますが本ブログでは、フロントエンド・開発関連・Swift・Linux・Python・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。フロントエンドの入社試験99問!難しいですよ〜w。スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。Chrome36βが出た。Imports、Object.observe、他。ご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。