AXIA: イマドキのフロントエンド開発

以前に bootstrap に関して書いたが、その時は bootstrap を「手動」で導入した。

だが、イマドキのフロンエンド開発ならば、こんなことはせず、npm を使ってパッケージとして組み込むだろう。

ネットで探しても良い参考記事が見つからなかったのだが、

『入門者/初心者必見 npmでパッケージ管理するための基礎』

が、ほぼドンピシャの内容。

こちらでも解説記事書くかも。

→ 某先生がサンプルを github にあげてくれました。感謝！
bootstrap は導入していませんが、実用的に webpack も組み込まれています。

node-npm-webpack の最小限の構成なので、何をやっているかわかりやすい（はず）。

【アバウトな解説】

プロジェクトフォルダ、index.html などの準備

まず、プロジェクトフォルダ sample を作成し、そこに最終的に表示させたい index.html を用意する（後でもいいが何やっているかわからなくなると思うので、最初に用意しておきましょう）。

index.html の中身は何でもいいですが、例えば以下の内容。
jquery などをまとめあげた js ファイルを dist/bundle.js としたいので、script タグで指定しておく。

<!doctype html>

<head>

</head>

<body>

<h1>Hello node</h1>

</body>

</html>

エントリポイントとして使用する index.js も用意。

import $ from "jquery";

$(function () {

console.log("jquery");

console.log("jquery2");

});

パッケージを利用するので "jquery" で持ってこれます。
今、何やっているかわからなければオマジナイだと思って import 〜としておきましょう。

npm コマンド操作
コマンドラインから
$ npm init -y

として、初期化。この時点で package.json ができます。

使いたいパッケージをインストール。

$ npm install jquery
今回は webpack も使うので

$npm install --save-dev webpack
$npm install --save-dev webpack-cli
$npm install --save-dev webpack-dev-server

も忘れずに。（サーバーは他にも立て方はありますが、今回はこれで）

webpack.config.js と package.json の準備

設定ファイル webpack.config.js は手動で作成します。

const path = require('path')

module.exports = {

entry: path.resolve(__dirname, "index.js"), //エントリポイントであるファイルのパスを指定

output: {

path: path.resolve(__dirname, 'dist'), //バンドルしたファイルの出力先のパスを指定

filename: 'bundle.js' //出力時のファイル名の指定

devServer: {

static: {

directory: path.join(__dirname, './'),

}

//contentBase: path.join(__dirname, './')

}

ここで 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 の存在意義わかってないと何やっているかわからないと思うんだけどなー。

AXIA

2024年1月23日火曜日

イマドキのフロントエンド開発

0 件のコメント:

コメントを投稿