npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bike_v1

v0.9.6

Published

**Fast start typescript full stack (NodeJs/Native Browser JS) project**

Downloads

3

Readme

Fast start typescript full stack (NodeJs/Native Browser JS) project

Bike only helps you prepare the front and back end typescript and test development environment, and will not add any functions presumptuously.

Install

Install bike in global

npm i -g bike

Simple Example

Build Browser library

bike lib --browser --out=cjs

Only Run Nodejs project

# Make project and files
mkdir your-project
cd your-project
mkdir src
touch src/index.ts
touch src/index_test.ts

Add some code in src/index.ts

console.log("Hello bike");

Add some test code in src/index_test.ts

import { test } from "bike/test";

test.it("index test", (so) => {
  so.deepEqual(21, 23);
});

Run Dev Server:

bike src --watch=src

Build release

bike src

Run test

bike src --watch=src --test

View test cover, need install c8

npm i -g c8
bike src --reporter=text

Full stack example

Create project:

mkdir full-stack
npm i --save-dev bike
npm i --save fastify

mkdir app
touch app/index.ts

mkdir client
touch client/index.ts
touch client/index.css

mkdir public
touch public/index.html

Edited some codes:

app/index.ts:

import fastify from "fastify";

const app = fastify();

app.get("/v1/hello", async () => {
  return { msg: "world" };
});

app.listen(5000, () => {
  console.log("Server listen: http://localhost:5000");
});

client/index.css:

body {
  padding: 0px;
  margin: 0px;
}

client/index.ts:

import "./index.css";

export const App = () => {
  const div = document.createElement("div");
  div.textContent = "loading...";

  fetch("/v1/hello")
    .then((v) => v.text())
    .then((v) => {
      div.textContent = v;
    });

  return div;
};

document.body.append(App());

public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module" src="../client/index.ts"></script>
  </body>
</html>

Ok, start your work:

bike app --html=public/index.html -w --proxy=/v1::http://localhost:5000
# or build release
bike app --html=public/index.html
# or hot test
bike app,client -w --test

Use bundle depend

Bundle all dependencies in bundle.js

bike app --depend

If you need keep some dependencies in node_modules:

Keep sequelize not bundle, example from package.json:

{
  "noBundleDependencies": ["mysql2"]
}

Use CLI Options

Use bike --help:

Options:
      --help          Show help                                        [boolean]
      --version       Show version number                              [boolean]
      --argv          Backup all argv                                    [array]
      --log-config    Log cli config at run           [boolean] [default: false]
      --browser       Use build browser types                          [boolean]
  -h, --html          Use base html When type is browser                [string]
      --html-out      Build client out dir, server default dist/client  [string]
      --out           Build out dir, server default dist/server, test default
                      dist/test                                         [string]
      --outfile       Build out dir index name    [string] [default: "index.js"]
      --static        Auto copy static's files to out
                                                    [string] [default: "static"]
      --public        Auto copy public's files to html-out
                                                    [string] [default: "public"]
      --entry         Main typescript file, default: ${source}/index.ts [string]
      --spawn         Use child_process.spawn replace cluster.fork
                                                      [boolean] [default: false]
      --copy          Copy other file to dist                            [array]
  -m, --minify        Esbuild minify                                   [boolean]
      --bundle        Esbuild bundle                   [boolean] [default: true]
      --depend        Esbuild bundle dependencies                      [boolean]
  -e, --external      Esbuild external                                   [array]
      --define        Esbuild define                                    [string]
      --target        Esbuild target, browser default: es6, nodejs default:
                      es2018                        [string] [default: "es2018"]
      --splitting     Esbuild splitting                                [boolean]
      --format        Esbuild format                                    [string]
      --sourcemap     Esbuild use sourcemap                            [boolean]
  -t, --test          Is use test                     [boolean] [default: false]
      --all           Always test all case, ignore .bike.test.yaml
                                                      [boolean] [default: false]
  -f, --focus         Use RegExp focus some test                        [string]
      --start         Start server after on build     [boolean] [default: false]
      --platform      Esbuild platform                [string] [default: "node"]
  -w, --watch         Watch some dir on change reload, example: '-w=server
                      -w=pkg'                              [array] [default: []]
      --clear         On reload auto clear             [boolean] [default: true]
      --gzip          (only-browser) gzip watch is false, else is true [boolean]
      --host          (only-browser) browser serve host
                                                 [string] [default: "127.0.0.1"]
      --port          (only-browser) browser serve port[number] [default: 13000]
      --path-prefix   (only-browser) public file path prefix
                                                         [string] [default: "/"]
      --url-prefix    (only-browser) html file url prefix[string] [default: "/"]
      --proxy         (only-browser) Example:
                      '--proxy=/v1::http://127.0.0.1:5000' is proxy /v1 to
                      http://127.0.0.1:5000/v1                           [array]
  -r, --reporter      (only-test) c8 reporter, pick in :[text, html]    [string]
      --test-include  (only-test) test files include RegExp string
                                 [string] [default: "(.test|.spec|_test|_spec)"]
      --rematch       (only-test) auto rematch all test files on watch
                                                      [boolean] [default: false]
  -n, --c8-include    (only-test) c8 include all files                   [array]
  -x, --c8-exclude    (only-test) c8 exclude all files                   [array]
      --c8-all        (only-test) c8 all files         [boolean] [default: true]
      --c8-config     (only-test) c8 path to JSON configuration file    [string]
      --c8-skip-full  (only-test) c8 skip full in text that ignore in html
                                                                       [boolean]