Programing > JavaScript > node.js

node.js Ȥ

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

Windowsnode.js򥤥󥹥ȡ

1. node.jsե륵˥

2. ʬδĶ˹碌ƥɡܥ󥹥ȡ

ǡnode.js󥽡뤬Ȥ褦ˤʤ롣

Windows

ܥޥ

إ

$ npm help command
$ npm --help command

Сǧ

$ npm -v
$ npm -version
$ npm --version

package.json

package.jsonprojectpackage뤿Υե롣 ץȤΥѥå뤿package.json롣

$ npm init
$ npm init -y

󥹥ȡ

Х

$ npm install -g package

ץȤξ硣--save-devդȡinstalllibraryξưpackage.json˽񤤤Ƥ롣

$ npm install --save-dev package

ץ̵ǡnpm install¹Ԥȡpackage.jsonƤ˽äơpackage򥤥󥹥ȡ뤷Ƥ롣

$ npm install

󥹥ȡ뤵Ƥѥåγǧ

$ npm list -g
$ npm list -g package
$ npm list package

ѥåγǧ

$ npm info package
$ npm view package
$ npm show package

npm scriptμ¹

$ npm run script

󥤥󥹥ȡ

$ npm uninstall -g package

Webpack 4

JavascriptΥ⥸塼Хɥġ롣CSSեʤɤ⡢JSեȤƤޤȤ롣

https://scrapbox.io/yyycatch-42774423/webpack

󥹥ȡ

$ npm init -y
$ npm install -save-dev webpack
$ npm install -save-dev webpack-cli

ǥեȤΥե빽

.
 package.json
 index.html
 dist
        main.js
 src
         index.js
         foo.js
         bar.js

ץ륳

src/index.js

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

// foo.js
function foo() {
  return 'foo!foo!';
}

module.exports = foo;

src/bar.js

// bar.js
function bar() {
  return 'bar!bar!';
}

module.exports = bar;

index.html

<!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

package.json npm-scripts 롣

ǡNodeΥޥɥ饤󤫤顢webpackưǤ褦ˤʤ롣

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

Webpack¹Ԥ

ǥХåѤγȯ⡼ɡdistեˡmain.jsƤ롣

$ npm run dev

֥⡼ɡminify롪

$ npm run build

webpack.config.js

webpack.config.jsѰդȡȥ꡼ݥ(롼Ȥˤʤե)ʤɤǤ褦ˤʤ롣

Browserify

եȥɤѤǤѥåġ

Υӥɥץǡ⥸塼礹

1node.jsΥޥɥ饤ǡgulp.js򥤥󥹥ȡ

$ npm install -g browserify

2. JSեˡrequireǥ⥸塼򵭽Ҥ 3. ⥸塼礹

$ browserify js/main.js -o bundle.js

gulp.js

node.jsgulp.jsǡJavascriptCSS硦̤롣

WindowsǤ⡢ǤեϡJavascriptäݤ񤱤롣

ץ饰

JavascriptCSS硦̤ץ饰

  • gulp-concat
  • gulp-uglify
  • gulp-cssmin

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

gulp¹

> gulp

ͻ


  ȥå   ʬ Хåå   ñ측 ǽ   إ   ǽRSS
Last-modified: 2018-05-18 () 21:01:38 (551d)