ES 2015のimport/export(ES6 Modules)を利用 : JavaScript

Tweet

Pocket

ES2015でimport/export(ES Modules)を利用するメモです。

Nodeはインストール済みとします。

1. 監視、ES2015をES5へ変換(Babel)、ES6 Modulesの利用(Browserify)に必要なパッケージをインストール
2. package.jsonへ監視・コンパイルスクリプト記載
3. npm runでスクリプト実行

ディレクトリ構成

|-- project root
    |
    |-- dist
        |
        |-- main.js
    |
    |-- node_modules
    |
    |-- src
        |
        |-- main.js
        |
        |-- Module1.js
        |
        |-- Module2.js
    |
    |-- .babelrc
    |
    |-- package.json

パッケージインストールおよびBabel設定

$ npm install babelify watchify browserify babel-preset-es2015 --save-dave

.babelrcを作成し下記を記載します。

{
  "presets": [
    "es2015"
  ]
}

package.json

src/main.jsはimportでJSモジュールを読み込みます。
下記サンプルはwatchでsrc/main.jsを監視しdist/main.jsへ変換します。

{

  "scripts": {
    "watch": "watchify -v -t babelify src/main.js -o dist/main.js",
  },

}

スクリプトの実行

$ npm run watch

具体的なサンプル

src/main.js

import m1 from './Module1.js';
import m2 form './Module2.js';

m1.foo();
m1.bar();

m2.baz();

src/Module1.js

export default (function () {

    function foo () {
    }

    return {
        foo: foo
    }

}());

src/Module2.js

export default (function() {

    function bar() {
    }

    return {
        bar: bar
    }

}());

参考サイト

• 【node.js】es6での開発で最低限必要な設定メモ〜npm・bower・gulp・grunt・browserify 色々あるけど。。。 – とりあえずphpとか
  [https://ics.media/entry/12226]