Node學習筆記（四）：gulp+express+io.socket部署angularJs2（填坑篇）

時間 2019-12-10

標籤 node 學習筆記 gulp+express+io.socket gulp express socket 部署 angularjs2 angularjs 欄目 JavaScript 简体版

原文原文鏈接

這篇就先暫停下上篇博客--你畫我猜的進度，由於在作這個遊戲的時候，想採用最新的ng2技術，奈何坑是一片又一片，這邊就先介紹下環境部署和填坑史javascript

既然要用ng2，首先要拿到資源，我這邊用的是angularJs2 beta版的，網上的資源有兩種，一個是文件全壓縮版的.min.js版的另外一個就是一大堆亂七八糟的js文件，主要是ng2已經徹底採用TypeScript，加之對es6的支持，因此須要引入一大堆兼容，編譯文件html

這邊恰好特別手欠想學學gulp，因而開搞配置gulp環境，壓縮全部的js文件成一個min.js文件java

var gulp = require("gulp"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify");

gulp.task("default",function(){
    return gulp.src([
            "src/angular2-polyfills.js",
            "src/system.js",
            "src/typescript.js",
            "src/Rx.js",
            "src/angular2.dev.js",
            "src/http.dev.js",
            "src/router.dev.js",
            "src/tsloader.js",
            "src/system.config.js"
        ])
    .pipe(concat("angular2.beta.stack.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("dist"));
});

玩完gulp，又把grunt玩了一遍，不得不說事物必有其存在的道理，豐富的庫支持給了grunt巨大的使用市場，而gulp的語法精簡，學習週期也大大縮短使其擁有更大的前景，嘖嘖，用完就兩個字，爽！node

碎碎唸完，開始說說express+io.socket配置，socket.io配置就很少說了，在上一篇你畫我猜講的很清楚了，傳送門，這邊我之因此引入express模塊的緣由，只有一個：路由！！es6

由於node配置很是底層，路由還須要本身寫，好比我訪問natureless:8100是沒有問題的，由於我在server.js中配置了端口的指向typescript

var app = require('http').createServer(handler);
function handler (req, res) {
  console.log(req);
  fs.readFile(__dirname + '/app.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

而我想訪問與app.html做爲同級目錄出現的index.html，經過natureless.cn:8100/index.html訪問是無效的由於node拿到get數據index.html他不知道該如何處理，須要本身手動配置，開始的時候，個人想法是對req的消息進行處理，頗有耐心的fs.readFile(__dirname+'XX路徑')，可是邂逅度娘後，知道express有專門針對靜態文件訪問的中間件express.static()express

app.use(express.static('src'));

這樣咱們把咱們的template均可以放在src中，經過咱們熟悉的相對路徑就能夠訪問，引用文件了，這邊把服務端的代碼貼上編程

var express=require('express');
var app=express();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
var fs = require('fs');
app.use(express.static('src'));

app.get('/', function (req, res) {
   res.sendFile( __dirname + "/" + "app.html" );
})
http.listen(8100,function(){
    console.log('Natureless server begin...');
});

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('startConnect', function (data) {
    io.sockets.emit('news',data);
  });
});

其實之因此有如此多的問題，主要源於環境是node配置，我在引入ng2時，只要牽涉路徑的問題就各類報錯，好比templateUrlgulp

下面貼上app.html代碼bootstrap

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
    <script type="text/javascript" src="/js/angular2.beta.stack.min.js"></script>
</head>
<body>
    <ez-app></ez-app>
    <script type="text/typescript">
        import {Component} from "angular2/core";
        import {bootstrap} from "angular2/platform/browser";
                
        @Component({
            selector:"ez-app",
            templateUrl : '/view/gameRoom.html'
        })
        class EzApp{}
        
        bootstrap(EzApp);
    </script>
</body>
</html>

卡在templateUrl整整三天，各類採坑，最愚笨的問題莫過8100端口上還用80端口上的相對路徑，明顯跨域，你畫我猜的主體框架算是搞定了。。。。。唔，人家的那叫編程之旅，我這叫填坑之旅啊，哈哈