如何把我們的源碼同步到gitee或github遠程倉庫中

同步方式分以下幾種：

1、命令同步   

先查看下我們是否有遠程倉庫：git remote -v

如有就要刪除遠程倉庫或是同命令覆蓋，如全新安裝就不需要!

刪除已關聯的名為origin的遠程庫： git remote rm origin  

關聯GitHub的遠程庫： git remote add github git@github.com:xxx/xxx.git

關聯Gitee的遠程庫： git remote add gitee git@gitee.com:xxx/xxx.git

2、配置修改

修改.git文件夾內的config文件：

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
[remote "git"]
    url = git@github.com:chloneda/demo.git
    fetch = +refs/heads/*:refs/remotes/github/*
[branch "master"]
    remote = origin
    merge = refs/heads/master

將上述文件內容[remote “origin”]內容複製，修改origin名稱 

3、同步流程

上傳熱媒

git add . （將變更提交至緩存區）
git commit -m "提交說明（註釋）"    - update可以輸入你需要上傳的描述

提交命令

# 提交到github

git push github master  '- 將本地變更推送至遠程倉庫master分支'
#

提交到gitee

git push gitee master   '- 將本地變更推送至遠程倉庫master分支'

 查看狀態

git status

更放心代碼

# 從github拉取更新
git pull github
# 從gitee拉取更新
git pull gitee

項目推送時遇Git推送錯誤：

error: failed to push some refs to ‘git@gitee.com:name/project.git’

1、分析：

這個問題的產生是因為遠程倉庫與本地倉庫並不一致所造成。

2、解決方案：

那麼我們把遠程庫同步到本地庫就可以了。

執行命令：

git pull --rebase origin master

將遠程倉庫中的更新合併到本地倉庫，–rebase的作用是取消掉本地倉庫中剛剛的commit
然而未果，出現錯誤：

error: src refspec master does not match any

分析：引起該錯誤的原因是，目錄中沒有文件，空目錄不能提交。

依次執行：

git pull origin master
git push origin master

踩到的坑

上述過程中，更新或提交代碼時可能會遇到fatal:refusing to merge unrelated histories (拒絕合併無關的歷史) 錯誤，解決辦法：

首先將遠程倉庫和本地倉庫關聯起來。

git branch --set-upstream-to=origin/remote_branch  your_branch

其中，origin/remote_branch是你本地分支對應的遠程分支，your_branch是你當前的本地分支。

然後使用git pull整合遠程倉庫和本地倉庫。

git pull --allow-unrelated-histories    (忽略版本不同造成的影響)

重新更新、提交即可。

注： 如遇到 Git沒有共同祖先的兩個分支合併 的情形請自行查詢！

報錯處理

git pull 的時候報如下錯誤代碼：
error: Pulling is not possible because you have unmerged files.
嘗試用git stash沒有作用。
Pull is not possible because you have unmerged files.

本地的push和merge會形成MERGE-HEAD(FETCH-HEAD), HEAD（PUSH-HEAD）這樣的引用。HEAD代表本地最近成功push后形成的引用。MERGE-HEAD表示成功pull后形成的引用。可以通過MERGE-HEAD或者HEAD來實現類型與svn revet的效果。

解決：

1.將本地的衝突文件衝掉，不僅需要reset到MERGE-HEAD或者HEAD,還需要–hard。沒有後面的hard，不會衝掉本地工作區。只會衝掉stage區。

git reset –hard FETCH_HEAD

2.git pull就會成功。

如我們現在在dev分支上，剛開發完項目，執行了下列命令：

git  add .
git  commit -m '提交的備註信息'
git  push -u origin dev

想將dev分支合併到master分支，操作如下：

1、首先切換到master分支上

git  checkout master

2、如果是多人開發的話 需要把遠程master上的代碼pull下來

git pull origin master
//如果是自己一個開發就沒有必要了，為了保險期間還是pull

3、然後我們把dev分支的代碼合併到master上

git  merge dev

4、然後查看狀態及執行提交命令

git status

On branch master
Your branch is ahead of 'origin/master' by 12 commits.
  (use "git push" to publish your local commits)
nothing to commit, working tree clean
//上面的意思就是你有12個commit，需要push到遠程master上 
> 最後執行下面提交命令
git push origin master

5其他命令

更新遠程分支列表
git remote update origin --prune

查看所有分支
git branch -a

刪除遠程分支Chapater6
git push origin --delete Chapater6

刪除本地分支 Chapater6
git branch -d  Chapater6

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9816

1、根據oss url 獲取文件數據流

  
   
    /** * @description 獲取文件數據流 * @author easten * @date 2020-07-16 * @export * @param {*} files 文件列表 * @returns 文件數據流對象 */ export function getFileStream(files) { return new Promise(resolve => { if (files.length > 0) { let data = []; files.forEach(item => { ossRepository .download(getFileUrl(item.url), p => {}) .then(res => { data.push({ name: `${item.name}${item.type}`, blob: res, }); if (data.length == files.length) { resolve(data); } }); }); } }); }
   
  

2、文件單個/多個下載

  
   
    export function fileDownload(files) { if (files instanceof Array) { // 多文件打包下載 getFileStream(files).then(datas => { // 拼裝壓縮包格式 if (datas.length > 0) { SaveMultipleFile(`附件.zip`, datas).then(() => { console.log('下載成功'); }); } }); } else { // 單文件下載 ossRepository .download(getFileUrl(files.url), progress => {}) .then(blob => { SaveSingleFile(`${files.name}${files.type}`, files.size, blob).then(a => { console.log('下載成功'); }); }); } } /** * @description 批量下載 * @author easten * @date 2020-07-13 * @export * @param {*} zipName 壓縮包名稱 * @param {*} files 需要壓縮的文件信息 */ export function SaveMultipleFile(zipName, files) { return new Promise((resolve,error) => { // 首先定義一個文件夾 let zip=new jsZIP(); files.forEach(a=>{ zip.file(a.name,a.blob); }); zip.generateAsync({type:"blob"}) .then(function(content) { saveAs(content, zipName); resolve(); }).catch(()=>{ error(); }); }); } 
   
  

3、常用的文件類型

  
   
    export let resourceIcon = { folder: 'folder-open', xls: 'file-excel', xlsx: 'file-excel', md: 'file-markdown', pdf: 'file-pdf', ppt: 'file-ppt', txt: 'file-text', doc: 'file-word', unknown: 'file-unknown', zip: 'file-zip', other: 'file', jpg: 'file-image', }; // 創建文件格式對應表 export const FileTypes = [ { k: 'audio/3gpp', v: '3gpp' }, { k: 'video/3gpp', v: '3gpp' }, { k: 'audio/ac3', v: 'ac3' }, { k: 'allpication/vnd.ms-asf', v: 'asf' }, { k: 'audio/basic', v: 'au' }, { k: 'text/css', v: 'css' }, { k: 'text/csv', v: 'csv' }, { k: 'application/msword ', v: 'dot' }, { k: 'application/xml-dtd', v: 'dtd' }, { k: 'image/vnd.dwg', v: 'dwg' }, { k: 'image/vnd.dxf', v: 'dxf' }, { k: 'image/gif', v: 'gif' }, { k: 'text/htm', v: 'htm' }, { k: 'text/html', v: 'html' }, { k: 'image/jp2', v: 'jp2' }, { k: 'image/jpeg', v: 'jpeg' }, { k: 'text/JavaScript', v: 'js' }, { k: 'application/JavaScript', v: 'js' }, { k: 'application/json', v: 'json' }, { k: 'audio/mpeg', v: 'mp2' }, { k: 'audio/mp4', v: 'mp4' }, { k: 'video/mpeg', v: 'mpeg' }, { k: 'application/vnd.ms-project', v: 'mpp' }, { k: 'application/ogg', v: 'ogg' }, { k: 'audio/ogg', v: 'ogg' }, { k: 'application/pdf', v: 'pdf' }, { k: 'image/png', v: 'png' }, { k: 'application/vnd.ms-powerpoint', v: 'ppt' }, { k: 'application/rtf', v: 'rtf' }, { k: 'text/rtf', v: 'rtf' }, { k: 'image/vnd.svf', v: 'svf' }, { k: 'image/tiff', v: 'tif' }, { k: 'text/plain', v: 'txt' }, { k: 'application/vnd.ms-works', v: 'wdb' }, { k: 'text/xml', v: 'xml' }, { k: 'application/xhtml+xml', v: 'xhtml' }, { k: 'application/xml', v: 'xml' }, { k: 'application/vnd.ms-excel', v: 'xls' }, { k: 'aplication/zip', v: 'zip' }, { k: 'pplication/vnd.openxmlformats-officedocument.spreadsheetml.sheet', v: 'xlsx' }, ];
   
  

4、文件大小轉換

  
   
    /** * @description 文件大小轉換 * @author easten * @date 2020-07-08 * @export * @param {*} fileSize * @returns kb GB G */ export function FileSizeTrans(fileSize) { let size = ''; if (fileSize < 0.1 * 1024) { //如果小於0.1KB轉化成B size = fileSize.toFixed(2) + 'B'; } else if (fileSize < 0.1 * 1024 * 1024) { //如果小於0.1MB轉化成KB size = (fileSize / 1024).toFixed(2) + 'KB'; } else if (fileSize < 0.1 * 1024 * 1024 * 1024) { //如果小於0.1GB轉化成MB size = (fileSize / (1024 * 1024)).toFixed(2) + 'MB'; } else { //其他轉化成GB size = (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB'; } 
   
  

本文作者：
Easten
本文鏈接：https://www.cnblogs.com/dongteng/archive/2020/11/04/13926426.html

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9815

簡介

通常用 vue.js 編寫單頁應用（SPA）時，當加載頁面時，所有必需的資源（如 JavaScript 和 css 文件）都會被一起加載。在處理大文件時，這可能會導致用戶體驗不佳。

藉助 webpack，可以用 import() 函數而不是 import 關鍵字在 vue.js 中按需加載頁面。

為什麼要按需加載？

Vue.js 中 SPA 的典型工作方式是將所有功能和資源打包一併交付，這樣可以使用戶無需刷新頁面即可使用你的應用。如果你沒有為了按需加載頁面針對自己的應用進行明確的設計，那麼所有的頁面會被立即加載，或者提前使用大量內存進行不必要的預加載。

這對有許多頁面的大型 SPA 非常不利，會導致使用低端手機和低網速的用戶體驗會很差。如果通過按需加載，用戶將不需要下載他們當前不需要的資源。

Vue.js 沒有為動態模塊提供任何加載指示器相關的控件。即使進行了預取和預加載，也沒有對應的空間讓用戶知道加載的過程，所以還需要通過添加進度條來改善用戶體驗。

準備項目

首先需要一種讓進度條與 Vue Router 通信的方法。事件總線模式比較合適。

事件總線是一個 Vue 實例的單例。由於所有 Vue 實例都有一個使用 $on和 $emit 的事件系統，因此可以用它在應用中的任何地方傳遞事件。

首先在 components 目錄中創建一個新文件 eventHub.js：

import Vue from 'vue'
export default new Vue()

然後把 webpack 配置為禁用預取和預加載，這樣就可以針對每個函數單獨執行此類操作，當然你也可以全局禁用它。在根文件夾中創建一個 vue.config.js 文件並添加禁用預取和預加載的相關配置：

module.exports = {
    chainWebpack: (config) => {
        // 禁用預取和預加載
        config.plugins.delete('prefetch')
        config.plugins.delete('preload')
    },
}

添加路由和頁面

用 npx 安裝 Vue router 並使用：

$ npx vue add router

編輯位於 router/index.js 下的 router 文件並更新路由，以便可以用 import() 函數代替 import 語句：

以下默認配置：

import About from '../views/About.vue'
{
    path: '/about',
    name: 'About',
    component: About
},

將其改為：

{
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
},

如果希望可以選擇按需加載某些頁面，而不是全局禁用預取和預加載，可以用特殊的 Webpack 註釋，不要在 vue.config.js 中配置 Webpack：

import(
    /* webpackPrefetch: true */
    /* webpackPreload: true */
    '../views/About.vue'
)

import() 和 import 之間的主要區別是在運行時加載由 import() 加載的 ES 模塊，在編譯時加載由 import 加載的 ES 模塊。這就意味着可以用 import() 延遲模塊的加載，並僅在必要時加載。

實現進度條

由於無法準確估算頁面的加載時間（或完全加載），因此我們無法真正的去創建進度條。也沒有辦法檢查頁面已經加載了多少。不過可以創建一個進度條，並使它在頁面加載時完成。

由於不能真正反映進度，所以描繪的進度只是進行了隨機跳躍。

先安裝 lodash.random，因為在生成進度條的過程中將會用這個包產生一些隨機數：

$ npm i lodash.random

然後，創建一個 Vue 組件 components/ProgressBar.vue：

<template>
    <div :class="{'loading-container': true, loading: isLoading, visible: isVisible}">
        <div class="loader" :style="{ width: progress + '%' }">
            <div class="light"></div>
        </div>
        <div class="glow"></div>
    </div>
</template>

接下來向該組件添加腳本。在腳本中先導入 random 和 $eventHub，後面會用到：

<script>
import random from 'lodash.random'
import $eventHub from '../components/eventHub'
</script>

導入之後，在腳本中定義一些後面要用到的變量：

// 假設加載將在此時間內完成。
const defaultDuration = 8000 
// 更新頻率
const defaultInterval = 1000 
// 取值範圍 0 - 1. 每個時間間隔進度增長多少
const variation = 0.5 
// 0 - 100. 進度條應該從多少開始。
const startingPoint = 0 
// 限制進度條到達加載完成之前的距離
const endingPoint = 90 

然後編碼實現異步加載組件的邏輯：

export default {
    name: 'ProgressBar',
    
    data: () => ({
        isLoading: true, // 加載完成后，開始逐漸消失
        isVisible: false, // 完成動畫后，設置 display: none
        progress: startingPoint,
        timeoutId: undefined,
    }),

    mounted() {
        $eventHub.$on('asyncComponentLoading', this.start)
        $eventHub.$on('asyncComponentLoaded', this.stop)
    },

    methods: {
        start() {
            this.isLoading = true
            this.isVisible = true
            this.progress = startingPoint
            this.loop()
        },

        loop() {
            if (this.timeoutId) {
                clearTimeout(this.timeoutId)
            }
            if (this.progress >= endingPoint) {
                return
            }
            const size = (endingPoint - startingPoint) / (defaultDuration / defaultInterval)
            const p = Math.round(this.progress + random(size * (1 - variation), size * (1 + variation)))
            this.progress = Math.min(p, endingPoint)
            this.timeoutId = setTimeout(
                this.loop,
                random(defaultInterval * (1 - variation), defaultInterval * (1 + variation))
            )
        },

        stop() {
            this.isLoading = false
            this.progress = 100
            clearTimeout(this.timeoutId)
            const self = this
            setTimeout(() => {
                if (!self.isLoading) {
                    self.isVisible = false
                }
            }, 200)
        },
    },
}

在 mounted() 函數中，用事件總線來偵聽異步組件的加載。一旦路由告訴我們已經導航到尚未加載的頁面，它將會開始加載動畫。

最後其添加一些樣式：

<style scoped>
.loading-container {
    font-size: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    opacity: 0;
    display: none;
    z-index: 100;
    transition: opacity 200;
}

.loading-container.visible {
    display: block;
}
.loading-container.loading {
    opacity: 1;
}

.loader {
    background: #23d6d6;
    display: inline-block;
    height: 100%;
    width: 50%;
    overflow: hidden;
    border-radius: 0 0 5px 0;
    transition: 200 width ease-out;
}

.loader > .light {
    float: right;
    height: 100%;
    width: 20%;
    background-image: linear-gradient(to right, #23d6d6, #29ffff, #23d6d6);
    animation: loading-animation 2s ease-in infinite;
}

.glow {
    display: inline-block;
    height: 100%;
    width: 30px;
    margin-left: -30px;
    border-radius: 0 0 5px 0;
    box-shadow: 0 0 10px #23d6d6;
}

@keyframes loading-animation {
    0% {
        margin-right: 100%;
    }
    50% {
        margin-right: 100%;
    }
    100% {
        margin-right: -10%;
    }
}
</style>

最後將 ProgressBar 添加到 App.vue 或布局組件中，只要它與路由視圖位於同一組件中即可，它在應用的整個生命周期中都可用：

<template>
    <div>
        <progress-bar></progress-bar>
        <router-view></router-view>
        <!--- 你的其它組件 -->
    </div>
</template>

<script>
import ProgressBar from './components/ProgressBar.vue'
export default {
       components: { ProgressBar },
}
</script>

然後你就可以在頁面頂端看到一個流暢的進度條

為延遲加載觸發進度條

現在 ProgressBar 正在事件總線上偵聽異步組件加載事件。當某些資源以這種方式加載時應該觸發動畫。現在向路由添加一個路由守護來接收以下事件：

import $eventHub from '../components/eventHub'

router.beforeEach((to, from, next) => {
    if (typeof to.matched[0]?.components.default === 'function') {
        $eventHub.$emit('asyncComponentLoading', to) // 啟動進度條
    }
    next()
})

router.beforeResolve((to, from, next) => {
    $eventHub.$emit('asyncComponentLoaded') // 停止進度條
    next()
})

為了檢測頁面是否被延遲加載了，需要檢查組件是不是被定義為動態導入的，也就是應該為 component:() => import(‘…’) 而不是component:MyComponent。

這是通過 typeof to.matched[0]?.components.default === ‘function’ 完成的。帶有 import 語句的組件不會被歸為函數。

總結

在本文中，我們禁用了在 Vue 應用中的預取和預加載功能，並創建了一個進度條組件，該組件可显示以模擬加載頁面時的實際進度。

原文：https://stackabuse.com/lazy-loading-routes-with-vue-router/

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9765

基本上，使用任何成熟的語言都可以開發 cli 工具，作為一個前端小白，還是 JavaScript 比較順手，因此我們選用nodejs作為開發語言，開發一款node-cli工具。

類似於腳手架工具，Node工具會自動去詢問你一些預設的問題，然後將你回答的結果結合一些模板文件，給你生成一個項目結構。

那接下來我們以一個小型的腳手架工具為例，通過Nodejs完成一個Node工具，再來去深入體會一下Node工具的工作過程。

那我們知道腳手架工具實際上就是一個node-cli應用，那創建腳手架就是創建一個node-cli應用，那這裏我們具體來操作一下，我們首先進入到命令行，通過mkdir去創建一個工具目錄

mkdir samlpe-cli
cd sample-cli

在這個目錄下面我們通過yarn init 方式去初始化一個package.json文件

yarn init

有了這個文件之後通過編輯器打開這個目錄，緊接着我們需要在package.json中添加一個bin字段，用於去指定一下我們cli應用的入口文件, 我們這裏叫cli.js

{
  "name": "sample-cli",
  "bin": "cli.js",
  ...
}

再然後我們添加這個cli.js文件，跟以往我們在Node中書寫的文件有所不同，cli的入口文件必須要有一個特定的文件頭, 也就是在這個文件頂部寫上這樣一句話 #! /usr/bin/env node 我們在這個文件中console.log一句話。

#! /usr/bin/env node

console.log('cli working')

如果說你的操作系統是linux或者mac系統你還還需要去修改這個文件的讀寫權限，把他修改成755，這樣才可以作為一個cli的入口文件。

我們回到命令行，我們通過yarn link 將這個模塊映射到全局

yarn link

這時候我們就可以在命令行使用sample這樣一個命令, 通過執行這個命令我們的console.log成功打印出來，表示代碼執行了。也就意味着我們這個cli基礎就已經ok了。

sample-cli

接下來我們實現一下腳手架的具體業務，也就是我們腳手架的工作過程。

首先我們需要通過命令行交互的的方式去詢問用戶的一些信息，然後緊接着呢根據用戶反饋回來的結果我們去生成文件，

1. 通過命令行交互的方式詢問用戶信息

2. 根據用戶反饋回來的結果生成文件

在Node當中去發起命令行交互詢問我們使用inquirer這樣一個模塊，那我們需要通過npm安裝一下這個模塊，我這裏使用yarn，安裝在依賴文件當中。

yarn add inquirer --dev

那有了這個模塊過後就可以在代碼中去載入, inquirer這個模塊提供一個叫做prompt的方法用於發起一個命令行的詢問。

他可以接收一個數組參數，數組中每一個成員就是一個問題，可以通過type指定問題輸入方式，然後name指定返回值的鍵，message去指定屏幕上給用戶的一個提示，在promise的then裏面拿到這個問題接收到用戶的答案。

我們這裏不着急往下寫，我們先通過console.log去打印一下。

const inquirer = require('inquirer');

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: 'Project name'
    }
]).then(answer => {
    console.log(answer);
})

回到控制台，我們命令行執行sample-cli, 此時就會提示我們需要輸入項目的名稱。

sample-cli

這樣就可以看到問題和返回的結果。這也就證明inquirer確實可以幫我們發起命令行交互詢問。

那有了inquirer之後接下來我們要考慮的就是動態的去生成我們的項目文件。

我們一般會根據模板去生成，所以我們在項目的跟目錄下新建一個templates目錄，在這個目錄下我們去新建一些模板。

由於我們這裡是討論腳手架的工作過程，所以我們也不去關心模板裏面有什麼，我們就隨便寫點什麼。我們可以通過 <%%>去替換詢問過程中得到的答案。

index.html

<head>
    <title><%= name %></title>
</head>

我們還可以添加一些其他的模板文件，比如style.css

style.css

body {
    margin: 0;
    background-color: red;
}

回到cli.js文件, 這時候我們可以在得到問題答案的位置，根據用戶回答的問題去生成文件。不過在生成前我們一般會先將模板路徑和目標目錄確定下來。

模板的目錄應該是項目當前目錄的templates，我們可以通過path獲取。

const path = require('path');

// 工具當前目錄
const tmplDir = path.join(__dirname, 'templates');

輸出的目標目錄一般是我們命令行在哪個目錄去執行就應該是哪個路徑，也就是cwd目錄

const path = require('path');

// 工具當前目錄
const tmplDir = path.join(__dirname, 'templates');
// 命令行所在目錄
const destDir = process.cwd();

明確這兩個目錄，我們就可以通過fs模塊去讀取一下模板目錄下一共有哪些文件。把這些文件全部輸入到我們的目標目錄，我們通過fs的readDir方法，這個方法會自動掃描目錄下的所有文件

fs.readdir(tmplDir, (err, files) => {
    if (err) {
        throw err;
    }
    files.forEach(file => {
        console.log(file); // 得到每個文件的相對路徑
    })
})

我們可以通過模板引擎去渲染路徑對應的文件，先去安裝一款模板引擎，這裏我們使用ejs

yarn add ejs --dev

安裝過後，回到代碼中引入這個模板引擎, 通過模板引擎提供的renderFile去渲染這個路徑對應的文件。

第一個參數是文件的絕對路徑，第二個參數是模板引擎在工作的時候的數據上下文，第三個參數是回調函數，也就是我們在渲染成功過後的回調函數，當然如果你在渲染過程中出現了意外那你可以通過throw err的方式把這個錯誤拋出去。

我們可以先把result通過打印的方式打印出來看一下。

const fs = require('fs');
const path = require('path');
const inquirer = require('inquirer');
const ejs = require('ejs');

// 工具當前目錄
const tmplDir = path.join(__dirname, 'templates');
// 命令行所在目錄
const destDir = process.cwd();

inquirer.prompt([
    {
        type: 'input',
        name: 'name',
        message: 'Project name'
    }
]).then(answer => {
    fs.readdir(tmplDir, (err, files) => {
        if (err) {
            throw err;
        }
        files.forEach(file => {
            ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {
                if (err) {
                    throw err;
                }
                console.log(result);
            })
        })
    })
})

編輯完成之後我們運行一下腳手架工具。

sample-cli

此時打印出來的這個結果其實是已經經過模板引擎工作過後的結果，我們只需要將這個結果通過文件寫入的方式寫入到目標目錄就可以了，那目標目錄應該是通過path.join把我們destDir以及我們的file做一個拼接。內容就是我們這裏的result。

files.forEach(file => {
    ejs.renderFile(path.join(tmplDir, file), answer, (err, result) => {
        if (err) {
            throw err;
        }
        fs.writeFileSync(path.join(destDir, file), result);
    })
})

完成過後我們找到一個新的目錄，使用一下這個腳手架

sample-cli

我們輸入項目名稱過後，就會發現他會自動把我們模板裏面的文件自動生成到對應的目錄裏面，至此我們就已經完成了一個非常簡單，非常小型的一個腳手架應用。

那我們也回顧了一下腳手架的工作過程，其實腳手架的工作原理並不複雜，但是他的意義卻是很大的，因為他確實在創建項目環節大大提高了我們的效率。

我們可以將自己的工具發布至npm上，提供給更多的人使用。

至於發布npm也非常的簡單，首先我們需要註冊npm賬號，有兩種方式可以註冊，一種是登錄npm官網https://www.npmjs.com/, 另一種是使用命令npm adduser。

npm adduser

會提示你輸入用戶名，密碼，以及郵箱。

註冊好后登錄npm賬號。

npm login

依次輸入第二步中第一種方法註冊的用戶名、密碼和郵箱。

登錄成功后執行npm發布命令。

npm publish

注意：如果報錯：’You do not have permission to publish “samlpe-cli”. Are you logged in as the correct user?’

表示包samlpe-cli名字已經在包管理器已經存在被別人用了，需要更該包名稱，我們可以前往package.json中的name中換一個名字。

{
  "name": "sample-cli1",
  "version": "1.0.0",
  "bin": "cli.js",
  ...
}

再次執行publish命令。出現 +sample-cli1@1.0.0即表示發布成功。

如果發布時報錯：no_perms Private mode enable, only admin can publish this module:

表示當前不是原始鏡像，要切換回原始的npm鏡像

npm config set registry https://registry.npmjs.org/

至此你的node工具就可以提供給其他人使用了。

如果需要更新你的工具，只要繼續執行npm publish就可以更新發布了，不過需要注意，每次發布都需要修改版本號version的值，同一個版本不允許發布兩次。

{
  "name": "sample-cli1",
  "version": "1.0.1",
  "bin": "cli.js",
  ...
}

如果想要撤銷本次發布可以執行

npm unpublish

不過需要注意，只有在發包的24小時內才允許撤銷發布的包，超過24小時，就無法撤回了。

作者：隱冬

鏈接：https://juejin.cn/post/6899446879487180808

來源：掘金

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9893

前端開發最重要的部分之一是通過發出HTTP請求與後端進行通信，我們有幾種方法可以異步地在JavaScript中進行API調用。

幾年前，大多數應用程序都使用Ajax發送HTTP請求，Ajax代表異步JavaScript和XML。但是現在，開發人員通常會決定在 .fetch() API和Axios之間進行選擇。

在本文中，我想比較這兩種方法，並簡要介紹一下基本知識和語法。除此之外，我還將比較在兩種情況下以及在錯誤處理中將數據轉換為jsON格式的過程。我還將討論HTTP攔截和下載進度。

開始吧！

Fetch概述和語法

在構建Javascript項目時，我們可以使用window對象，並且它帶有許多可以在項目中使用的出色方法。這些功能之一是Fetch API，它提供了一種簡單的全局 .fetch() 方法，這是一種從API異步獲取數據的邏輯解決方案。

讓我們看一下 .fetch() 方法的語法。

fetch(url)
  .then((res) => 
    // handle response
  )
  .catch((error) => {
    // handle error
  })

在上面的示例中，您可以看到簡單的獲取GET請求的語法。在 .fetch() 方法中，我們有一個強制性參數url，它返回一個Promise，可以使用Response對象來解決。

.fetch() 方法的第二個參數是選項，它是可選的。如果我們不傳遞 options，請求總是GET，它從給定的URL下載內容。

在選項參數裏面，我們可以傳遞方法或頭信息，所以如果我們想使用POST方法或其他方法，我們必須使用這個可選的數組。

正如我之前提到的，Promise會返回Response對象，正因為如此，我們需要使用另一個方法來獲取響應的主體。有幾種不同的方法可以使用，取決於我們需要的格式：

response.json()
response.text()
response.formData()
response.blob()
response.arrayBuffer()

讓我們看一下帶有可選參數的代碼示例。

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});
  .then((response) => response.json())
  .catch((error) => console.log(error))

在上面的代碼示例中，你可以看到簡單的POST請求，包括 method、header 和 body params。然後我使用 json() 方法將響應轉換為JSON格式。

現在，讓我們仔細看看axios。

Axios概述和語法

Axios是一個Javascript庫，用於從Node.js或XMLHttpRequests或瀏覽器發出HTTP請求。作為一個現代的庫，它是基於Promise API的。

axios 有一些優勢，比如對XSRF的保護或取消請求。

為了能夠使用 axios 庫，我們必須將其安裝並導入到我們的項目中。可以使用CDN，npm或bower安裝 axios。現在，讓我們來看一個簡單的GET方法的語法。

axios.get(url)
  .then(response => console.log(response));
  .catch((error) => console.log(error));

在上面的代碼中，你可以看到我使用 .get() 方法創建一個簡單的GET請求。如果你想在函數中使用POST方法，那麼只需使用 .post() 方法代替，並將請求數據作為參數傳遞即可。

當我們創建配置對象時，我們可以定義一堆屬性，最常見的是：

baseUrl
params
headers
auth
responseType

作為響應，axios 返回一個promise，該promise將與響應對象或錯誤對象一起解析。在響應對象中，具有以下值：

data，這是實際的響應主體


status，調用的HTTP狀態，例如200或404


statusText，以文本消息形式返回的HTTP狀態，例如 ok


headers，服務器發回標頭


config，請求配置


request，XMLHttpRequest對象

現在，讓我們看一下帶有數據的POST方法的代碼示例。

axios.post({
  '/url', 
  { name: 'John', age: 22},
  { options }
})

在上面的代碼中，你可以看到 post 方法，我們把config對象作為param，其中有URL、數據和附加選項。

我們還可以將config對象定義為變量，然後像下面的示例一樣將其傳遞給 axios。

const config = {
  url: 'http://api.com',
  method: 'POST',
  header: {
    'Content-Type': 'application/json'
  },
  data: {
    name: 'John',
    age: 22
  }
}
axios(config);

在這裏，你可以看到所有的參數，包括URL、數據或方法，都在config對象中，所以在一個地方定義所有的東西可能更容易。

JSON

如前所述，當我們在使用 .fetch() 方法的時候，需要對響應數據使用某種方法，當我們在發送帶有請求的body時，需要對數據進行字符串化。

在 axios 中，它是自動完成的，所以我們只需在請求中傳遞數據或從響應中獲取數據。它是自動字符串化的，所以不需要其他操作。

讓我們看看如何從 fetch() 和 axios 獲取數據。

// fetch
fetch('url')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log(error))
// axios
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

在上面的例子中，你可以看到，使用 axios 我們沒有額外的一行代碼，在 .fetch()的例子中，我們必須將數據轉換為JSON格式。在一個較大的項目中，如果你創建了大量的調用，那麼使用 axios 來避免重複代碼會更舒服。

錯誤處理

在這一點上，我們還需要給 axios 點贊，因為處理錯誤是非常容易的。如果出現像404這樣的錯誤響應，promise就會被拒絕並返回一個錯誤，所以我們需要捕獲一個錯誤，我們可以檢查它是什麼類型的錯誤，就是這樣。讓我們看看代碼示例。

axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => {
    if (error.response) {
      // When response status code is out of 2xx range 
      console.log(error.response.data)
      console.log(error.response.status)
      console.log(error.response.headers)
    } else if (error.request) {
      // When no response was recieved after request was made
      console.log(error.request)
    } else {
      // Error
      console.log(error.message)
    }
  })

在上面的代碼中，當響應良好時，我返回了數據，但是如果請求以任何方式失敗，我就能夠檢查 .catch() 部分中的錯誤類型並返回正確的消息。

對於 .fetch() 方法，就比較複雜了。每次我們從 .fetch() 方法中得到響應時，我們需要檢查狀態是否成功，因為即使不是，我們也會得到響應。在 .fetch() 的情況下，只有當請求沒有完成時，promise才會被解決。讓我們看一下代碼示例。

fetch('url')
  .then((response) => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response.json()
  })
  .then((data) => console.log(data))
  .catch((error) => console.log(error))

在這段代碼中，我已經在承諾對象中檢查了代碼的狀態，如果響應有狀態 ok，那麼我就可以處理並使用 .json() 方法，但如果沒有，我必須在 .then() 裏面返回錯誤。

為了方便和正確的錯誤處理，對於你的項目來說，axios 絕對會是一個更好的解決方案，但如果你正在構建一個只有一兩個請求的小項目，使用 .fetch() 是可以的，但你需要記住正確處理錯誤。

下載進度

當我們需要下載大量的數據時，一種跟蹤進度的方法會很有用，特別是當用戶的網絡速度很慢時。早期，為了實現進度指標，開發者使用了 XMLHttpRequest.onprogress 回調。在 .fetch() 和 axios 中，有不同的方法來實現。

為了在 .fetch() 中跟蹤下載進度，我們可以使用其中一個 response.body 屬性，一個 ReadableStream 對象。它逐塊提供主體數據，並允許我們計算時間消耗了多少數據。

在axios中，實現一個進度指示器也是可能的，而且更容易，因為存在一個現成的模塊，可以安裝和實現，它叫做Axios Progress Bar。

如果你有大量的大數據要下載，你想跟蹤進度指標的進度，你可以用 axios 來管理，更容易更快，但 .fetch() 也提供了這種可能性，只是它需要更多的代碼來開發同樣的結果。

HTTP攔截

當我們需要檢查或改變我們從應用程序到服務器的HTTP請求時，或者以其他方式，例如，為了驗證，HTTP攔截可能是重要的。

在 axios 的情況下，HTTP攔截是這個庫的關鍵功能之一，這就是為什麼我們不需要創建額外的代碼來使用它。讓我們看一下代碼示例，看看我們能做到多麼容易。

// 請求攔截
axios.interceptors.request.use((config) => {
  console.log('Request sent');
})
// 響應攔截
axios.interceptors.response.use((response) => {
  // do an operation on response
  return response
})
axios.get('url')
  .then((response) => console.log(response))
  .catch((error) => console.log(error))

在代碼中，您可以看到請求攔截和響應攔截。在第一種情況下，我創建了一個 console.log，告知發送請求的情況，在響應攔截中，我們可以對響應做任何操作，然後返回。

.fetch() 默認不提供HTTP攔截功能，我們可以覆蓋 .fetch() 方法，定義發送請求過程中需要發生的事情，當然，這需要更多的代碼，可能比使用 axios 功能更複雜。

總結

在這篇文章中，我比較了用於創建HTTP請求的兩種方法，從簡單的概述開始，通過語法和一些重要的功能，如下載進度或錯誤處理。

通過比較可以看出，對於有大量HTTP請求，需要良好的錯誤處理或HTTP攔截的應用，Axios是一個更好的解決方案。在小型項目的情況下，只需要幾個簡單的API調用，Fetch也是一個不錯的解決方案。

在選擇項目的最佳解決方案時，還要注意一個因素，這是非常重要的。大多數瀏覽器和Node.js環境都支持Axios，而現代瀏覽器僅支持Fetch，並且某些版本可能會與舊版本一起發布。

通過這些知識的了解，希望大家能夠選擇出最適合自己的方案，也希望大家覺得這個比較有幫助。

來源：https://medium.com
作者：Harsh Patel

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9885

相信現在很多小夥伴都在使用 TypeScript（以下簡稱 TS），在 TS 中除了一些常用的基本類型外，還有一些稍微高級一點的類型，這些就是我本次文章要講的內容：索引類型與映射類型，希望小夥伴們看過這篇文章后能對 TS 有更深一步的理解。

索引類型

下面我通過一個官方的例子來說明下什麼是索引類型：

function pluck(o, names) {
  return names.map((n) => o[n])
}

這是個簡單的函數，names 是一個數組，裏面是 key 值，我們可以從“o”裏面取出這些 key 值，理想情況下 names 裏面的 key 應該都是“o”裡面包含的，否則最終的結果裏面就會有 undefined，這個函數返回的結果也應該是“o”中都包含的 value 值，那麼我們如何才能做到這些類型約束呢，如果只用一些基礎類型，很難達到滿意的效果，下面使用索引類型改寫下：

function pluck<T, K extends keyof T>(o: T, names: K[]): T[K][] {
  return names.map((n) => o[n])
}

interface Person {
  name: string
  age: number
}
let person: Person = {
  name: 'Jarid',
  age: 35
}
let strings: string[] = pluck(person, ['name']) // ok, string[]

改寫后這個函數是一個泛型函數，泛型為 T 和 K，其中 K 有點特殊，K extends keyof T，是什麼意思呢，其中 keyof 就是索引類型查詢操作符，我們從字面意思理解，它就是 T 的 key，就是 T 上已知的公共屬性名的聯合，對於上面的代碼，keyof Person就是’name’|’age’,那麼K extends keyof T就是K extends ‘name’|’age’，這樣我們就獲取到了 Person 上所有 key 組成的一個聯合類型，然後參數o: T, names: K[]，就很好理解了，names 就是 K 組成的一個數組。返回值中T[K][]我們需要拆開來看 T[K]和[]，就是 T[K]組成的一個數組，那麼 T[K]是什麼類型呢，它就是索引訪問操作符，類似於 js 中對象的取值操作，不過這裏取的是類型，因為 K 是’name’|’age’,所以 T[K]就是string|number，這些就是索引類型，其實也不難理解，下面再說下映射類型，它和索引類型結合起來可以做很多事情。

映射類型

映射類型也很容易理解，我們先看一個簡單的例子

type Keys = 'option1' | 'option2'
type Flags = { [K in Keys]: boolean }

這個就是一個簡單的映射類型，其中的in可以理解為是我們平時用的for…in，就是去遍歷 Keys，然後把 boolean 賦給每一個 key，上面的 Flags 得到的結果就是

type Flags = {
  option1: boolean
  option2: boolean
}

很簡單吧，那麼這個東西有什麼用處呢，請看下面的例子：

// Person
type Person {
    name: string
    age: number
}

我們想把這個 Person 裏面的屬性都變成只讀的，像這樣：

// Readonly Person
type Person {
    readonly name: string
    readonly age: number
}

如果我們有很多這樣的類型，那麼改起來會很麻煩，因為每次都要把這個類型重新寫一遍。其實我們可以使用剛才的索引類型和映射類型來寫一個泛型：

type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}

[P in keyof T]就是遍歷 T 中的 key，T[P]就是當前的 key 的類型，其實[P in keyof T]: T[P]就是把 T 遍歷了一遍，但是我們在屬性前面加了個 readonly，這樣我們調用這個泛型的時候，它就會把傳入的類型的 key 遍歷一遍，遍歷的同時在前面加個 readonly，最終給我們返回一個新的類型。我們在調用的時候只需要這麼用：

type Readonly<T> = {
  readonly [P in keyof T]: T[P]
}
type Person {
    name: string
    age: number
}
type ReadonlyPerson = Readonly<Person>

索引類型和映射類型除了能實現 Readonly，還能實現很多有意思的東西，我們平時在使用 TS 的時候，TS 已經內置了一些常用的輔助泛型，剛才的 Readonly 就是其一，另外還有很多，我從 TS 的類型定義文件里找了一些，這些泛型從簡單到複雜的都有，但基本上都是用上面提到的兩個類型實現的，下面我們一起來分析一下。

TS 常用的輔助泛型及其實現方式

首先來看第一個

/**
 * Make all properties in T optional
 */
type Partial<T> = {
  [P in keyof T]?: T[P]
}

相信這個泛型很多人都用過，就是把類型都變成可選的，和剛才的 Readonly 是類似的實現方式，只是這個是在後面加了個問號，這樣一來屬性就變成可選的了。
與之相對的還有一個 Required

/**
 * Make all properties in T required
 */
type Required<T> = {
  [P in keyof T]-?: T[P]
}

注意這個稍有點不同，它是-?,其實就是減去問號，這樣就可以把問號去掉，從而變成必選的屬性。再來看下一個

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}

如果你理解了最開始的那個 pluck 函數，這個就很好理解了，我們傳入 T 和 K，其中 K 是 T 的 keys 組成的聯合類型，再看返回值[P in K]: T[P]，就是把 K 遍歷了一遍，同時賦值上原類型，那麼綜合來看 Pick 就是幫我們提取出某些類型的，比如通過Pick<Person, ‘name’>我們就可以得到{name: string}，再來看下一個

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T

這個泛型傳入一個 T 和 U，然後它判斷了 T 是否屬於 U，屬於的話返回 never 否則返回原類型 T，注意 never 在最終的類型中是不會存在的，所以它可以幫助我們消除某些屬性，其實這個 Exclude 就是消除了T extends U的類型，比如我們使用Exclude<‘a’|’b’,’b’|’c’>，最終會得到’a’，與之相反的有：

/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never

這個正好相反，是從 T 中取出 U 中擁有的類型。

有了 Exclude，我們就可以和 Pick 結合來實現另外一個：

/**
 * construct a type with the properties of T except for those in type K.
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>

這個泛型是先使用了Exclude<keyof T, K>，去除了 keyof T 中的 K，然後又使用 Pick 取出了這些類型，這樣我們就可以從 T 中去除 K 裡面包含的 keys 了，達到和 Pick 相反的效果。

我們再來看另一個稍微複雜一點的

type NonNullObject<O> = Pick<
  O,
  {
    [K in keyof O]: O[K] extends null | undefined ? never : K
  }[keyof O]
>

這個不是 TS 內置的類型，但也是一個很有用的類型，我們來一點一點分析。首先這個泛型使用了 Pick，我們知道 Pick 就是取出一些屬性，我們先看傳給 Pick 的第二個參數

{
  [K in keyof O]: O[K] extends null | undefined ? never : K
}[keyof O]

它遍歷了 O 的 keys，然後進行了一個判斷，如果是extends null | undefined則返回 never，否則返回 K，K 就是 O 中的 key 值，注意這裏和之前的一些泛型有些不一樣,之前的都是O[K]，而這裏的屬性的值還是 K，最終我們得到的是類似K:K這樣的東西，比如{name: string, age: null}這個，經過上面的轉化會變成{name:’name’, age:never}，可能有些小夥伴還不清楚為什麼要這樣轉換，我們接着往下分析，經過這個轉換之後，又進行了一個操作[keyof O]，對於 Person，keyof O 就是’name’|’age’，那麼這裏就就是{name:’name’, age:never}[‘name’|’age’]，這樣就很清晰了，其實就是一個取值操作，這樣我們就可以得到’name’|never，還記得 never 的特性嗎，它可以幫我們消除一些類型，那麼最終的就是’name’，這也是為什麼我們寫成類似 K:K 這樣，就是要把 null|undefined 對應的 key 轉換成 never，然後再通過 keyof 把他們全都取出來，別忘了最外面還有一個 Pick，這樣我們就從原始類型中去除了 null|undefined。

另外還有一個比較有用的是 ReturnType

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (
  ...args: any
) => infer R
  ? R
  : any

它可以幫我們取到函數返回值的類型，這個 ReturnType 接收的一個參數是函數，然後進行了一個判斷T extends (…args: any) => infer R，就是判斷是否是函數，這裡有個東西是 infer，通過這個操作符我們可以獲取 R 的引用，就是函數的返回值，最終再把 R 返回出去，就獲得了函數 T 的返回值。

其實除了我分析的這些泛型，TS 還內置了其他的很多泛型，比如還有獲取函數的參數的，獲取構造函數類型的，總的來說各種泛型基本上都可以用索引類型和映射類型實現，希望大家看過這篇文章后能多多使用這兩種類型，在自己的項目里也能開發一些常用的輔助泛型，來提升工作效率。

站長推薦

1.雲服務推薦: 國內主流雲服務商，各類雲產品的最新活動，優惠券領取。地址：阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台，如果你有流量，可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9892