皆さんこんにちは。
プロフセンドを開発しているぐみぃです。
皆さん、こんなことを思うことがありますか？
｢ブラウザでも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が使えるようになります。