スポンサーリンク

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

Web系

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

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

scroll-hint
JavaScript library to suggest that elements are scrollable
webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packagi...

./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: 'スクロールできます'
    }
});
Web系
スポンサーリンク
YUKIをフォローする
Wynes : Note