最近看到 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.json
main 为 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"
}
复制代码
github Actions
这里可以用来自动打包发布一些自己的程序例如 blog等。(这里来一个利用github和coding双线部署 blog 的帖子,访问速度的快的一)
- 在github项目页面点Actions进去有一键配置文件
- 自己创建 项目根目录/.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 发布
- 注册 npm。
- 本地登录
# 这里必须官方源,建议使用 nrm 管理
npm login
# 项目根目录
npm publish
复制代码
发布失败可能是名字重复或者版本号不对。
本地测试自己的库可使用yarn link
,执行后下面会有提示。。。
检测代码
- 注册 lgtm
- 点 project list follow 你的项目,接着等他计算就好了