ここでは、const Dog = require('./dog')をimport Dog from './dog'に置き換えます。これは("CommonJS"のモジュール構文と比べると)より新しいES6モジュールの構文です。
dog.js内のmodule.exports = Dogをexport default Dogに置き換えます。
dog.jsでは、Dogの名前はexportの中でしか使われていないことに注意してください。そのため、次の例のように、匿名のクラスを直接エクスポートすることも可能です:
export default class {
constructor(name) {
this.name = name;
}
bark() {
return `Wah wah, I am ${this.name}`;
}
}index.jsファイルのimportでの'Dog'という名前は実際には使う人次第だと思われたかもしれません。実際、このように書いても問題なく動きます。
import Cat from './dog';
const toby = new Cat('Toby');もちろん、インポートしたclass / moduleの名前をそのまま使うことがほとんどです。そうしない例としては、Gulpファイル内でconst babel = require('gulp-babel')とする場合が挙げられます。
では、gulpfile.jsファイル内のrequire()はどうでしょうか？ 代わりにimportが使えるでしょうか？ 最新版のNodeはES6のほとんどの機能に対応していますが、ES6モジュールにはまだ対応していません。ありがたいことに、GulpはBabelに手助けをしてもらえます。gulpfile.jsをgulpfile.babel.jsにリネームすれば、BabelはimportされたモジュールをGulpに渡す役割を担ってくれます。
-
gulpfile.jsをgulpfile.babel.jsにリネームします。 -
require()を以下のように書き換えます:
import gulp from 'gulp';
import babel from 'gulp-babel';
import del from 'del';
import { exec } from 'child_process';child_processからexecが直接展開されるシンタックスシュガーに注意してください。実に美しいです!
yarn startを実行すると "Wah wah, I am Toby" と表示されるはずです。
(原文: 5 - The ES6 modules syntax)
次章: 6 - ESLint