记一次 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