Skip to content

Instantly share code, notes, and snippets.

@gr2m
Last active August 16, 2019 15:42
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gr2m/5dd2ec6e3a04c3dc79f0cbb46decbe46 to your computer and use it in GitHub Desktop.
Save gr2m/5dd2ec6e3a04c3dc79f0cbb46decbe46 to your computer and use it in GitHub Desktop.
This is a living document on JavaScript Octokit’s build setup using pika pack and semantic-release on GitHub Actions

Octokit.js build setup using @pika/pack

Install @pika/pack and build plugins

npm install --save-dev @pika/pack @pika/plugin-build-node @pika/plugin-build-web @pika/plugin-ts-standard-pkg

Configuration

Add a "@pika/pack" key to package.json

  "@pika/pack": {
    "pipeline": [
      [
        "@pika/plugin-ts-standard-pkg"
      ],
      [
        "@pika/plugin-build-node"
      ],
      [
        "@pika/plugin-build-web"
      ]
    ]
  }

Add a "release" key to package.json

{
  "plugins": [
    "@semantic-release/commit-analyzer",
    "@semantic-release/release-notes-generator",
    "@semantic-release/github",
    [
      "@semantic-release/npm",
      {
        "pkgRoot": "./pkg"
      }
    ]
  ]
}

Add a "build" script

  "scripts": {
    "build": "pika build",

Add pkg/ to .gitignore

node_modules/
pkg/

Create tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "target": "es2018"
  },
  "include": ["src/**/*"]
}

CI & release using GitHub Actions

For testing, create .github/workflows/test.yml with the following content

name: Node CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node_version: [8, 10, 12]

    steps:
    - uses: actions/checkout@master
    - name: Use Node.js ${{ matrix.node_version }}
      uses: actions/setup-node@v1
      with:
        version: ${{ matrix.node_version }}
    - name: Install
      run: npm ci
    - name: Test
      run: npm test

For automated releases using semantic-release, create .github/workflows/release.yml with the following content

on:
  push:
    branches:
    - master
name: Release
jobs:
  build:
    name: release
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@master
    - uses: actions/setup-node@v1
      with:
        node-version: '12.x'
    - run: npm ci
    - run: npx semantic-release
      env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Add Node/browser usage to README

The indentation is important. Replace @octokit/endpoint with the package name

<table>
<tbody valign=top align=left>
<tr><th>
Browsers
</th><td width=100%>

Load `@octokit/endpoint` directly from [cdn.pika.dev](https://cdn.pika.dev)

```html
<script type="module">
  import { endpoint } from "https://cdn.pika.dev/@octokit/endpoint";
</script>
```

</td></tr>
<tr><th>
Node
</th><td>

Install with <code>npm install @octokit/endpoint</code>

```js
const { endpoint } = require("@octokit/endpoint");
// or: import { endpoint } from "@octokit/endpoint";
```

</td></tr>
</tbody>
</table>

The above is rendered as

Browsers

Load @octokit/endpoint directly from cdn.pika.dev

<script type="module">
  import { endpoint } from "https://cdn.pika.dev/@octokit/endpoint";
</script>
Node

Install with npm install @octokit/endpoint

const { endpoint } = require("@octokit/endpoint");
// or: import { endpoint } from "@octokit/endpoint";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment