最近看到 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