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

@growflow/babel-preset

v7.0.0

Published

Babel preset for GrowFlow web apps.

Downloads

28

Readme

GrowFlow Babel Preset

Babel preset that allows you to use the latest TypeScript features across GrowFlow projects.

Usage

yarn add --dev @growflow/babel-preset

You can then create a babel.config.json file in the root of your project:

{
  "presets": ["@growflow/babel-preset"]
}

The preset will compile for both the web and for node. It will compile for the web by default (specifically for use in webpack). It will leave imports and exports intact so that webpack can tree shake.

To compile for node v12, you will need to set the BABEL_ENV or NODE_ENV environment variable to node or test when compiling. If you are using Jest, it will automatically set the NODE_ENV variable to test for you.

Running an App

If you want to run your app or server via babel, you can make use of @babel/node.

npx install-peerdeps @babel/node --dev

Assuming the entry point of your app lives at src/index.ts:

BABEL_ENV=node babel-node --extensions ".ts,.tsx,.js,.jsx" src/index.ts

Compiling Libraries

Here is a sample package.json that will compile a TypeScript project with source files in the src folder into three "distribution" folders:

  • es: This is where the "webpackable" version of the compiled code is output. This code will still have import and export module syntax untouched. The package.json's module key points to this entry which Webpack will find and use. We can also signal to Webpack that our library is tree-shakable via the sideEffects key.

  • lib: This is where the node version of the compiled code is output. The module syntax will be compiled to CommonJS so that it can be used within a node app. This output corresponds to the package.json's main entry.

  • dist: The TypeScript type declarations are output here so that consuming apps that use TypeScript will get intellisense and type-checking. The package.json's types key points here.

{
  "main": "lib/index.js",
  "module": "es/index.js",
  "types": "dist/index.d.ts",

  "sideEffects": false,

  "files": ["es", "lib", "dist", "README.md"],

  "scripts": {
    "build": "rimraf dist es lib && tsc -p tsconfig.output.json && babel src -d es --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward --copy-files && cross-env BABEL_ENV=node babel src -d lib --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward --copy-files"
  },

  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@growflow/babel-preset": "^5.7.1",
    "cross-env": "^7.0.2",
    "rimraf": "^3.0.2"
  }
}

where tsconfig.output.json is a TypeScript configuration file which is only used to output type definitions:

{
  "extends": "./tsconfig.json",
  "include": ["src"],
  "compilerOptions": {
    "noEmit": false,
    "emitDeclarationOnly": true,
    "rootDir": "src",
    "outDir": "dist"
  }
}

We make use of cross-env to set the BABEL_ENV variable to that poor Windows users can play along. Remember, Windows users are people too and they deserve to compile code just like you. 😁

Usage within a Monorepo

If you have multiple packages within a monorepo, you can make use of this preset with a single babel.config.json file at the root of the project. In order for babel to find the configuration file, you will need to set the root mode to upward. The sample build command above already does this.