How to publish a component written in typescript consumable as a global, commonjs, or typescript module

I have written a simple component in typescript which has a dependency on d3. I would like to publish this component on npm and have it be usable as a global, a commonjs module, or a typescript module. The component looks something like this:

/// <reference types="d3" />
class MyAwesomeComponent {
  data(data: IMyDataFormat) {
    // set data, etc.
  }
  render() {
    // do stuff with d3
  }
}
interface IMyDataFormat {
  // keys/types
}

My tsconfig.json file currently looks like this:

{
  "compilerOptions": {
    "module": "none",
    "target": "es5",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "declaration": true,
    "outFile": "./dist/index.js",
    "sourceMap": true
  },
  "include": [
    "./src/**/*.ts"
  ]
}

When I run tsc with this config, I get a file which works in the global context, so this would work for a consumer:

<script src="./d3.js"></script>
<script src="./my-awesome-component.js"></script>
<script>
  var chart = new MyAwesomeComponent();
  chart.data([/* ... */]);
  chart.render();
</script>

How do I set up my project (e.g. with alternate tsconfig files or small changes to the source files etc) so that it is consumable in a commonJS environment (i.e. webpack or browserify), as well as in a typescript project environment?

Here is what I am expecting to work for the commonJS environment:

const MyAwesomeComponent = require('my-awesome-component');
// this would also be fine:
const MyAwesomeComponent = require('my-awesome-component').MyAwesomeComponent;

Here is what I am expecting to work for the TypeScript environment:

import {MyAwesomeComponent, IMyDataFormat} from 'my-awesome-component';

Thanks!