以前に bootstrap に関して書いたが、その時は bootstrap を「手動」で導入した。
だが、イマドキのフロンエンド開発ならば、こんなことはせず、npm を使ってパッケージとして組み込むだろう。
ネットで探しても良い参考記事が見つからなかったのだが、
『入門者/初心者必見 npmでパッケージ管理するための基礎』
が、ほぼドンピシャの内容。
こちらでも解説記事書くかも。
→ 某先生がサンプルを github にあげてくれました。感謝!
bootstrap は導入していませんが、実用的に webpack も組み込まれています。
jquery などをまとめあげた js ファイルを dist/bundle.js としたいので、script タグで指定しておく。
エントリポイントとして使用する index.js も用意。
パッケージを利用するので "jquery" で持ってこれます。
今、何やっているかわからなければオマジナイだと思って import 〜 としておきましょう。
コマンドラインから
$ npm init -y
今回は webpack も使うので
$npm install --save-dev webpack-cli
$npm install --save-dev webpack-dev-server
ここで dist/bundle.js を作成させていることに注意。
ビルド・テストしやすいように package.json に以下のような scripts を追加。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack serve --port 3000 --mode development --open "
},
ビルド・テスト
これで準備は整いました。
$npm run build
で bundle.js を生成。
$ npm run start
で、サーバーが立ち上がり、Hello node が表示されます。
コンソールに
jquery1
jquery2
と表示されれば、OKです。
参考
『webpack入門(Node.jsの導入からjsファイルのバンドルまで)』バンドルがキモ。
『node.js 習うより慣れろ』内容薄い・・・。もうちょっとがんがれ。
ところで、フロントエンド開発というと Nuxt や React という話にはなると思うが、node や TypeScript の存在意義わかってないと何やっているかわからないと思うんだけどなー。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。