JavaScript - Building Our First App - Getting Started)の「Setting Up the Application Project(Setting Up the Application Project, Compiling from ES6 to ES5)

Building Isomorphic JavaScript Apps

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Node.js(V8) (JavaScript engine)

Building Isomorphic JavaScript Apps (Jason Strimpel(著)、Maxime Najim(著)、O'Reilly Media)のPart 2.(Building Our First App)、Chapter 5.(Getting Started)の「Setting Up the Application Project」、「Compiling from ES6 to ES5」 での Babel でのコンパイルがそのままでは上手くいかなかったのを解決。

コード(Emacs)

src/index.js

import Hapi from 'hapi';

const server = new Hapi.Server();

server.connection({
    host: 'localhost',
    port: 8000,
});

server.route({
    method: 'GET',
    path: '/hello',
    handler: (request, reply) => {
        reply('hello, world');
    }
});

server.start();

package.json

{
  "name": "thaumoctopus-mimicus",
  "version": "0.0.0",
  "description": "Isomorphic JavaScript application example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "kamimura",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com/kamimura/thaumoctopus-mimicus.git"
  },
  "keywords": [
    "isomorphic",
    "javascript"
  ],
  "bugs": {
    "url": "https://github.com/kamimura/thaumoctopus-mimicus/issues"
  },
  "homepage": "https://sitekamimura.blogspot.com",
  "dependencies": {
    "hapi": "^15.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-es2015": "^6.18.0"
  },
}

入出力結果(Terminal)

$ babel src/index.js --out-file dist/index.js 
$ node dist/index.js 
・・・/thaumoctopus-mimicus/dist/index.js:1
(function (exports, require, module, __filename, __dirname) { import Hapi from 'hapi';
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:545:28)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.runMain (module.js:607:10)
    at run (bootstrap_node.js:382:7)
    at startup (bootstrap_node.js:137:9)
    at bootstrap_node.js:497:3
$ 

コード(Emacs)

dist/index.js

import Hapi from 'hapi';

const server = new Hapi.Server();

server.connection({
    host: 'localhost',
    port: 8000
});

server.route({
    method: 'GET',
    path: '/hello',
    handler: (request, reply) => {
        reply('hello, world');
    }
});

server.start();

import が require に修正されてないみたい。

package.jsoin を修正。(末尾のbabelの部分を追加)

package.json

{
  "name": "thaumoctopus-mimicus",
  "version": "0.0.0",
  "description": "Isomorphic JavaScript application example",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "kamimura",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com/kamimura/thaumoctopus-mimicus.git"
  },
  "keywords": [
    "isomorphic",
    "javascript"
  ],
  "bugs": {
    "url": "https://github.com/kamimura/thaumoctopus-mimicus/issues"
  },
  "homepage": "https://sitekamimura.blogspot.com",
  "dependencies": {
    "hapi": "^15.2.0"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-preset-es2015": "^6.18.0"
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  }
}

入出力結果(Terminal)

$ babel src/index.js --out-file dist/index.js
$ node dist/index.js 
(node:21035) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
  C-c C-c
$ 

dist/index.js

'use strict';

var _hapi = require('hapi');

var _hapi2 = _interopRequireDefault(_hapi);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var server = new _hapi2.default.Server();

server.connection({
    host: 'localhost',
    port: 8000
});

server.route({
    method: 'GET',
    path: '/hello',
    handler: function handler(request, reply) {
        reply('hello, world');
    }
});

server.start();

構文 import の部分が 構文 require を使ようにコンパイルされてることを確認できた。

Node.js の最新バージョンだと、import キーワードは既に使えるようになってるのかも。あと、「DeprecationWarning」も警告されないかも。(使用してる Node.js は、MacPorts でインストールした v7.0.0)