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

typescript-project-bootstrap

v1.0.1

Published

This package contains reusable configurations, that can easily be included in every type of Javascript/Typescript project.

Downloads

11

Readme

typescript-project-bootstrap

This package contains reusable configurations, that can easily be included in every type of Javascript/Typescript project.
It can also be used to bootstrap the initial configuration for a new package.

[[TOC]]

How it works

In order to install the package in your project, the package manager needs to fetch typescript-project-bootstrap package from npm registry.

Installing typescript-project-bootstrap as a devDependency

npm install --save-dev typescript-project-bootstrap

# Short version
npm i -D  typescript-project-bootstrap

# Version with yarn
yarn add --dev  typescript-project-bootstrap

How to use it

Bootstrapping/updating all the config files

Included with the package is a small CLI tool that provides the command to bootstrap your projects.

To bootstrap a typescript package, simply run the following command (NOTE: pay attention to the npx! It will use the node_modules/.bin if it exists, so the second time will be faster!)

npx typescript-project-bootstrap create --type package --language typescript my-package

# shorthand: the CLI will add the  prefix for packages
npx typescript-project-bootstrap create --type package --language typescript my-package

This will create all the configuration files needed for your type of project!

Update a package

To update a package, simply bootstrap again! It may override some files that we didn't want to, but git has our back here! Just be sure to check the files before staging them!

Configuration files

Configuration files for a lot of scenarios are included in this package: jest, eslint, prettier, etc. However, to set it up in your project, you still need to create a config file that includes it (sort of like a "proxy").

For example, to include the eslint configuration you need to create a .eslintrc.js file like so:

// .eslintrc.js
module.exports = require('typescript-project-bootstrap/.eslintrc.typescript')

That also allows to extend the base configuration:

// .eslintrc.js
const base = require('typescript-project-bootstrap/.eslintrc.typescript')
module.exports = {
    ...base,
    overrides: [
        ...(base.overrides !== undefined ? base.overrides : []),
        {
            files: ['src/**/*.type.ts'],
            rules: {
                '@typescript-eslint/no-unused-vars': 'warn',
                '@typescript-eslint/consistent-type-imports': 'off',
            },
        },
    ],

}

FAQ

Custom configurations VS standard configurations

By using *.config.js type of files, you can gain a lot of our customization opportunities.This is especially useful to allow package-users of the typescript-project-bootstrap to customize the behavior without requiring to first make a PR on this package.

Which release configuration should I use in my project?

This package provides different release configuration templates:

Why lefthook instead of husky?

Because husky registers to every existing git-hook, and executes node on each of them. If you're a frequent committer, then you'll notice some performance improvement with lefthook! It only registers to the hooks that are specified, and runs a small Go-binary to launch the configured commands.

I already had husky configured, how do I switch?

First of all, you'll need to transfer your hook commands from your husky config to the lefthook.yml. Note that by default, typescript-project-bootstrap already comes with a config file that you can extend: lefthook.base.yml. This should be enough for most projects, but feel free to extend it with your own hooks, or suggest additional hooks to be added to the lefthook.base.yml!

With the following commands, you can clean up the hooks that were registered by husky and replace them with lefthook hooks. Note: this assumes you have typescript-project-bootstrap already installed.

# Remove all existing hooks
rm ./.git/hooks/*

# Re-initialize all the hooks
npx --no-install @arkweid/lefthook install

The package.json is changed on a postinstall. I don't want that, can I disable that?

Well yes, you can! But be extra careful here. Most of the scripts added to the package.json file are used in some form by the githooks or the default pipeline scripts. Make sure to add all required scripts like lint, check:types, test:coverage and more to your local package.json file.

To be super sure see the post-install script in ./bin and make sure all scripts from the updatableScripts array are available in your package.json file.

Add the option preventScriptUpdates to your package.json file like so:

{
  "name": "my-awesome-package",
  "version": "1.2.3",
  "private": true,
  // there it is:
  "preventScriptUpdates": true,
  "author": "Batman", 
}