ブラウザでrequireを使う方法2選


皆さんこんにちは。
プロフセンドを開発しているぐみぃです。
皆さん、こんなことを思うことがありますか?

「ブラウザでもrequireできたらな〜」なんて。

実は、いろいろな方法で使うことができるのです。
その中から2つの方法を紹介します。

browserifyを使った場合

このパッケージは、
ブラウザでrequireを使うだけのものです。

まずは、

 $ npm i -g browserify

でパッケージをグローバルインストール。
次に任意のJavaScriptファイル(input.js)に
requireしてください。
例えば、jqueryをrequireする場合、

var $ = require(jquery);

という感じになります。
あとは、コマンドラインで

browserify input.js -o output.js

できるようになります。

webpackを使った場合

webpackは、jsファイルや画像などを
バンドル化(ひとまとめ)にするパッケージです。
僕はこの使い方でやってます。
まずは、

$ npm i -g webpack webpack-cli

でパッケージをグローバルインストールします。
任意ディレクトリで

$ npm init
$ npm i -D webpack

でwebpackをプロジェクトにwebpackをインストール。
続いて、任意のjsファイル(input.js)を作成し、
以下のテキストを
「webpack.config.js」で保存してください。

const path = require("path");
const webpack = require("webpack");
 module.exports = {
  mode: "development",
     entry: "input.js",
  output: {
    filename: "output.js",
    path: path.join(__dirname, "dist/")
  }
};

そして、以下のコマンドを実行してください。

npx webpack

これでrequireが使えるようになります。

参考

ざっくりbrowserify入門