ブラウザで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が使えるようになります。
参考
Author And Source
この問題について(ブラウザでrequireを使う方法2選), 我々は、より多くの情報をここで見つけました https://qiita.com/gumieProf/items/e5ed3a919926af985e90著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .