Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Tutorial / Node.js

Node.js

Node.js 以 V8 JavaScript runtime 為基礎,使用 C++ 寫成,透過 NPM 來管理模組,並在 Grunt, Gulp, Webpack 工具的協助下,發展成廣大生態系。另一個模組管理程式 Yarn 改善了效能與安全,模組的相依關係與版本由 lockfiles 來管理。

教學 By Example #1 #2 #3 #4 Productivity Tools, Plugins and Libraries

Ubuntu Tip:

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ sudo npm install npm --global

## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn

Mac Installer: installed at /usr/local/bin/node /usr/local/bin/npm

NPM Node Package Manager

Beginner Guide: 分成 local 或 global 模式,前者把檔案安裝在 node_modules 目錄,後者在 {prefix}/lib/node_modules 目錄。另外可參考 global without sudo

設定安裝目錄

$ npm config get prefix
/usr/local
$ npm config set prefix=$HOME/.node_modules_global
$ cat .npmrc

By Example #1

peerDependencies

npm link discussion

Creating CLI Tool

server vs client example

server.js 負責讀取網址需求並回應

var emptygif = require('emptygif');
var express = require('express');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);

app.get('/tpx.gif', function(req, res, next) {
  io.emit('visit', {
    ip: req.ip,
    ua: req.headers['user-agent']
  });

  emptygif.sendEmptyGif(req, res, {
    'Content-Type': 'image/gif',
    'Content-Length': emptygif.emptyGifBufferLength,
    'Cache-Control': 'public, max-age=0' // or specify expiry to make sure it will call everytime
  });
});

app.use(express.static(__dirname + '/public'));

server.listen(1337);
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reltime pixel tracking dashboard</title>
<style type="text/css">
.visit {
  margin: 5px 0;
  border-bottom: 1px dotted #CCC;
  padding: 5px 0;
}
.ip {
  margin: 0 10px;
  border-left: 1px dotted #CCC;
  border-right: 1px dotted #CCC;
  padding: 0 5px;
}
</style>
</head>
<body>
<h1>Realtime Pixel Tracking Dashboard</h1>
<div class="visits"></div>

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function() { var socket = io(); var containerEl = $('.visits'); socket.on('visit', function(visit) { var newItem = '<div class="visit">'; newItem += '<span class="date">' + moment().format('MMMM Do YYYY, HH:mm:ss') + '/span' newItem += '<span class="ip">' + visit.ip + '</span>'; newItem += '<span class="ua">' + visit.ua + '</span></div>'; containerEl.append(newItem); }); }); </script> </body> </html>

Gulp 編譯 SASS 範例

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./sass/*.sass')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

Node.js v6 的 ES6 特色

npm vs yarn npm 5 開始支援 package-lock.json

Passport.js 處理 Authentication 登入

Debug Tips and Inspector

Plone 5 Theme

Preparing the Setup 下列安裝方式應該已不適用

$ sudo apt-get install npm
$ npm install -g grunt-cli 會失敗嗎? 會的話 要修改 theme-package.rst

自行 local 安裝的方式如下

$ mkdir ~/.npm
$ vi ~/.npmrc  prefix=${HOME}/.npm
$ vi ~/.bashrc NPM_PACKAGEs="${HOME/.npm" PATH="$NPM_PACKAGES/bin:$PATH"
$ source ~/.bashrc
$ npm install grunt-cli

from Grunt to Webpack Webpack2 Beginner Guide setup google analytics

Deployment

Express.js Mongo App to AWS