從開(kāi)發(fā)一款基于Vue技術(shù)棧的全棧熱重載生產(chǎn)環(huán)境腳手架，我學(xué)到了什么

瀏覽文章前

這一期，我分享給大家三點(diǎn)看源碼的小技巧，這也是從別的大佬那總結(jié)的。

    被反復(fù)使用的代碼
    這樣的代碼是一個(gè)軟件的重點(diǎn)函數(shù)，一個(gè)大神的寫(xiě)法有很多精華值得學(xué)習(xí)。
    穿越時(shí)間的代碼
    如果一段代碼10年甚至15年，都還在使用。說(shuō)明它的設(shè)計(jì)思想一定很棒。
    好調(diào)試的代碼
    一個(gè)程序的代碼很容易就調(diào)試成功，說(shuō)明作者的項(xiàng)目結(jié)構(gòu)能力很強(qiáng)，值得學(xué)習(xí)。

前言

今天，我們來(lái)搞一個(gè)新東西，名字叫基于Vue技術(shù)棧的全棧熱重載生產(chǎn)環(huán)境腳手架。實(shí)話說(shuō)，這個(gè)名字我想了很久。最終，還是以這個(gè)名字作為文章標(biāo)題。我先拆分解釋下：全棧的意思是支持前后端；熱重載這個(gè)名詞相信大家很熟悉，就是頁(yè)面每次改動(dòng)，不需要手動(dòng)去刷新，可自動(dòng)刷新；生產(chǎn)環(huán)境這里你可以理解成線上環(huán)境，用戶(hù)使用的環(huán)境。
緣起

為什么會(huì)想到開(kāi)發(fā)這樣的一款項(xiàng)目呢？我們平時(shí)可能更多地使用VueCLI或者Vite來(lái)開(kāi)發(fā)Vue項(xiàng)目，但是如果就單純開(kāi)發(fā)一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，未免有點(diǎn)小題大作了。

這時(shí)，我們可能會(huì)用到Vue的生產(chǎn)環(huán)境版本。但是，這樣的話我們就不能用VueCLI、Vite那樣的熱重載功能，就需要不停的刷新網(wǎng)頁(yè)。如果在編輯器中對(duì)html文件增加或刪除了元素，或者是在css文件中修改了某個(gè)元素的某個(gè)樣式，然后想在瀏覽器中看到效果，通常的步驟是：把窗口切換到瀏覽器，然后按鍵盤(pán)上的F5刷新頁(yè)面。在制作頁(yè)面的時(shí)候這個(gè)動(dòng)作可能會(huì)重復(fù)很多次。我們開(kāi)發(fā)效率就大大地減少了。

所以，我們有必要開(kāi)發(fā)一款可熱重載的生產(chǎn)環(huán)境腳手架。如果增加模擬數(shù)據(jù)接口服務(wù)，那就更完美了。光說(shuō)不練假把式，我們就開(kāi)發(fā)一款基于Vue技術(shù)棧的全棧熱重載生產(chǎn)環(huán)境腳手架。
實(shí)戰(zhàn)
一、初始化項(xiàng)目

首先，我們建一個(gè)空文件夾，名字可以叫g(shù)ulp-vue-cli，這就是項(xiàng)目根文件夾。相信聰明的小伙伴可以看出，我們今天的主角是gulp。建完項(xiàng)目根文件夾之后，我們會(huì)使用命令快速生成package.json文件。

npm init -y


二、創(chuàng)建前端項(xiàng)目與后端項(xiàng)目

下一步，我們會(huì)在創(chuàng)建好的項(xiàng)目根文件夾內(nèi)創(chuàng)建一個(gè)前端項(xiàng)目文件夾，名字可以叫src。另外，后端項(xiàng)目文件夾名字叫server。

下一步，我們先在src文件夾下創(chuàng)建一個(gè)前端項(xiàng)目，以下為目錄詳情：

css ---存放樣式目錄
js ---存放邏輯文件目錄
imgs ---存放圖片目錄
index.html ---項(xiàng)目主頁(yè)面



index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple Vue</title>
    <link rel="icon" href="/imgs/favicon.ico" />
    <link rel="stylesheet" href="/css/index.css" />
  </head>
  <body>
    <div id="app">
      <img src="/imgs/logo.png" alt="" />
      <p class="mes">{{ message }}</p>
      <p class="author">{{txt}}</p>
      <p class="status">{{status}}</p>
      <button @click="sendData">send</button>
      <p>{{resTxt}}</p>
    </div>
  </body>
  <script src="/js/vue.js"></script>
  <script type="module">
    import {addTxt} from './js/utils.js';
    const app = new Vue({
      el: "#app",
      data: {
        message: "Hello Simple Vue!",
        resTxt:"",
        status:"",
        txt:addTxt()
      },
      methods: {
        sendData() {
          fetch("http://localhost:3000/send/", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            body: `username=maomincoding&url=https://www.maomin.club`,
          })
            .then((response) => response.json())
            .then((response) => {
              this.resTxt = response;
            })
            .catch((err) => {
              console.error(err);
            });
        },
      },
      mounted() {
        fetch("http://localhost:3000/mes/", {
          method: "GET",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
          .then((response) => response.json())
          .then((response) => {
            this.status = response;
          })
          .catch((err) => {
            console.error(err);
          });
      },
    });
  </script>
</html>



這個(gè)頁(yè)面很簡(jiǎn)單，主要使用Vue.js渲染文本以及調(diào)用接口后渲染文本。調(diào)用接口的方法我們這里使用fetch方法，使用詳情大家可以到MDN網(wǎng)址查看：

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API



建立完前端項(xiàng)目了，我們下一步就開(kāi)始建立后端項(xiàng)目，我們這里使用的是Node.js技術(shù)棧。server文件夾下只有一個(gè)主文件app.js。

app.js

const express = require('express');
const bodyParser = require('body-parser')
const app = express();   

app.use(express.static("./src"));

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());


