Recently, I saw that github is also doing automation, so let’s release a library to try it out.

process

  • NPM creates projects
  • Write jEST test code
  • Configure gulp packaging
  • Configuring Github Automation (deploying NPM)
  • LGTM detects code security issues

Create a project

npm init -y
Copy the code
Name: indicates the package name. Version: indicates the version. Generally, the first number indicates a version incompatible change, the second number indicates a version compatible function change, and the third number indicates a version compatible bug fix. Keyword: author license: license certificate Types: description File path homepage: Github address repository: same as aboveCopy the code
The project structure
└─ Project ├─ ├─ SRC ├─ ├─ download.jsonCopy the code

Change package.jsonmain to lib/xxx.js, which is your entry file.

Write the project in a SRC file.

Jest test

The installation
yarn add jest
Copy the code
Add the Tests folder to the project root directory
createtest jsThe name for< component name >.test.js
├─ SRC ├─ ├─ download.txt ├─ download.txt ├─ download.txtCopy the code

package.json

  "scripts": {
+ "test": "jest"
  },
Copy the code
component.js
Jest official website sample, concise and clear
function sum(a, b) {
  return a + b;
}
module.exports = sum;
Copy the code
omponent.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1.2)).toBe(3);
});
Copy the code

Because this component involves related DOM operations, such as getBoundingClientRect, which cannot accurately obtain viewport in the simulated environment, it needs to be rewritten to simulate.

// Rewrite all
Element.prototype.getBoundingClientRect = jest.fn((a)= > {
  return { width: 100.height: 10.top: 0.left: 0.bottom: 0.right: 0 };
});

// Overwrite the specified
const targetElement = document.getElementById('node2');
targetElement.getBoundingClientRect = jest.fn((a)= > {
    return { top: 200.left: 200.bottom: 0.right: 0.width: 50.height: 50 };
});
Copy the code

Finally, run the NPM run test

gulpThe compressed file

Install the installation
yarn add gulp
Copy the code
The configuration file
The root directory/gulpfile. Js
const gulp = require('gulp'),
  ugLify = require('gulp-uglify'), Js / / compression
  babel = require("gulp-babel"),
  del = require('del');
  
const workPath={
  entry:'./src'.output:'./lib'
}

// Delete files
function Del(cb) {
  // I only have one file here for the moment, so that's it
  return del([workPath.output+'/parabola.js'], cb);
  // Delete all
  // return del([workPath.output+'/*'], cb);
}

// Compress js and pack it into the specified folder
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);
Copy the code
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"
  }
Copy the code

Click me to view compressed CSS or hot update

github Actions

Here can be used to automatically package and publish some of their own procedures such as blog. (Here is a blog post using github and coding, one of the fastest access)
  1. Click Actions on the Github project page to go to the one-click configuration file
  2. Create your own project root directory /. Making/workflows/XXX. Yml
xxx.yml

name: test

# Trigger scenario
on:
  push:
    branches:
      - master

# task
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

# release 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
      # this is the NPM issue command
      - run: npm publish
      # NPM token key, which needs to be applied in NPM and bound to Github
        env:
          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

Copy the code
Normal NPM publishing
  1. Registration of NPM.
  2. The local login
NRM management is recommended
npm login

# project root
npm publish
Copy the code

The release failure may be due to duplicate names or incorrect version numbers.

You can use Yarn Link to test your own library locally. After yarn Link is executed, a message is displayed…

Test code

  1. Registered LGTM
  2. Click project List follow your project and wait for it to calculate

🔗 Links

  • The project address
  • blog