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

ev3-model

v0.0.3

Published

# What is this?

Downloads

12

Readme

TypeScript-Babel-Starter

What is this?

This is a small sample repository that uses Babel to transform TypeScript to plain JavaScript, and uses TypeScript for type-checking. This README will also explain step-by-step how you can set up this repository so you can understand how each component fits together.

For simplicity, we've used babel-cli with a bare-bones TypeScript setup, but we'll also demonstrate integration with JSX/React, as well as adding bundlers into the mix. Specifically, we'll show off integration with Webpack for if you're deploying an application, and Rollup for if you're producing a library.

How do I use it?

Building the repo

npm run build

Type-checking the repo

npm run type-check

And to run in --watch mode:

npm run type-check:watch

How would I set this up myself?

Install your dependencies

Either run the following:

npm install --save-dev typescript @babel/core @babel/cli @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-typescript

or make sure that you add the appropriate "devDependencies" entries to your package.json and run npm install:

"devDependencies": {
    "@babel/cli": "^7.8.3",
    "@babel/core": "^7.8.3",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/preset-env": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
    "typescript": "^3.7.5"
}

Create your tsconfig.json

Then run

tsc --init --declaration --allowSyntheticDefaultImports --target esnext --outDir lib

Note: TypeScript also provides a --declarationDir option which specifies an output directory for generated declaration files (.d.ts files). For our uses where --emitDeclarationOnly is turned on, --outDir works equivalently.

Create your .babelrc

Then copy the .babelrc in this repo, or the below:

{
    "presets": [
        "@babel/env",
        "@babel/typescript"
    ],
    "plugins": [
        "@babel/proposal-class-properties"
    ]
}

Set up your build tasks

Add the following to the "scripts" section of your package.json

"scripts": {
    "type-check": "tsc --noEmit",
    "type-check:watch": "npm run type-check -- --watch",
    "build": "npm run build:types && npm run build:js",
    "build:types": "tsc --emitDeclarationOnly",
    "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --source-maps inline"
}

How do I change it?

Using JSX (and React)

Full example available here

Install your dependencies

Install the @babel/preset-react package as well as React, ReactDOM, and their respective type declarations

npm install --save react react-dom @types/react @types/react-dom
npm install --save-dev @babel/preset-react

Update .babelrc

Then add "@babel/react" as one of the presets in your .babelrc.

Update tsconfig.json

Update your tsconfig.json to set "jsx" to "react".

Use a .tsx file

Make sure that any files that contain JSX use the .tsx extension. To get going quickly, just rename src/index.ts to src/index.tsx, and add the following lines to the bottom:

import React from 'react';
export let z = <div>Hello world!</div>;

Using Webpack

Full example available here

Install your dependencies

npm install --save-dev webpack webpack-cli babel-loader

Create a webpack.config.js

Create a webpack.config.js at the root of this project with the following contents:

var path = require('path');

module.exports = {
    // Change to your "entry-point".
    entry: './src/index',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [{
            // Include ts, tsx, js, and jsx files.
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }],
    }
};

Create a build task

Add

"bundle": "webpack"

to the scripts section in your package.json.

Run the build task

npm run bundle

Using Rollup

Full example available here

Install your dependencies

npm install --save-dev rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-commonjs

Create a rollup.config.js

Create a rollup.config.js at the root of this project with the following contents:

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];

const name = 'RollupTypeScriptBabel';

export default {
  input: './src/index.ts',

  // Specify here external modules which you don't want to include in your bundle (for instance: 'lodash', 'moment' etc.)
  // https://rollupjs.org/guide/en#external-e-external
  external: [],

  plugins: [
    // Allows node_modules resolution
    resolve({ extensions }),

    // Allow bundling cjs modules. Rollup doesn't understand cjs
    commonjs(),

    // Compile TypeScript/JavaScript files
    babel({ extensions, include: ['src/**/*'] }),
  ],

  output: [{
    file: pkg.main,
    format: 'cjs',
  }, {
    file: pkg.module,
    format: 'es',
  }, {
    file: pkg.browser,
    format: 'iife',
    name,

    // https://rollupjs.org/guide/en#output-globals-g-globals
    globals: {},
  }],
};

Create a build task

Add

"bundle": "rollup -c"

to the scripts section in your package.json.

Run the build task

npm run bundle