// 跨域
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1');
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//自定義接口
app.get("/mes", function (request, response) {
    response.send({
        status:"success",
        mes:"渲染頁(yè)面成功！"
    });
})

app.post("/send",function(request,response){
    response.send(request.body); // echo the result back
})

app.listen(3000, function () {
    console.log("服務(wù)器運(yùn)行中");
});



這里，我們也簡(jiǎn)單地介紹一下里面涉及的知識(shí)點(diǎn)。express相信接觸Node的伙伴們一定知道。Express 是一個(gè)保持最小規(guī)模的靈活的Node.js，Web 應(yīng)用程序開(kāi)發(fā)框架，為 Web 和移動(dòng)應(yīng)用程序提供一組強(qiáng)大的功能。這里，我們主要使用它創(chuàng)建幾個(gè)API接口，供前臺(tái)調(diào)用。body-parser是在處理程序之前在中間件中解析傳入的請(qǐng)求體，可以在request.body中獲取從前臺(tái)傳來(lái)的數(shù)據(jù)。

在此之前，你需要安裝以下兩個(gè)依賴(lài)：

npm install express


npm install body-parser -D



三、開(kāi)發(fā)前后端熱重載功能

前后端項(xiàng)目我們已經(jīng)建立完成，下面我們將把重點(diǎn)放到如何開(kāi)發(fā)熱重載功能上。

我會(huì)先在項(xiàng)目根目錄下創(chuàng)建一個(gè)gulpfile.js文件。然后，我會(huì)列出我們需要了解的知識(shí)點(diǎn)有哪些。






    gulp
    browser-sync
    gulp-nodemon

gulp

    gulp是基于Node.js的前端自動(dòng)化構(gòu)建工具，能自動(dòng)化地完成 JavaScript/sass/html/image/css 等文件的的測(cè)試、檢查、合并、壓縮混淆、格式化、瀏覽器自動(dòng)刷新、部署文件生成等操作，同時(shí)可以對(duì)文件進(jìn)行監(jiān)聽(tīng)，如果文件有改動(dòng)，可以自動(dòng)處理生成新的文件。所以gulp解決了開(kāi)發(fā)效率(修改代碼后自動(dòng)更新頁(yè)面)、資源整合(代碼的壓縮合并)、代碼質(zhì)量(代碼的檢查 自動(dòng)化測(cè)試)、代碼轉(zhuǎn)換(es6–>es5)等問(wèn)題

這里，我們需要知道gulp是怎樣創(chuàng)建任務(wù)的。

const gulp =  require('gulp');
// 創(chuàng)建任務(wù)
// 第一個(gè)參數(shù): 任務(wù)名
// 第二個(gè)參數(shù): 回調(diào)函數(shù),當(dāng)我們執(zhí)行任務(wù)時(shí)就會(huì)執(zhí)行這個(gè)函數(shù)
gulp.task('test', function(){
    console.log('test');
})



//執(zhí)行任務(wù): gulp 任務(wù)名
gulp test



browser-sync

這里，我們可以重點(diǎn)介紹下它，它就是我們今天要找的主角。

在找它之前，我也找到其他可以實(shí)現(xiàn)自動(dòng)刷新瀏覽器的插件，如：LiveReload，它也可以自動(dòng)刷新頁(yè)面，實(shí)時(shí)預(yù)覽html效果。但是，我為什么沒(méi)用LiveReload呢？最痛心的一點(diǎn)是你需要在瀏覽器上安裝LiveReload插件，另外在本地你也得安裝一個(gè)LiveReload軟件。如果你是用的是VScode編輯器，需要在插件中心安裝LiveReload插件。默認(rèn)情況下,瀏覽器和編輯器并不會(huì)自動(dòng)為你激活LiveReload的功能，你需要手動(dòng)配置一些東西。所以這么麻煩，干脆看看還有沒(méi)有別的解決方案。

最終，我找到了它——browser-sync，以下是官方對(duì)它的解釋?zhuān)?br>
    Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁(yè)面。更重要的是 Browsersync可以同時(shí)在PC、平板、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試。您可以想象一下：“假設(shè)您的桌子上有pc、ipad、iphone、android等設(shè)備，同時(shí)打開(kāi)了您需要調(diào)試的頁(yè)面，當(dāng)您使用browsersync后，您的任何一次代碼保存，以上的設(shè)備都會(huì)同時(shí)顯示您的改動(dòng)”。無(wú)論您是前端還是后端工程師，使用它將提高您30%的工作效率。

