title: tsc vs babel: a better transpilation/compiler workflow
body: <p>I’m working on an ESNext TypeScript project. Currently I’m having some difficulty running my bundler (Rollup) and unit tests (Mocha/Chai). I’ve been quite confused by using <code>tsc</code> or <code>babel</code> for my compilation process, and I just can’t seem to wrap my head around how all of it’s going to work.</p>
  
  <p>So far, I have the following configs:</p>
  
  <p>tsconfig.json (main config for the project; used in rollup.config.json)</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "esnext",
      "module": "es2015",
      "lib": ["esnext", "dom"],
      "declaration": true,
      "outDir": "./lib",
      "rootDir": "./src",
      "strict": true,
      "noImplicitAny": true,
      "moduleResolution": "node",
      "baseUrl": "./",
      "types": [
        "node",
        "three"
      ], 
      "esModuleInterop": true,
      "inlineSourceMap": true,
      "pretty": true,
      "skipLibCheck": true
    },
    "include": [
      "src/**/*"
    ],
    "exclude": [
      "node_modules",
    ]
  }
  </code></pre>
  
  <p>rollup.config.js (rollup file for main project module bundling)</p>
  
  <pre class="lang-js prettyprint-override"><code>import typescript from 'rollup-plugin-typescript2';
  import babel from 'rollup-plugin-babel';
  import globals from 'rollup-plugin-node-globals';
  import builtins from '@joseph184/rollup-plugin-node-builtins';
  import resolve from 'rollup-plugin-node-resolve';
  import commonjs from 'rollup-plugin-commonjs';
  import pkg from "./package.json";
  
  export default [
      {
          input: './src/index.ts',
          plugins: [
              typescript(),
          ],
          external: [
              "three"
          ],
          output: [
              {
                  file: pkg.module,
                  format: 'es'
              }
          ]
      },
      {
          input: './src/index.ts',
          plugins: [
              resolve({
                  preferBuiltins: true,
                  mainFields: ['module', 'main'],
              }),
              globals({
                  process: true,
                  global: true,
                  dirname: true,
                  filename: true
              }),
              builtins(),
              commonjs(),
              typescript(),
              babel({
                  babelrc: true
              }),
          ],
          external: [
              "three"
          ],
          output: [ // Required; Array = multiple outputs
              {
                  file: pkg.main,
                  format: 'umd',
                  name: 'Divine'
              },
              {
                  file: "lib/divine.cjs.js",
                  format: 'cjs'
              }
          ]
      }
  ]
  </code></pre>
  
  <p>.babelrc (babel options for the main project’s module bundling)</p>
  
  <pre><code>{
      "presets": [
          ["@babel/preset-env", {
              "useBuiltIns": "entry",
              "debug": "true"
          }],
          "@babel/preset-typescript"
      ],
      "plugins": [
          "@babel/plugin-proposal-class-properties",
          "@babel/plugin-transform-runtime",
          "@babel/plugin-transform-arrow-functions",
          "@babel/plugin-syntax-dynamic-import"
      ],
      "compact": "auto",
      "exclude": [
          "./src/**/test/**/*.spec.ts",
          "./node_modules/*"
      ]
  }
  </code></pre>
  
  <p>tsconfig.test.json (<code>tsc</code> config used for <code>mocha</code> with <code>ts-node</code> as the compiler)</p>
  
  <pre><code>{
      "compililerOptions": {
          "target": "esnext",
          "module": "commonjs",
          "lib": ["esnext", "dom"],
          "moduleResolution": "node",
          "esModuleInterop": true,
          "types": [
              "chai",
              "mocha",
          ],
          "exclude": [
              "src/core/loggingsystem/test",
              "src/core/messagesystem/test"
          ]
      }
  }
  </code></pre>
  
  <p>My main question is: which should I use for esnext to es5 (for most browser support)? I want to work in ESNext code, but I want to have my build steps with the least friction possible. Is it better to use <code>tsc</code> natively, or should I have Babel mixed in/fully used? I’ve been having a very difficult time with my builds as I’m still quite unsure of how it should all fit together. </p>
  
  <p>Any help is much appreciated!</p>