catch.jp-wiki
¥×¥í¥°¥é¥ß¥ó¥°
±Ñ¸ì³Ø½¬
ÍúÎò
¸¡º÷
Dropdown
°ìÍ÷
node.js
¤ò¥Æ¥ó¥×¥ì¡¼¥È¤Ë¤·¤ÆºîÀ®
³«»Ï¹Ô:
[[Programing]] > [[JavaScript¥á¥â]] > node.js
#contents()
* node.js ¤È¤Ï [#db393d96]
¥µ¡¼¥Ð¡¼¥µ¥¤¥ÉJavaScript´Ä¶¡£Æ±»þ¤Ë¡¢Node.js ¤Î¥Ñ¥Ã¥±¡¼...
* Windows¤Ënode.js¤ò¥¤¥ó¥¹¥È¡¼¥ë [#ybfed942]
1. [[node.js¥ª¥Õ¥£¥·¥ã¥ë¥µ¥¤¥È:https://nodejs.org/ja/]]¤Ë...
2. ¼«Ê¬¤Î´Ä¶¤Ë¹ç¤ï¤»¤Æ¥À¥¦¥ó¥í¡¼¥É¡Ü¥¤¥ó¥¹¥È¡¼¥ë
¤³¤ì¤À¤±¤Ç¡¢node.js¥³¥ó¥½¡¼¥ë¤¬»È¤¨¤ë¤è¤¦¤Ë¤Ê¤ë¡£
** Windows [#b65f21a1]
-[[´Êñ¤ËNode.js¤ò¥¤¥ó¥¹¥È¡¼¥ë¤¹¤ë¡ÚwindowsÊÔ¡Û - Qiita:h...
-[[¥Ó¥®¥Ê¡¼¤Î¤¿¤á¤Î Node.js¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç:http://libr...
-[[Windows´Ä¶¤ÇNode.js¤Î¥¤¥ó¥¹¥È¡¼¥ë¤Ènpm¥³¥Þ¥ó¥É¤Î¼Â¹Ô...
** Á´ÈÌ [#kafe4467]
-[[Node.js ÆüËܥ桼¥¶¥°¥ë¡¼¥×:http://nodejs.jp/]]
-[[node.js¤Ë´Ø¤¹¤ë´ðÁä䳫ȯ¡¦¥Á¥å¡¼¥È¥ê¥¢¥ë¤Î¤Þ¤È¤á:phps...
-[[Node.js¤È¤Ï²¿¤«¡¢³«È¯¼Ô¥é¥¤¥¢¥ó¡¦¥À¡¼¥ë»á¤¬¸ì¤ë¡ÊÁ°ÊÔ...
-[[¥µ¡¼¥Ð¥µ¥¤¥ÉJavaScript¤ÎËÜÌ¿¡ÖNode.js¡×¤Î´ðÁÃÃμ±¡Ê1/3...
-[[½é¿´¼Ô¤Ë¤âʬ¤«¤ë Node.js ¤È WebSocket ¤Ë¤Ä¤¤¤Æ¤Î²ò¼á¤Þ...
-[[node.js¤ò»ÈÍѤ·¤¿¡¢¥ê¥¢¥ë¥¿¥¤¥à¤ÇÉÕäµ¥á¥â¤ò¶¦Í¤Ç¤¤ë...
-[[MongoDB + node.js ¤Çºî¤ë¥½¡¼¥·¥ã¥ë¥²¡¼¥à:http://www.sl...
-[[¡Ú¥ì¥Ó¥å¡¼¡ÛJavaScript¤Ç¤Ä¤¯¤ë¹â¸úΨ¥µ¡¼¥Ð¥¢¥×¥ê¡ÖNode...
-[[Node.js¤ò¼ê·Ú¤Ë»î¤»¤ëJavaScriptÅý¹ç³«È¯´Ä¶¡ÖCloud9 ID...
-[[node.js¤ÏÉáµÚ¤·¤½¤¦¤Ë̵¤¤: ¥Ë¥å¡¼¥¹¤Î¼Ò²ñ²Ê³ØŪ¤Ê΢¦:...
* Æ°ºî³Îǧ [#h437b00e]
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/
* ´ðËÜ¥³¥Þ¥ó¥É [#r684e404]
** ¥Ø¥ë¥× [#m3c4b53e]
$ npm help command
$ npm --help command
** ¥Ð¡¼¥¸¥ç¥ó³Îǧ [#wd901009]
$ npm -v
$ npm -version
$ npm --version
** package.json¤òÀ¸À®¤¹¤ë [#xd0b3c49]
package.json¤Ïproject¤Îpackage¤ò´ÉÍý¤¹¤ë¤¿¤á¤Î¥Õ¥¡¥¤¥ë¡£
¥í¡¼¥«¥ë¥×¥í¥¸¥§¥¯¥È¤Î¥Ñ¥Ã¥±¡¼¥¸¤ò´ÉÍý¤¹¤ë¤¿¤ápackage.jso...
$ npm init
$ npm init -y
** ¥¤¥ó¥¹¥È¡¼¥ë [#c077098e]
¥°¥í¡¼¥Ð¥ë
$ npm install -g package
¥í¡¼¥«¥ë¥×¥í¥¸¥§¥¯¥È¤Î¾ì¹ç¡£--save-dev¤òÉÕ¤±¤ë¤È¡¢install...
$ npm install --save-dev package
¥ª¥×¥·¥ç¥ó̵¤·¤Ç¡¢npm install¤ò¼Â¹Ô¤¹¤ë¤È¡¢package.json¤Î...
$ npm install
Windows¤Çnpm install ¤¹¤ë¤È¤¹¤²¡¼»þ´Ö¤¬¤«¤«¤ë¾ì¹ç¤¬¤¢¤ë¡£...
http://blog.higty.xyz/post/npm-install-does-not-end/
$ npm config set registry http://registry.npmjs.org/
** ¥¤¥ó¥¹¥È¡¼¥ë¤µ¤ì¤Æ¤¤¤ë¥Ñ¥Ã¥±¡¼¥¸¤Î³Îǧ [#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/...
-[[npm¤Çnode.js¤Îpackage¤ò´ÉÍý¤¹¤ë - Qiita:https://qiita....
-[[[Node.js] npm install¤¹¤ë¤È¤¤Ï¤É¤Î¥Ñ¥Ã¥±¡¼¥¸¤â¥í¡¼¥«...
-[[npm-scripts¤Ë¤Ä¤¤¤Æ - Qiita:https://qiita.com/axross/i...
-[[npm scripts¤ò»È¤ª¤¦ - Qiita:https://qiita.com/liply/it...
-[[Node.js¥æ¡¼¥¶¡¼¤Ê¤é²¡¤µ¤¨¤Æ¤ª¤¤¿¤¤npm-scripts¤Î¥¿¥¹¥¯...
* Webpack 4 [#gbffae61]
Javascript¤Î¥â¥¸¥å¡¼¥ë¥Ð¥ó¥É¥ë¥Ä¡¼¥ë¡£CSS¤ä²èÁü¥Õ¥¡¥¤¥ë¤Ê...
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:htt...
-[[webpack 4 ÆþÌç - Qiita:https://qiita.com/soarflat/item...
-[[Code Splitting - webpack.js.org:https://webpack.js.org...
* 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...
-[[¤¶¤Ã¤¯¤êbrowserifyÆþÌç - Qiita:https://qiita.com/fgkm/...
* 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-cs...
£´¡¥gulpfile.js¤òºîÀ®
- https://github.com/ycatch/mameblock.js
£µ¡¥gulp¤ò¼Â¹Ô
> gulp
** »²¹Í»ñÎÁ [#i46dd05a]
- ÆȳØWeb¥Ç¥¶¥¤¥Ê¡¼¤Î³Ð½ñ¡§À߷ס¦¼ÂÁõ¤ò¹â®²½¡ª¥Õ¥í¥ó¥È¥¨...
-- http://www.ezgate-mt.sakura.ne.jp/css/162.html
- gulp¤Î´ðËÜŪ¤Ê»È¤¤Êý¡Êgulp.js¤Î´ðÁäò¤·¤Ã¤«¤êÍý²ò¤¹¤ë¡Ë...
-- 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/
½ªÎ»¹Ô:
[[Programing]] > [[JavaScript¥á¥â]] > node.js
#contents()
* node.js ¤È¤Ï [#db393d96]
¥µ¡¼¥Ð¡¼¥µ¥¤¥ÉJavaScript´Ä¶¡£Æ±»þ¤Ë¡¢Node.js ¤Î¥Ñ¥Ã¥±¡¼...
* Windows¤Ënode.js¤ò¥¤¥ó¥¹¥È¡¼¥ë [#ybfed942]
1. [[node.js¥ª¥Õ¥£¥·¥ã¥ë¥µ¥¤¥È:https://nodejs.org/ja/]]¤Ë...
2. ¼«Ê¬¤Î´Ä¶¤Ë¹ç¤ï¤»¤Æ¥À¥¦¥ó¥í¡¼¥É¡Ü¥¤¥ó¥¹¥È¡¼¥ë
¤³¤ì¤À¤±¤Ç¡¢node.js¥³¥ó¥½¡¼¥ë¤¬»È¤¨¤ë¤è¤¦¤Ë¤Ê¤ë¡£
** Windows [#b65f21a1]
-[[´Êñ¤ËNode.js¤ò¥¤¥ó¥¹¥È¡¼¥ë¤¹¤ë¡ÚwindowsÊÔ¡Û - Qiita:h...
-[[¥Ó¥®¥Ê¡¼¤Î¤¿¤á¤Î Node.js¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç:http://libr...
-[[Windows´Ä¶¤ÇNode.js¤Î¥¤¥ó¥¹¥È¡¼¥ë¤Ènpm¥³¥Þ¥ó¥É¤Î¼Â¹Ô...
** Á´ÈÌ [#kafe4467]
-[[Node.js ÆüËܥ桼¥¶¥°¥ë¡¼¥×:http://nodejs.jp/]]
-[[node.js¤Ë´Ø¤¹¤ë´ðÁä䳫ȯ¡¦¥Á¥å¡¼¥È¥ê¥¢¥ë¤Î¤Þ¤È¤á:phps...
-[[Node.js¤È¤Ï²¿¤«¡¢³«È¯¼Ô¥é¥¤¥¢¥ó¡¦¥À¡¼¥ë»á¤¬¸ì¤ë¡ÊÁ°ÊÔ...
-[[¥µ¡¼¥Ð¥µ¥¤¥ÉJavaScript¤ÎËÜÌ¿¡ÖNode.js¡×¤Î´ðÁÃÃμ±¡Ê1/3...
-[[½é¿´¼Ô¤Ë¤âʬ¤«¤ë Node.js ¤È WebSocket ¤Ë¤Ä¤¤¤Æ¤Î²ò¼á¤Þ...
-[[node.js¤ò»ÈÍѤ·¤¿¡¢¥ê¥¢¥ë¥¿¥¤¥à¤ÇÉÕäµ¥á¥â¤ò¶¦Í¤Ç¤¤ë...
-[[MongoDB + node.js ¤Çºî¤ë¥½¡¼¥·¥ã¥ë¥²¡¼¥à:http://www.sl...
-[[¡Ú¥ì¥Ó¥å¡¼¡ÛJavaScript¤Ç¤Ä¤¯¤ë¹â¸úΨ¥µ¡¼¥Ð¥¢¥×¥ê¡ÖNode...
-[[Node.js¤ò¼ê·Ú¤Ë»î¤»¤ëJavaScriptÅý¹ç³«È¯´Ä¶¡ÖCloud9 ID...
-[[node.js¤ÏÉáµÚ¤·¤½¤¦¤Ë̵¤¤: ¥Ë¥å¡¼¥¹¤Î¼Ò²ñ²Ê³ØŪ¤Ê΢¦:...
* Æ°ºî³Îǧ [#h437b00e]
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/
* ´ðËÜ¥³¥Þ¥ó¥É [#r684e404]
** ¥Ø¥ë¥× [#m3c4b53e]
$ npm help command
$ npm --help command
** ¥Ð¡¼¥¸¥ç¥ó³Îǧ [#wd901009]
$ npm -v
$ npm -version
$ npm --version
** package.json¤òÀ¸À®¤¹¤ë [#xd0b3c49]
package.json¤Ïproject¤Îpackage¤ò´ÉÍý¤¹¤ë¤¿¤á¤Î¥Õ¥¡¥¤¥ë¡£
¥í¡¼¥«¥ë¥×¥í¥¸¥§¥¯¥È¤Î¥Ñ¥Ã¥±¡¼¥¸¤ò´ÉÍý¤¹¤ë¤¿¤ápackage.jso...
$ npm init
$ npm init -y
** ¥¤¥ó¥¹¥È¡¼¥ë [#c077098e]
¥°¥í¡¼¥Ð¥ë
$ npm install -g package
¥í¡¼¥«¥ë¥×¥í¥¸¥§¥¯¥È¤Î¾ì¹ç¡£--save-dev¤òÉÕ¤±¤ë¤È¡¢install...
$ npm install --save-dev package
¥ª¥×¥·¥ç¥ó̵¤·¤Ç¡¢npm install¤ò¼Â¹Ô¤¹¤ë¤È¡¢package.json¤Î...
$ npm install
Windows¤Çnpm install ¤¹¤ë¤È¤¹¤²¡¼»þ´Ö¤¬¤«¤«¤ë¾ì¹ç¤¬¤¢¤ë¡£...
http://blog.higty.xyz/post/npm-install-does-not-end/
$ npm config set registry http://registry.npmjs.org/
** ¥¤¥ó¥¹¥È¡¼¥ë¤µ¤ì¤Æ¤¤¤ë¥Ñ¥Ã¥±¡¼¥¸¤Î³Îǧ [#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/...
-[[npm¤Çnode.js¤Îpackage¤ò´ÉÍý¤¹¤ë - Qiita:https://qiita....
-[[[Node.js] npm install¤¹¤ë¤È¤¤Ï¤É¤Î¥Ñ¥Ã¥±¡¼¥¸¤â¥í¡¼¥«...
-[[npm-scripts¤Ë¤Ä¤¤¤Æ - Qiita:https://qiita.com/axross/i...
-[[npm scripts¤ò»È¤ª¤¦ - Qiita:https://qiita.com/liply/it...
-[[Node.js¥æ¡¼¥¶¡¼¤Ê¤é²¡¤µ¤¨¤Æ¤ª¤¤¿¤¤npm-scripts¤Î¥¿¥¹¥¯...
* Webpack 4 [#gbffae61]
Javascript¤Î¥â¥¸¥å¡¼¥ë¥Ð¥ó¥É¥ë¥Ä¡¼¥ë¡£CSS¤ä²èÁü¥Õ¥¡¥¤¥ë¤Ê...
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:htt...
-[[webpack 4 ÆþÌç - Qiita:https://qiita.com/soarflat/item...
-[[Code Splitting - webpack.js.org:https://webpack.js.org...
* 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...
-[[¤¶¤Ã¤¯¤êbrowserifyÆþÌç - Qiita:https://qiita.com/fgkm/...
* 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-cs...
£´¡¥gulpfile.js¤òºîÀ®
- https://github.com/ycatch/mameblock.js
£µ¡¥gulp¤ò¼Â¹Ô
> gulp
** »²¹Í»ñÎÁ [#i46dd05a]
- ÆȳØWeb¥Ç¥¶¥¤¥Ê¡¼¤Î³Ð½ñ¡§À߷ס¦¼ÂÁõ¤ò¹â®²½¡ª¥Õ¥í¥ó¥È¥¨...
-- http://www.ezgate-mt.sakura.ne.jp/css/162.html
- gulp¤Î´ðËÜŪ¤Ê»È¤¤Êý¡Êgulp.js¤Î´ðÁäò¤·¤Ã¤«¤êÍý²ò¤¹¤ë¡Ë...
-- 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/
¥Ú¡¼¥¸Ì¾: