記一次 npm 發佈流程（jest 測試，github 自動化部署，檢測代碼安全）

最近看到 github 上也搞了自動化因此就發佈個庫試試水吧。

流程

• npm 建立項目
• 編寫 jest 測試代碼
• 配置 gulp 打包
• 配置 github 自動化（部署 npm）
• lgtm 檢測代碼安全問題

建立一個項目

npm init -y
複製代碼

name：包名
version：版本，第一個數字通常爲版本不兼容改動，第二個數字爲版本兼容的功能修改，第三個爲版本兼容的bug修復
description：包的說明
main：入口文件
scripts：可執行的腳本命令
keywords：關鍵字
author：做者
license：許可證書
types: 描述文件路徑
homepage：github地址
repository：同上
複製代碼

項目結構

└── project
    ├── README.md
    ├── src
    ├── lib
    └── package.json
複製代碼

修改package.jsonmain 爲 lib/xxx.js，這是你的入口文件。

在 src 文件內編寫項目。

jest 測試

安裝

yarn add jest
複製代碼

項目根目錄添加 tests 文件夾

建立test js,名字爲 <組件名稱>.test.js

├── src
        └── component.js
    ├── lib
    ├── tests
        └── component.test.js
    └── package.json
複製代碼

package.json

"scripts": {
+ "test": "jest"
  },
複製代碼

component.js

jest 官網的樣例，簡潔明瞭

function sum(a, b) {
  return a + b;
}
module.exports = sum;
複製代碼

omponent.test.js

const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
複製代碼

由於此次組件涉及相關dom操做，例如 getBoundingClientRect，在模擬環境內沒法準確的獲取視區，因此須要改寫來模擬。

// 改寫所有
Element.prototype.getBoundingClientRect = jest.fn(() => {
  return { width: 100,height: 10,top: 0,left: 0,bottom: 0,right: 0 };
});

// 改寫指定
const targetElement = document.getElementById('node2');
targetElement.getBoundingClientRect = jest.fn(() => {
    return { top: 200, left: 200, bottom: 0, right: 0, width: 50, height: 50 };
});
複製代碼

最後運行 npm run test

gulp 壓縮文件

安裝 安裝

yarn add gulp
複製代碼

配置文件

根目錄/gulpfile.js

const gulp = require('gulp'),
  ugLify = require('gulp-uglify'), //壓縮js
  babel = require("gulp-babel"),
  del = require('del');
  
const workPath={
  entry:'./src',
  output:'./lib'
}

// 刪除文件
function Del(cb) {
  // 我這裏暫且只有一個文件，因此就這樣了
  return del([workPath.output+'/parabola.js'], cb);
  // 刪除 全部的
  // return del([workPath.output+'/*'], cb);
}

// 壓縮 js 並打包到指定文件夾
function build() {
  return gulp.src([workPath.entry+'/**/*.js'])
    .pipe(babel({
        presets: ['es2015']
     }))
    .pipe(ugLify())
    .pipe(gulp.dest(workPath.output))
}

exports.default = gulp.series(Del, build);
複製代碼

package.json

"devDependencies": {
+ "gulp": "^4.0.2",
+ "gulp-uglify": "^3.0.2",
+ "gulp-babel": "^8.0.0",
+ "del": "^5.1.0",
+ "babel-preset-es2015": "^6.24.1"
  }
複製代碼

點我查看 壓縮css或熱更新

github Actions

這裏能夠用來自動打包發佈一些本身的程序例如 blog等。（這裏來一個利用github和coding雙線部署 blog 的帖子，訪問速度的快的一）

1. 在github項目頁面點Actions進去有一鍵配置文件
2. 本身建立 項目根目錄/.github/workflows/xxx.yml

xxx.yml

name: test

# 觸發的場景
on:
 push:
 branches:
 - master

# 任務
jobs:
 build:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v2
 - uses: actions/setup-node@v1
 with:
 node-version: 12
 - run: npm ci
 - run: npm run test
 - run: npm run build

# 發佈 npm
 publish-npm:
 needs: build
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v2
 - uses: actions/setup-node@v1
 with:
 node-version: 12
 registry-url: https://registry.npmjs.org/
 - run: npm ci
      # 此爲npm的發佈命令
 - run: npm publish
      # npm token 祕鑰，須要在 npm 內申請併到github上綁定，綁定在項目設置內
 env:
 NODE_AUTH_TOKEN: ${{secrets.npm_token}}

複製代碼

正常的 npm 發佈

1. 註冊 npm。
2. 本地登陸

# 這裏必須官方源，建議使用 nrm 管理
npm login

# 項目根目錄
npm publish
複製代碼

發佈失敗多是名字重複或者版本號不對。

本地測試本身的庫可以使用yarn link,執行後下面會有提示。。。

檢測代碼

1. 註冊 lgtm
2. 點 project list follow 你的項目，接着等他計算就行了

🔗 Links

• 項目地址
• blog