調べた発端

素のjavascriptには落とし穴がある。初心者の方も、React使いの方もハマる落とし穴がある。
今回、素のJavascript+HTMLの構成で、npm installで落としたパッケージを活用して開発していたところ、ブラウザ上に以下のエラーが出た。

Uncaught SyntaxError: Cannot use import statement outside a module`

直訳すると、importが使えない書かれている。
素のJavascriptを使った状態でnpm installでインストールしたモジュールをimportしようとするとこのようなエラーが出てしまう。
この解決には、Webpackでのビルドが必要であることがわかった。
Webpackでのビルドとは、一言で言うと、npmでインストールしたモジュールをhtmlで使えるようにするための手続きである。
webpackの使い方がわかればなんとかなるので、私の示す手順をフォローしてみてほしい。一回私にフォローしてこの問題を解決すれば、自分のプロジェクトにwebpackを適応する方法がわかると思う。

結論

「npm installを活用したjavascriptの開発では、作成したjavascriptをwebpackでビルドしないとhtml上でエラーになるよ。」

ではwebpackの使い方を例を通して紹介する。

素のJavascriptでNPMを活用した開発環境を整えるまでのセットアップ

サンプルのjavascriptを記述

今回、説明用にimportのテスト用にquillというモジュールをインストールする。これは便利に拡張されたテキストエディタだ。これをインストールして使う。

npm install quill

そしてsrc/index.jsを作成し、以下のようにコピペ。

index.js

import Quill from 'quill';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';

var quill = new Quill('#editor', {
    theme: 'snow'
});

これをindex.htmlからと呼び出してもimportに関連するエラーが出てしまう。なぜか。
npmで作ったものを使用するには「ビルド」という作業が必要だからである。ビルドせずにnpm installしたものをそのまま使おうとするとエラーになってしまう。
ビルドとは、要するにこのjsをわちゃわちゃしてエラーの出ないjsにする作業のことだ。
ではやっていこう。

JavascriptをWebpackでビルド

webpackをインストール

まず、ビルドに必要なwebpackをインストールしておく。

npm install --save-dev webpack webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev css-loader style-loader

webpack.config.jsonを作成

ビルドの設定を書く。
直下にwebpack.config.jsonを作成し、以下をコピペ。
設定値は後で説明する。

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  }
};

２点重要な点があるので説明する。

まず、entry: './src/index.js'はめちゃくちゃ重要である。ビルド対象のjsである。今回、先ほど作成したsrc/index.jsをビルドしたいのでこのように指定した。
filename: 'main.js',path: path.resolve(__dirname, 'dist')も重要だ。こちらは、二行まとめてdist/main.jsにビルドしたjsを出力するという設定だ。

その他の設定は、後々の落とし穴を回避するために私が勝手に付け足した設定である。気にしないでほしい。

ビルドの実行

ビルドの設定も済んだわけなので、webpackを用いて実際にビルドしていこう。
以下のコマンドを入力する。

npx webpack

すると、出力先に指定したdistフォルダにmain.jsができているはずである。
開いてみるとわかるが、ビルド元のindex.jsをもとにした、新たなjavascriptファイルになっている。これがビルドである。
このdist/main.jsをhtmlから読み込めば、importのエラーが出ない。
ではやっていこう。

ビルド済みのjsをHTMLから呼び出す

index.htmlを作成し、以下をコピペ。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id="editor"></div>
    <script src="dist/main.js"></script>
</body>
</html>

重要ポイントは<script src="dist/main.js"></script>である。
ビルド済みのmain.jsを使うことが今回の肝になる。
LiveServer等でhtmlをブラウザで開いてみてほしい。
importのエラーが出なかったと思う。

再びまとめ

npm installを活用したjavascriptの開発では、作成したjavascriptをwebpackでビルドしないとhtml上でエラーになる。
webpackのビルドは、npmでインストールした後、webpack.config.jsonを設定し、npx webpackコマンドを押せばできる。
できたjsをhtmlで呼び出せばエラーが出ない。

NPMでインストールしたパッケージをJavaScriptとHTMLで使うためのセットアップ