ES2015に対応する

[manabuyasuda]

ES2015に対応する

[manabuyasuda]

package.jsonのdependenciesにあるパッケージは以下の方法でインポートする。

import $ from 'jquery';
import picturefill from 'picturefill';

自作ファイルは以下のように相対パスでインポートする（関数の呼び出しは不要）。

import jsAlignHeight from './namespace/js/alignHeight.js';

[manabuyasuda]

import文はどちらが適切か？

import { export } from "module-name";
import "module-name";

jQueryはexportに$を指定しないと、そのファイルでjQueryが使えない。
exportは名前空間のような役割になっている？ので、指定したほうが無難？

[manabuyasuda]

jQueryプラグインの修正

import $ from 'jquery';
import 'jquery-match-height';
export default function jsAlignHeight () {
  $('.js-alignHeight').matchHeight();
};

import SmoothScroll from 'smooth-scroll';
export default function jsSmoothScroll () {
  const jsSmoothScroll = new SmoothScroll('.js-smoothScroll', {
    ignore: '.js-smoothScroll-ignore', // Selector for links to ignore (must be a valid CSS selector)
    header: '.js-smoothScroll-header', // Selector for fixed headers (must be a valid CSS selector)
    topOnEmptyHash: true, // Scroll to the top of the page for links with href="#"
    speed: 500, // Integer. How fast to complete the scroll in milliseconds
    clip: true, // If true, adjust scroll distance to prevent abrupt stops near the bottom of the page
    easing: 'easeInOutCubic' // Easing pattern to use
  });
};

import jsAlignHeight from './namespace/js/alignHeight';
import jsSmoothScroll from './namespace/js/smoothScroll';

jsAlignHeight();
jsSmoothScroll();