當(dāng)然，學(xué)習(xí)它之前，你需要注意browser-sync是基于Node.js的, 是一個(gè)Node模塊， 如果您想要快速使用它，也許您需要先安裝一下Node.js。

然后，你可以全局安裝它。

npm install -g browser-sync



也可以在本地項(xiàng)目下安裝它。

npm install --save-dev browser-sync



如果你想更加深度地了解它，可以在瀏覽器上搜索以下網(wǎng)址：

http://www.browsersync.cn/docs/



browser-sync可以單獨(dú)使用，也可以集成到gulp和grunt這樣的構(gòu)建工具中使用，在Node.js項(xiàng)目中還能結(jié)合gulp-nodemon實(shí)現(xiàn)全棧的自動(dòng)刷新。

gulp-nodemon

nodemon是一款非常實(shí)用的工具，用來(lái)監(jiān)控你 Node.js 源代碼的任何變化和自動(dòng)重啟你的服務(wù)器。 gulp-nodemon幾乎和普通gulp-nodemon完全一樣，但它是為執(zhí)行Gulp任務(wù)而設(shè)計(jì)的。

介紹完我們需要了解的知識(shí)點(diǎn)之后，我們就深入到gulpfile.js文件中，看看是如何實(shí)現(xiàn)前后端熱重載的。

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const nodemon = require('gulp-nodemon');

gulp.task('server', function() {
    nodemon({
        script: 'server/app.js',
        ignore: ["gulpfile.js", "node_modules/"],
        env: {
            'NODE_ENV': 'development'
        }
    }).on('start', function() {
        browserSync.init({
            proxy: 'http://localhost:3000',
            files: ["src/**"],
            port:8080
        }, function() {
            console.log("browser refreshed.");
        });
    });
});



在此之前，你需要安裝以下三個(gè)依賴(lài)：

npm install gulp -D



npm install browser-sync -D


npm install gulp-nodemon -D



安裝完依賴(lài)之后，我們就來(lái)解讀下以上代碼。

require('browser-sync').create();這行代碼的意思是創(chuàng)建browser-sync實(shí)例，并允許您創(chuàng)建多個(gè)服務(wù)器或代理。

gulp.task()代碼段作用是創(chuàng)建任務(wù)。

// 創(chuàng)建任務(wù)
// 第一個(gè)參數(shù): 任務(wù)名
// 第二個(gè)參數(shù): 回調(diào)函數(shù),當(dāng)我們執(zhí)行任務(wù)時(shí)就會(huì)執(zhí)行這個(gè)函數(shù)
gulp.task('test', function(){
    console.log('test');
})



nodemon中是一個(gè)配置對(duì)象。

    script：指向服務(wù)器文件地址。
    ignore：忽略部分對(duì)程序運(yùn)行無(wú)影響的文件的改動(dòng)，nodemon只監(jiān)視js文件，可用ext項(xiàng)來(lái)擴(kuò)展別的文件類(lèi)型。
    env：運(yùn)行環(huán)境 development 是開(kāi)發(fā)環(huán)境，production 是生產(chǎn)環(huán)境。

這里，我們通過(guò)gulp-nodemon的start事件來(lái)觸發(fā)browser-sync的啟動(dòng)。

browserSync.init()這行代碼的init方法中，第一個(gè)參數(shù)我們需要傳入一個(gè)配置對(duì)象，第二個(gè)參數(shù)我們需要定義一個(gè)回調(diào)方法。

    proxy：代理服務(wù)端的接口地址。
    files：需要監(jiān)聽(tīng)的文件目錄。
    port：端口號(hào)。

這里需要注意的是，如果是修改了服務(wù)端的js文件，會(huì)先通過(guò)nodemon重啟應(yīng)用，這時(shí)瀏覽器不會(huì)刷新，要再保存一下修改的文件，browser-sync才會(huì)顯示出修改后的效果。
瀏覽效果

至此，我們的項(xiàng)目就大功告成了，在瀏覽之前呢！我們需要這樣一個(gè)操作。打開(kāi)package.json文件。定義一個(gè)啟動(dòng)命令，方便我們每次啟動(dòng)。

  "scripts": {
    "dev": "gulp server"
  },



之后，我們就可以這樣啟動(dòng)項(xiàng)目了。

npm run dev


































在瀏覽器上。


























打開(kāi)成功，現(xiàn)在我們改動(dòng)下代碼，看看是否可以熱重載。














測(cè)試成功，這樣我們就安心地開(kāi)發(fā)自己的代碼了，效率自然就提高了。之前那樣不停地F5，有沒(méi)有覺(jué)得這個(gè)動(dòng)作對(duì)程序員來(lái)說(shuō)很沒(méi)有創(chuàng)造力呢？現(xiàn)在可以減輕左手和F5鍵的負(fù)擔(dān)了。

作者：Vam的金豆之路

主要領(lǐng)域：前端開(kāi)發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路