• ɲä줿ԤοǤ
  • 줿ԤοǤ
  • node.js عԤ

[[Programing]] > [[JavaScript]] > node.js

#contents()

* node.js Ȥ [#db393d96]

СJavaScriptĶƱˡNode.js Υѥåޥ͡ǤnpmѤơJSΤγȯĶۥġȤƤѤ롣

* Windowsnode.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.jsonprojectpackage뤿Υե롣
ץȤΥѥå뤿package.json롣

 $ npm init
 $ npm init -y

** 󥹥ȡ [#c077098e]
Х

 $ npm install -g package

ץȤξ硣--save-devդȡinstalllibraryξư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]]
-[[npmnode.jspackage - 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]
1node.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.jsgulp.jsǡJavascriptCSS硦̤롣

WindowsǤ⡢ǤեϡJavascriptäݤ񤱤롣

** ץ饰 [#j58c470f]

JavascriptCSS硦̤ץ饰

- 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
- gulpcssjs򰵽̤륿뭢 | team naporitan
--http://teamnaporitan.com/gulp_2/
- gulpcssjs򰵽̤륿뭣 | team naporitan
-- http://teamnaporitan.com/gulp_3/

ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS