自從工作以來，寫項目的時候經常需要手寫一些方法和引入一些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項目地址