@the-gear/ts-lib-starter
TypeScript library setup for multiple compilation targets using tsc and rollup
Last updated 2 years ago by langpavel .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @the-gear/ts-lib-starter 
SYNC missed versions from official npm registry.

@the-gear/ts-lib-starter

Build Status Standard Version styled with prettier Conventional Commits Greenkeeper badge

git clone https://github.com/the-gear/ts-lib-starter LIBNAME && cd $_ && yarn

✨ Features

  • creates package for both Node and Browser
  • build will creates 4 standard "package" formats:
    • umd ???? UMD bundle for Node and Browser

      main field in package.json

    • esm5 ???? transpiled files to ES5 + es2015 modules for tree shaking

      module field in package.json

    • esm2015 ???? raw javascript files transpiled from typescript to latest ES standard ( es2018 )

      es2015 field in package.json

      this is useful if you wanna transpile everything or just wanna ship untranspiled esNext code for evergreen browsers)

    • fesm ???? experimental bundle type introduced by Angular team (TL;DR: it's an es2015 flattened bundle, like UMD but with latest ECMAscript and JS modules)
  • type definitions are automatically generated and shipped with your package
    • types field in package.json

  • sideEffects ???? support proper tree-shaking for whole library ( Webpack >= 4). Turn this off or adjust as needed if your modules are not pure!

Start coding in seconds !

  1. git clone https://github.com/the-gear/ts-lib-starter LIBNAME && cd $_
  2. yarn

asciicast

Yes that's it. Happy coding ! ????

???? Consumption of published library:

  1. install it ????
yarn add my-new-library
# OR
npm install my-new-library
  1. use it ????

Webpack

NOTE:

Don't forget to turn off ES modules transpilation to enable tree-shaking!

  • babel: {"modules": false}
  • typescript: {"module": "esnext"}
// main.ts or main.js
import { Greeter } from 'my-new-library';

const mountPoint = document.getElementById('app');
const App = () => {
  const greeter = new Greeter('Stranger');
  return `<h1>${greeter.greet()}</h1>`;
};
const render = (Root: Function, where: HTMLElement) => {
  where.innerHTML = Root();
};

render(App, mountPoint);
<!-- index.htm -->
<html>
  <head>
    <script src="bundle.js" async></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

UMD/ES2015 module aware browsers (no bundler)

<html>
  <head>
    <script type="module">
      import { Greeter } from './node_modules/my-lib/esm2015/index.js';

      const mountPoint = document.querySelector('#root');

      const App = () => {
        const greeter = new Greeter('Stranger');
        return `<h1>${greeter.greet()}</h1>`;
      };

      const render = (Root, where) => {
        where.innerHTML = Root();
      };

      render(App, mountPoint);
    </script>
    <script nomodule src="node_modules/my-lib/bundles/my-new-library.umd.min.js"></script>
    <script nomodule async>
      var Greeter = MyLib.Greeter;

      var mountPoint = document.querySelector('#root');

      var App = function() {
        var greeter = new Greeter('Stranger');
        return '<h1>' + greeter.greet() + '</h1>';
      };

      var render = function(Root, where) {
        where.innerHTML = Root();
      };

      render(App, mountPoint);
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

????‍???? Technical overview

???? Style guides

???? Publishing

????️‍♀️ Troubleshooting

dynamic import()

This starter uses latest TypeScript >=3.x which has support for lazy loading chunks/modules via import() and also definition acquisition via import('../path-to-module').TypeFoo

Before TS 2.9, it wasn't possible to properly generate ambient definitions if you used dynamic import(). This works now as expected without any hacks ❤️ !

Before TS 2.9

Please note that if you wanna use that feature, compiler will complain because declaration generation is turned on, and currently TS can't handle type generation with types that will be loaded in the future ( lazily )

How to solve this:

  • turn of type checking and don't generate types for that lazy import: import('./components/button') as any
  • or you can use this temporary workaround

???? License

MIT

Thanks

This is fork of typescript-lib-starter by Martin Hochel. Thank you! ????

Other TypeScript Starters

Current Tags

  • 6.3.0                                ...           latest (2 years ago)

5 Versions

  • 6.3.0                                ...           2 years ago
  • 6.2.0                                ...           2 years ago
  • 6.0.2                                ...           2 years ago
  • 6.0.1                                ...           2 years ago
  • 6.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |