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 Install CLI with the --unsafe-perm Option

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

在專案目錄裡安裝開發環境

$ cd src/my.prj/src/my/prj/theme
$ npm install grunt --save-dev
$ git diff package.json
@@ -4,5 +4,8 @@
   "version": "1.0.0",
   "dependencies": {
     "bootstrap": "^3.3.7"
+  },
+  "devDependencies": {
+    "grunt": "^1.0.3"
   }
 }

自行 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
# 可能是較好的步驟
$ cd plone511/zinstance/src/cgis.website
$ npm install
$ npm install grunt-cli --save-dev
$ vi src/cgis/website/theme/barceloneta/less/variables.plone.less
$ node_modules/grunt-cli/bin/grunt compile

Webpack

https://medium.freecodecamp.org/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618 from Grunt to Webpack Webpack2 Beginner Guide setup google analytics React, Webpack, Babel from Scratch Code Splitting with Webpack and React

Resolving Globally Installed Dependencies

Deployment

Express.js Mongo App to AWS https://yami.io/you-might-not-need-nodejs/