Skip to content

Instantly share code, notes, and snippets.

@flanger001
Last active October 15, 2018 02:03
Show Gist options
  • Save flanger001/5d6b1d656dea7da064263611b4418a53 to your computer and use it in GitHub Desktop.
Save flanger001/5d6b1d656dea7da064263611b4418a53 to your computer and use it in GitHub Desktop.
Babel + Typescript + Webpack resources

The article that started it all and gave a SUPER LUCID explanation

https://iamturns.com/typescript-babel/

Some links from the Babel site that helped explain the setup tasks and why to use what features and configuration stuff.

https://babeljs.io/setup.html#installation https://babeljs.io/docs/en/configuration https://babeljs.io/docs/en/usage https://babeljs.io/docs/en/babel-cli

The announcement article from Microsoft

https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/

The Microsoft starter project

https://github.com/Microsoft/TypeScript-Babel-Starter

I added allowSyntheticDefaultImports: true to tsconfig.json

It's also important to note we need to install webpack-cli

npm install --save-dev webpack webpack-cli

https://webpack.js.org/guides/installation/

How to use path.resolve (I'm not good with Node stuff)

https://nodejs.org/api/path.html#path_path_resolve_paths

In order to polyfill all the extra features we need Babel's polyfill (which is core-js)

npm install --save @babel/polyfill

https://babeljs.io/docs/en/babel-polyfill

We can also not use Babel's polyfill and just use core-js features individually

npm install --save core-js

(I'm using Array.prototype.includes so I need the array features https://github.com/zloirock/core-js/tree/v2#ecmascript-6-array)

Either way, whatever we use we need to stick into the module.imports.entry array in webpack.config.js:

module.exports = {
  entry: ["core-js/fn/array", "core-js/fn/whatever", path/to/entry-point],
  // other stuff
}

Externals, like jQuery, which I am using in an application because it is fast and easy. TL;DR: Just use a CDN unless it's a pain to do so

https://webpack.js.org/configuration/externals/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment