- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > [[JavaScriptメモ]] > node.js
#contents()
* node.js とは [#db393d96]
サーバーサイドJavaScript環境。同時に、Node.js のパッケージ管理マネージャであるnpmを利用して、JSのための開発環境構築ツールとしても利用される。
* Windowsにnode.jsをインストール [#ybfed942]
1. [[node.jsオフィシャルサイト:https://nodejs.org/ja/]]にアクセスする
2. 自分の環境に合わせてダウンロード＋インストール
これだけで、node.jsコンソールが使えるようになる。
** Windows [#b65f21a1]
-[[簡単にNode.jsをインストールする【windows編】 - Qiita:http://qiita.com/roana0229/items/29232508e71559d0fd5f]]
-[[ビギナーのための Node.jsプログラミング入門:http://libro.tuyano.com/index2?id=1115003]]
-[[Windows環境でNode.jsのインストールとnpmコマンドの実行方法について勉強しました - tyoshikawa1106のブログ:http://tyoshikawa1106.hatenablog.com/entry/2015/04/03/224736]]
** 全般 [#kafe4467]
-[[Node.js 日本ユーザグループ:http://nodejs.jp/]]
-[[node.jsに関する基礎や開発・チュートリアルのまとめ:phpspot開発日誌:http://phpspot.org/blog/archives/2011/02/nodejs.html]]
-[[Node.jsとは何か、開発者ライアン・ダール氏が語る（前編）〜ノンブロッキングとはどういうことか？ − Publickey:http://www.publickey1.jp/blog/11/nodejs.html]]
-[[サーバサイドJavaScriptの本命「Node.js」の基礎知識（1/3）- ＠IT:http://www.atmarkit.co.jp/fwcr/rensai2/nodejs01/01.html]]
-[[初心者にも分かる Node.js と WebSocket についての解釈まとめ | ウェブル:http://weble.org/2011/03/30/node-js]]
-[[node.jsを使用した、リアルタイムで付箋メモを共有できるオープンソースのWebアプリ・Scrumblr - かちびと.net:http://kachibito.net/software/scrumblr.html]]
-[[MongoDB + node.js で作るソーシャルゲーム:http://www.slideshare.net/snamura/mongodb-nodejs]]
-[[【レビュー】JavaScriptでつくる高効率サーバアプリ「Node.js」を試す方法 | エンタープライズ | マイコミジャーナル:http://journal.mycom.co.jp/articles/2010/12/28/how-to-use-node.js/index.html]]
-[[Node.jsを手軽に試せるJavaScript統合開発環境「Cloud9 IDE」、クラウドでの提供開始 − Publickey:http://www.publickey1.jp/blog/11/nodejsjavascriptcloud9_ide.html]]
-[[node.jsは普及しそうに無い: ニュースの社会科学的な裏側:http://www.anlyznews.com/2011/02/nodejs.html]]
* 基本コマンド [#r684e404]
** ヘルプ [#m3c4b53e]
$ npm help command
$ npm --help command
** バージョン確認 [#wd901009]
$ npm -v
$ npm -version
$ npm --version
** package.jsonを生成する [#xd0b3c49]
package.jsonはprojectのpackageを管理するためのファイル。
ローカルプロジェクトのパッケージを管理するためpackage.jsonを生成する。
$ npm init
$ npm init -y
** インストール [#c077098e]
グローバル
$ npm install -g package
ローカルプロジェクトの場合。--save-devを付けると、installしたlibraryの情報を自動でpackage.jsonに書いてくれる。
$ npm install --save-dev package
オプション無しで、npm installを実行すると、package.jsonの内容に従って、packageをインストールしてくれる。
$ npm install
** インストールされているパッケージの確認 [#dff5c9d8]
$ npm list -g
$ npm list -g package
$ npm list package
** パッケージ情報の確認 [#be3a4453]
$ npm info package
$ npm view package
$ npm show package
** npm scriptの実行 [#g3f0ce1d]
$ npm run script
** アンインストール [#b306f99f]
$ npm uninstall -g package
** 参考 [#i31a7ea3]
-[[npmコマンドの使い方 - Qiita:https://qiita.com/yoh-nak/items/8446bf12094c729d00fe]]
-[[npmでnode.jsのpackageを管理する - Qiita:https://qiita.com/sinmetal/items/395edf1d195382cfd8bc]]
-[[[Node.js] npm installするときはどのパッケージもローカルインストールで十分 | あるいてっく:https://arui.tech/why-locally-install-is-much-better-than-globally-in-npm/]]
-[[npm-scriptsについて - Qiita:https://qiita.com/axross/items/a2a0d148e40b66074858]]
-[[npm scriptsを使おう - Qiita:https://qiita.com/liply/items/cccc6a7b703c1d3ab04f]]
-[[Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA:https://ics.media/entry/12226]]
* Webpack 4 [#gbffae61]
Javascriptのモジュールバンドルツール。CSSや画像ファイルなども、JSファイルとしてまとめられる。
https://scrapbox.io/yyycatch-42774423/webpack
** インストール [#zdcdd784]
$ npm init -y
$ npm install -save-dev webpack
$ npm install -save-dev webpack-cli
** デフォルトのファイル構成 [#a6eb7e72]
.
├── package.json
├── index.html
├── dist
│ └── main.js
├── src
├── index.js
├── foo.js
└── bar.js
** サンプルコード [#ba79e977]
*** src/index.js [#d675be3c]
// 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 [#k9daec29]
// foo.js
function foo() {
return 'foo!foo!';
}
module.exports = foo;
*** src/bar.js [#wdda723e]
// bar.js
function bar() {
return 'bar!bar!';
}
module.exports = bar;
*** index.html [#bd9ae41c]
<!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を定義 [#d9204105]
package.json に npm-scripts を定義する。
これで、Nodeのコマンドラインから、webpackを起動できるようになる。
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}
** Webpackを実行する [#nbfc4c75]
デバッグ用の開発モード。distフォルダに、main.jsが出来ている。
$ npm run dev
本番モード。minifyされる！
$ npm run build
** webpack.config.jsで設定 [#g5165c57]
webpack.config.jsを用意すると、エントリーポイント(ルートになるファイル)や出力先などを指定できるようになる。
** 参考 [#vc0897a8]
-[[Webpack 4 Tutorial やってみた - albatrosary's blog:http://albatrosary.hateblo.jp/entry/2018/03/06/153042]]
-[[webpack 4 入門 - Qiita:https://qiita.com/soarflat/items/28bf799f7e0335b68186#%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%88%E3%83%AA%E6%A7%8B%E6%88%90]]
-[[Code Splitting - webpack.js.org:https://webpack.js.org/guides/code-splitting/]]
* Browserify [#te6f4979]
フロントエンドで利用できるパッケージ管理ツール
自前のビルドプロセスで、モジュールを結合する
** 手順 [#b7ef0bbe]
1．node.jsのコマンドラインで、gulp.jsをインストール
$ npm install -g browserify
2. JSファイルに、requireでモジュールを記述する
3. モジュールを結合する
$ browserify js/main.js -o bundle.js
** 参考 [#e89b0da0]
-[[賢く使うBrowserify | CodeGrid:https://app.codegrid.net/series/2015-browserify]]
-[[ざっくりbrowserify入門 - Qiita:https://qiita.com/fgkm/items/a362b9917fa5f893c09a]]
* gulp.js [#q81aaa3d]
node.jsのgulp.jsで、JavascriptとCSSを結合・圧縮する。
Windowsでも、できた。設定ファイルは、Javascriptっぽく書ける。
** プラグイン [#j58c470f]
JavascriptとCSSを結合・圧縮するプラグイン。
- gulp-concat
- gulp-uglify
- gulp-cssmin
** 手順 [#j3372bc0]
１．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を作成
- https://github.com/ycatch/mameblock.js
５．gulpを実行
> gulp
** 参考資料 [#i46dd05a]
- 独学Webデザイナーの覚書：設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」
-- http://www.ezgate-mt.sakura.ne.jp/css/162.html
- gulpの基本的な使い方（gulp.jsの基礎をしっかり理解する） | mae's blog
-- http://mae.chab.in/archives/2545
- gulpでcssとjsを圧縮するタスクを作成する�� | team naporitan
--http://teamnaporitan.com/gulp_2/
- gulpでcssとjsを圧縮するタスクを作成する�� | team naporitan
-- http://teamnaporitan.com/gulp_3/
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
