![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Programing > JavaScriptメモ > node.js
node.js とは †
サーバーサイドJavaScript環境。同時に、Node.js のパッケージ管理マネージャであるnpmを利用して、JSのための開発環境構築ツールとしても利用される。
Windowsにnode.jsをインストール †
1. node.jsオフィシャルサイトにアクセスする
2. 自分の環境に合わせてダウンロード＋インストール
これだけで、node.jsコンソールが使えるようになる。
Windows †
- 簡単にNode.jsをインストールする【windows編】 - Qiita
- ビギナーのための Node.jsプログラミング入門
- Windows環境でNode.jsのインストールとnpmコマンドの実行方法について勉強しました - tyoshikawa1106のブログ
全般 †
- Node.js 日本ユーザグループ
- node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌
- Node.jsとは何か、開発者ライアン・ダール氏が語る（前編）〜ノンブロッキングとはどういうことか？ − Publickey
- サーバサイドJavaScriptの本命「Node.js」の基礎知識（1/3）- ＠IT
- 初心者にも分かる Node.js と WebSocket についての解釈まとめ | ウェブル
- node.jsを使用した、リアルタイムで付箋メモを共有できるオープンソースのWebアプリ・Scrumblr - かちびと.net
- MongoDB + node.js で作るソーシャルゲーム
- 【レビュー】JavaScriptでつくる高効率サーバアプリ「Node.js」を試す方法 | エンタープライズ | マイコミジャーナル
動作確認 †
node プロンプトで実行
> node --version v12.13.1
> npm --version 6.12.1
以下のserver.jsを、(ユーザー名)\(node)フォルダに作成
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World!\n');
}).listen(1337, '127.0.0.1');
> cd node > node server.js
ブラウザで、下記にアクセス
http://localhost:1337/
基本コマンド †
ヘルプ †
$ npm help command $ npm --help command
バージョン確認 †
$ npm -v $ npm -version $ npm --version
package.jsonを生成する †
package.jsonはprojectのpackageを管理するためのファイル。 ローカルプロジェクトのパッケージを管理するためpackage.jsonを生成する。
$ npm init $ npm init -y
インストール †
グローバル
$ npm install -g package
ローカルプロジェクトの場合。--save-devを付けると、installしたlibraryの情報を自動でpackage.jsonに書いてくれる。
$ npm install --save-dev package
オプション無しで、npm installを実行すると、package.jsonの内容に従って、packageをインストールしてくれる。
$ npm install
Windowsでnpm install するとすげー時間がかかる場合がある。事前に以下のコマンドを実行する。 http://blog.higty.xyz/post/npm-install-does-not-end/
$ npm config set registry http://registry.npmjs.org/
インストールされているパッケージの確認 †
$ npm list -g $ npm list -g package $ npm list package
パッケージ情報の確認 †
$ npm info package $ npm view package $ npm show package
npm scriptの実行 †
$ npm run script
アンインストール †
$ npm uninstall -g package
参考 †
- npmコマンドの使い方 - Qiita
- npmでnode.jsのpackageを管理する - Qiita
- [Node.js] npm installするときはどのパッケージもローカルインストールで十分 | あるいてっく
- npm-scriptsについて - Qiita
- npm scriptsを使おう - Qiita
- Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
Webpack 4 †
Javascriptのモジュールバンドルツール。CSSや画像ファイルなども、JSファイルとしてまとめられる。
https://scrapbox.io/yyycatch-42774423/webpack
インストール †
$ npm init -y $ npm install -save-dev webpack $ npm install -save-dev webpack-cli
デフォルトのファイル構成 †
.
├── package.json
├── index.html
├── dist
│ └── main.js
├── src
├── index.js
├── foo.js
└── bar.js
サンプルコード †
src/index.js †
// index.js
var foo = require('./foo');
var bar = require('./bar');
var el = document.getElementById('box');
el.textContent = foo() + ' ' + bar();
console.log(`Welcome WebPack4`);
src/foo.js †
// foo.js
function foo() {
return 'foo!foo!';
}
module.exports = foo;
src/bar.js †
// bar.js
function bar() {
return 'bar!bar!';
}
module.exports = bar;
index.html †
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Module example</title>
</head>
<body>
<p id='box'></p>
<script src="./dist/main.js"></script>
</body>
</html>
npm-scriptsを定義 †
package.json に npm-scripts を定義する。
これで、Nodeのコマンドラインから、webpackを起動できるようになる。
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
Webpackを実行する †
デバッグ用の開発モード。distフォルダに、main.jsが出来ている。
$ npm run dev
本番モード。minifyされる！
$ npm run build
webpack.config.jsで設定 †
webpack.config.jsを用意すると、エントリーポイント(ルートになるファイル)や出力先などを指定できるようになる。
参考 †
Browserify †
フロントエンドで利用できるパッケージ管理ツール
自前のビルドプロセスで、モジュールを結合する
手順 †
1．node.jsのコマンドラインで、gulp.jsをインストール
$ npm install -g browserify
2. JSファイルに、requireでモジュールを記述する 3. モジュールを結合する
$ browserify js/main.js -o bundle.js
参考 †
gulp.js †
node.jsのgulp.jsで、JavascriptとCSSを結合・圧縮する。
Windowsでも、できた。設定ファイルは、Javascriptっぽく書ける。
プラグイン †
JavascriptとCSSを結合・圧縮するプラグイン。
- gulp-concat
- gulp-uglify
- gulp-cssmin
手順 †
１．node.jsをインストール
２．node.jsのコマンドラインで、gulp.jsをインストール
> npm install -g gulp
３．ローカルフォルダ(D:\gulp_test\ )に移動して、gulpとプラグインをインストール。これは、フォルダごとにやる。
> cd /d D:\gulp_test\ > npm install gulp > npm install --save-dev gulp-concat gulp-uglify gulp-cssmin
４．gulpfile.jsを作成
５．gulpを実行
> gulp
参考資料 †
- 独学Webデザイナーの覚書：設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」
- gulpの基本的な使い方（gulp.jsの基礎をしっかり理解する） | mae's blog
- gulpでcssとjsを圧縮するタスクを作成する�� | team naporitan
- gulpでcssとjsを圧縮するタスクを作成する�� | team naporitan
