node.js のバックアップソース(No.6)


[[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 install -save-dev webpack
 $ npm install -save-dev webpack-cli

** npm-scriptsを定義 [#d9204105]

ackage.json に npm-scripts を定義する。

これで、Nodeのコマンドラインから、webpackを起動できるようになる。

 "scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
 }

** Webpackを実行する [#nbfc4c75]

 $ npm run dev

 $ npm run build

distフォルダに、main.jsが出来ている。buildするとminifyされる!



** 参考 [#vc0897a8]

-[[Webpack 4 Tutorial やってみた - albatrosary's blog:http://albatrosary.hateblo.jp/entry/2018/03/06/153042]]

* 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]

1.node.jsをインストール

2.node.jsのコマンドラインで、gulp.jsをインストール

 > npm install -g gulp

3.ローカルフォルダ(D:\gulp_test\ )に移動して、gulpとプラグインをインストール。これは、フォルダごとにやる。

 > cd /d D:\gulp_test\ 
 > npm install gulp
 > npm install --save-dev gulp-concat gulp-uglify gulp-cssmin

4.gulpfile.jsを作成

- https://github.com/ycatch/mameblock.js

5.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/

トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS