自從作業以來，寫專案的時候經常需要手寫一些方法和引入一些js庫

JS基礎又十分重要，于是就萌生出自己創建一個JS工具庫并發布到npm上的想法

于是就創建了一個名為learnjts的專案，在空余時間也寫了幾個工具函式，后續還會再繼續增加...

這篇文章就是一篇實戰文章，我把自己創建專案，發布到npm，以及遇到的問題和解決方案全都記錄了下來，如果你也想創建一個自己的js工具庫，可以根據這篇文章一步一步的嘗試一下

github專案地址

npm專案地址

創建專案

打開命令視窗,創建一個專案檔案

mkdir learnjts  // 創建了一個名為 learnjts 的檔案夾

cd learnjts  // 進入此檔案夾

然后初始化專案

npm init

我們可以看到：讓我們給專案起一個名字，括號內是默認檔案夾的名字，不用修改，回車就可以

還會彈出來許多的引數，我們可以寫上，也可以一路回車，一直到最后，就會生成一個package.json檔案夾

如果要修改可以直接在這里修改

創建一個src檔案夾，里面放一些js檔案，可以寫工具方法，再在根目錄下創建一個index.js作為入口檔案

寫工具方法

專案骨架已經建好了，接下來我們開始寫工具方法

第一個工具方法，我寫了一個資料型別的判斷方法

先在src檔案夾下面建一個getDataType.js

function getDataType(target){
    let type = typeof target
    // 判斷是否是復雜資料型別
    if(type === 'object'){
        return Object.prototype.toString.call(target).replace(/^[object (\S+)]$/, '$1').toLowerCase();
    }else{
        // 基礎資料型別直接回傳
        return type
    }
}
//匯出這個方法
export default getDataType

然后在index.js檔案里匯入 getDataType方法，并且驗證是否能夠使用

然后就會發現，報錯了

從報錯資訊我們可以看到是 import出錯了

解決方案：給package.js添加一個屬性

"type":"module",

此時再運行一下可以看到，能夠正常運行了

以后我們在src目錄下肯定會增加很多工具函式，所以可以吧index.js當成一個入口，所有的工具函式都可以從這里匯出出去

import getDataType from './src/getDataType.js'

export {
    getDataType,
}

注冊npm賬號

要想自己的工具庫別人也能夠使用，需要把它發到npm上 npm官網

此時就需要注冊一個npm賬號了

注冊npm需要有一個郵箱，任何郵箱都可以，能接收到驗證碼就可以，注冊時會收到驗證碼

開始發布

當你注冊好npm賬號后，你就可以去專案中準備 發布 了

設定npm源

但是在發布之前，需要檢查一下npm源，如果是其他源，就會發布失敗，此時你需要把它設定為npm源

在專案終端里輸入npm config get registry，可以查看當前源

npm config get registry

可以看到此時我的源是npm源，可以發布，如果是淘寶源呢？

就需要設定npm源

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

登錄npm賬號

因為我們是第一次發布包，所以需要在終端登錄我們的npm用戶，輸入我們的用戶名，和密碼和郵箱

在終端輸入

npm adduser

需要注意的是，我們輸入密碼時，不會再終端上顯示出來，輸入完直接按回車就好

接著開始讓你輸入npm的郵箱號，再次按回車時，會給你的郵箱發一個驗證碼，你需要把這個驗證碼再輸入上

發布到npm上

登錄好后，開始發布，在終端輸入

npm publish

發布的時候，有可能就會報錯：提示資訊就會問你：你沒有登錄對賬號吧？

其實真正的錯誤原因：是因為你的專案名稱和npm上的專案重名了

在起名字的時候，你可以去npm上搜一下

嘿嘿^_ 這個其實是我之前寫好的，只是為了給大家演示，又從零搭建又寫了一遍

如果沒有搜到，則說明你可以使用這個名字

如果你重名了，你就在package.js里面改名吧

此時再次發布，就可以看到，發布成功了

回到npm,點擊自己的頭像，再點擊Profile,就可以看到自己的npm庫了

使用自己的工具庫

新建一個專案，再建一個js檔案

在終端輸入npm install learnjts

npm install learnjts

安裝成功可以看到我們的專案里多了幾個檔案

在index.js檔案里引入工具函式

有可能還會報 import 引入錯誤，解決方案和上面一樣

此時可以看到可以正常列印出來資料型別，則說明

添加eslint 和 單元測驗

添加一個README.md檔案，來介紹自己的工具庫

添加 eslint

既然寫都寫了，肯定要最好最全面的配置呀，所以我決定添加eslint

兩種安裝方式，一般選擇第二種在當前專案安裝

//方式一.全域安裝
npm i -g eslint

//方式二.當前專案安裝
npm i -D eslint

使用命令配置并生成一個.eslintrc檔案

npm init @eslint/config

命令列會有一些簡單的配置，生成如下內容

module.exports = {
    "env": {
        "browser": true,
        "node": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
    }
}

配置一下規則，可以在env里添加node,es6等

module.exports = {
    "env": {
        "browser": true,
        "node": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "space-before-function-paren": 0,  // 函式定義時括號前面要不要有空格
        "semi": 0,  // 陳述句可以不需要分號結尾
        "eqeqeq": 1, // 必須使用全等
    
    }
}

可以在rules配置一些語法規則

module.exports = {
    
    "rules": {
        /* 
            "off" -> 0 關閉規則
            "warn" -> 1 開啟警告規則
            "error" -> 2 開啟錯誤規則
        */
        "space-before-function-paren": 0,  // 函式定義時括號前面要不要有空格
        "semi": 0,  // 陳述句可以不需要分號結尾
        "eqeqeq": 2, // 必須使用全等
    
    }
}

此時再回到 getDataType.js檔案中去就會發現，沒有使用全等的地方爆紅了，修改后恢復到正常

添加單元測驗jest

單元測驗的執行通常需要測驗規范、斷言、mock、覆寫率工具等支持

jest 是用來創建、執行和構建測驗用例的 JavaScript 測驗庫，自身包含了 驅動、斷言庫、mock 、代碼覆寫率等多種功能

安裝

npm i --save-dev jest

把 jest 安裝到專案后，在 package.json 添加配置

"scripts": {
  "test": "jest"
}

這樣就可以使用命令 npm test 執行測驗代碼了

創建一個test/getDataType.test.js 檔案來測驗getDataType方法

import getDataType from '../src/getDataType.js';

test('getDataType(2)===number', () => {
  expect(getDataType(2)).toBe("number");
})

test('getDataType({a:1})===object', () => {
    expect(getDataType({a:1})).toBe("object");
})

此時你會發現，又有很多爆紅

解決辦法：在 「.eslintrc.cjs」 配置"jest": true

在jest原生測驗框架中，無法使用es6的import export語法，只能使用commonJS語法，可以使用下面的方式解決

step1: 在專案根目錄下添加.babelrc檔案

{
  "env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
  }
}

step2:安裝ES6語法決議轉換插件

npm install --save-dev @babel/plugin-transform-modules-commonjs

此時再運行

npm test

可以看到我們的單元測驗，成功通過

可以在 「package.json」 里多加一個配置

"jest": {
    "collectCoverage": true
},

會生成一個 coverage 報告

更新

更新之前必須要修改一下版本號，否則就會報錯更新失敗

因為之前登錄過了，所以直接輸入npm publish就可以了

npm publish

再次到npm官網查看自己的庫就可以看到，已經更新到1.0.1版本了，并且README檔案已經顯示出來了

在專案中引入最新包

在終端輸入npm install learnjts@latest

npm install learnjts@latest

此時可以看到版本已經更到最新了

這就是我搭建一個自己的JS工具庫的全部程序了，其中我遇到的問題和解決方案也都有講解，但是畢竟經驗不足，可能會有一些不對的地方或者局限性，僅供參考

learnjts工具庫既然已經寫出來了，其中也寫了一些方法，下一步就準備使用vuepress2.x搭建一個檔案，方便查閱和使用

learnjts專案原始碼和地址在這里?
github專案地址 |
npm專案地址

標籤：其他

上一篇：我已經說了5種css居中實作的方式了，面試官竟然說還不夠？

下一篇：在Edge上安裝與測驗Vue devtools開發者工具