npmでインストールしたライブラリをjsファイルで読み込んで利用する方法

この記事は更新から2年以上経過しています。情報が古い可能性がありますのでご注意下さい。

基礎過ぎて今更感が半端無いですが、個人的にド忘れしていたので、今後の為にも書いておくことにしました。

ここでは、テーブルが横スクロール出来ることを明示してくれるライブラリ「scroll-hint」を利用する例で説明します。その他の前提条件としてjsファイルをwebpackで圧縮するものとします。

JavaScript library to suggest that elements are scrollable. Latest version: 1.2.5, last published: 2 years ago. Start us...

webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capab...

./webpack.config.js
./src/index.js
./src/js/scrollhint.js

./webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

./src/index.js

自分で自由に記述するjsファイルを読み込んでいるだけです。

/* My JS */
import './js/scrollhint';

./src/js/scrollhint.js

importのfromでパッケージ名（node_modulesに作成されるディレクトリ名）を指定します。

import ScrollHint from 'scroll-hint';

new ScrollHint('.js-scrollable', {
    suggestiveShadow: true,
    i18n: {
        scrollable: 'スクロールできます'
    }
});