ブラウザで ES2015 の import export を使えるようにしてみる

手順は以下のとおり

  1. Node.js をインストール
  2. browserify をインストール

    sudo npm install --g browserify

  3. babelify をインストール

    npm install --save-dev babelify

  4. babel-preset-es2015 をインストール

    npm install --save-dev babel-preset-es2015

  5. .babelrc を作成

    { "presets": ["es2015"] }

  6. export するファイルを作成 ./src/ExportTest.js

    export class ExportTest{ constructor(src) { document.getElementById("export-test").innerHTML = "success!"; } };

  7. import するファイルを作成 ./src/importTest.js

    "use strict"; import { ExportTest } from './ExportTest.js'; new ExportTest();

  8. コマンドラインを実行

    browserify ./src/importTest.js -t babelify --outfile ./dist/importTest.js

出力結果

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var ExportTest = exports.ExportTest = function ExportTest(src) { _classCallCheck(this, ExportTest); document.getElementById("export-test").innerHTML = "success!"; }; ; },{}],2:[function(require,module,exports){ "use strict"; var _ExportTest = require("./ExportTest.js"); new _ExportTest.ExportTest(); },{"./ExportTest.js":1}]},{},[2]);

参考文献

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です