[[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/